Total: Today: Yesterday:
'연구소/Sass'에 해당되는 글 3건
2016.04.12 Sass Basics - Nesting
2016.04.11 Sass Basics - Preprocessing, Variables
2016.04.11 Sass 란 무엇인가?

Sass Basics - Nesting

연구소/Sass | 2016. 4. 12. 16:16 | Posted by 자수씨

Nesting

HTML 은 중첩구조와 계층을 가지고 있는데, CSS 는 그렇지 않다.

Sass 는 HTML 과 같은 계층구조로 CSS 셀렉터를 구성할 수 있다. 심하게 중첩된 규칙은 필요이상의 CSS 가 만들어지기 때문에 유지보수를 어렵게 하고 나쁜 사례가 됨을 고려해야 한다.

아래는 일반적인 스타일의 사이트 네비게이션 예제이다.

### SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

```ul```, ```li``` ```a``` 셀렉터는 ```nav``` 셀럭터 내부에 중첩되어 있다. 이러한 구조는 CSS 를 체계화 하는데 좋은 방법이며 좀 더 읽기 쉽게 만든다. 생성된 CSS 는 아래와 같다.

### CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

References

- http://sass-lang.com/guide


저작자표시

'연구소 > Sass' 카테고리의 다른 글

Sass Basics - Preprocessing, Variables  (0) 2016.04.11
Sass 란 무엇인가?  (0) 2016.04.11

,

Sass Basics - Preprocessing, Variables

연구소/Sass | 2016. 4. 11. 16:41 | Posted by 자수씨

Preprocessing

CSS 로 구성된 스타일시트는 사이즈가 커지면서 복잡해지고 유지보수가 어려워진다. Sass 는 CSS 에는 없는 변수(Variables), 중첩구조(nasting), 재사용(mixin, include), 상속(inheritance) 을 제공하여 CSS 를 좀 더 실용적으로 만들 수 있게 한다.

대부분의 작업은 터미널에서 이루어진다. Sass 를 인스톨한 후 터미널에 sass input.scss output.css 를 실행할 수 있다. preprocessing 작업 진행 시 개별적인 파일이나 전체 디렉토리를 볼 수 있는데 추가적으로 --watch 플래그를 통해 가능하다. 아래는 Sass 를 실행하면서 전체 디렉토리를 살펴보는 예제이다.

### bash

$ sass --watch app/sass:public/stylesheets


Variables

변수는 프로그래밍에서 사용하는 변수와 같은 의미로 스타일시트 전반적으로 재사용이 필요한 값을 저장해두는 역할을 한다. 색상, 폰트와 같은 값을 저장해 두고 재사용할 수 있다. Sass 는 $ 심볼을 이용하여 변수를 만든다.

### SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


Sass 를 처리할 때, $font-stack 과 $primary-color 를 정의하고, 출력 CSS 에는 변수 값이 위치를 지정한다. 사이트 전반적으로 사용하는 브랜드 컬러의 작업을 할 때 극히 강력함을 보여준다.


### CSS

body {

  font: 100% Helvetica, sans-serif;

  color: #333;

}



References

- http://sass-lang.com/guide


저작자표시

'연구소 > Sass' 카테고리의 다른 글

Sass Basics - Nesting  (0) 2016.04.12
Sass 란 무엇인가?  (0) 2016.04.11

,

Sass 란 무엇인가?

연구소/Sass | 2016. 4. 11. 16:05 | Posted by 자수씨

오픈소스를 찾아보다 보니 *.scss 파일들이 눈에 띄여서 관련된 내용을 찾아보았습니다.


http://sass-lang.com/



CSS 에 프로그래밍 적인 요소를 삽입하여 강력한 힘을 주는 것이 Sass 입니다. SCSS 는 Sass 의 새로운 버전이라고 하는데, 조금 더 살펴봐야 자세히 알 수 있을 것 같습니다.




저작자표시

'연구소 > Sass' 카테고리의 다른 글

Sass Basics - Nesting  (0) 2016.04.12
Sass Basics - Preprocessing, Variables  (0) 2016.04.11

,