'연구소/Sass'에 해당되는 글 3건
| 2016.04.12 Sass Basics - Nesting |
| 2016.04.11 Sass Basics - Preprocessing, Variables |
| 2016.04.11 Sass 란 무엇인가? |
Nesting
HTML 은 중첩구조와 계층을 가지고 있는데, CSS 는 그렇지 않다.
Sass 는 HTML 과 같은 계층구조로 CSS 셀렉터를 구성할 수 있다. 심하게 중첩된 규칙은 필요이상의 CSS 가 만들어지기 때문에 유지보수를 어렵게 하고 나쁜 사례가 됨을 고려해야 한다.
아래는 일반적인 스타일의 사이트 네비게이션 예제이다.
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 는 아래와 같다.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 |
Preprocessing
CSS 로 구성된 스타일시트는 사이즈가 커지면서 복잡해지고 유지보수가 어려워진다. Sass 는 CSS 에는 없는 변수(Variables), 중첩구조(nasting), 재사용(mixin, include), 상속(inheritance) 을 제공하여 CSS 를 좀 더 실용적으로 만들 수 있게 한다.
대부분의 작업은 터미널에서 이루어진다. Sass 를 인스톨한 후 터미널에
sass input.scss output.css 를 실행할 수 있다. preprocessing 작업 진행 시 개별적인 파일이나 전체 디렉토리를 볼 수 있는데 추가적으로 --watch 플래그를 통해 가능하다. 아래는 Sass 를 실행하면서 전체 디렉토리를 살펴보는 예제이다.$ sass --watch app/sass:public/stylesheets
Variables
변수는 프로그래밍에서 사용하는 변수와 같은 의미로 스타일시트 전반적으로 재사용이 필요한 값을 저장해두는 역할을 한다. 색상, 폰트와 같은 값을 저장해 두고 재사용할 수 있다. Sass 는
$ 심볼을 이용하여 변수를 만든다.$font-stack: Helvetica, sans-serif;$primary-color: #333;
body { font: 100% $font-stack; color: $primary-color;}Sass 를 처리할 때, $font-stack 과 $primary-color 를 정의하고, 출력 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 |
오픈소스를 찾아보다 보니 *.scss 파일들이 눈에 띄여서 관련된 내용을 찾아보았습니다.
CSS 에 프로그래밍 적인 요소를 삽입하여 강력한 힘을 주는 것이 Sass 입니다. SCSS 는 Sass 의 새로운 버전이라고 하는데, 조금 더 살펴봐야 자세히 알 수 있을 것 같습니다.
'연구소 > Sass' 카테고리의 다른 글
| Sass Basics - Nesting (0) | 2016.04.12 |
|---|---|
| Sass Basics - Preprocessing, Variables (0) | 2016.04.11 |