Sass는 CSS를 재미있게 만들어준다. 개발자에겐 접근하기 쉽겠지만 디자이너에겐 개발에 대한 고민을 하게 만드는 것같다. 하지만 현대적인 웹개발을 위하여 이제는 피할 수 없는 대세(?)인 Sass를 익혀야 한다.
1) 개요
- 만들어진 배경에 대해서 이해하자
- 여러 기능들의 본질은 간결하고 반복작업을 없애주는 웹 개발 흐름을(Web Development Workflow) 만들어준다
+ Nested Rules : 들여쓰기 가능 - 상위 개체에 대한 정의를 줄인다
// CSS
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
// SCSS (Sassy CSS)
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
// SASS
table.hl
margin: 2em 0
td.ln
text-align: right
+ Variables : 변수를 사용하여 반복적인 상수를 줄인다 ($를 사용)
// CSS
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
// SCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
// SASS
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
+ Mixins : 반복적인 입력을 함수화하는 것처럼 이용하여 코드를 줄인다 (@mixin @include 이용)
// CSS
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}
// SCSS
@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}
@mixin left($dist) {
float: left;
margin-left: $dist;
}
#data {
@include left(10px);
@include table-base;
}
// SASS
@mixin table-base
th
text-align: center
font-weight: bold
td, th
padding: 2px
@mixin left($dist)
float: left
margin-left: $dist
#data
@include left(10px)
@include table-base
+ Selector Inheritance : 상속 개념으로 기존 코드를 줄인다 (@extend 사용)
// CSS
.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}
// SCSS
.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}
// SASS
.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px
- Sass는 두가지 문법으로 작성을 할 수 있다
+ Scss : .scss 이고 {} 와 ; 가 존재, CSS3 의 확장자이다 (Sassy CSS)
+ Sass : .sass 이고 {} 와 ; 가 없고 대신 들여쓰기로 구분을 하여 간결함을 추구한다 (Haml 영향을 받음)
- Sass는 색에 대한 Functions을 제공한다 (참조)
예)
2) 설치 및 사용법
- gem install sass
- 예제 코드 : dowon.scss
#dowon {
width : 20%;
height : 120px;
}
- css 파일 변환하기 : sass --watch dowon.scss:dowon.css
- Partials & Concatenation : @import 를 사용하고 분할된 파일의 컨벤션은 _partialFile.scss 즉 앞에 _ (underbar)를 붙여서 import 되는 파일을 따로 관리한다 그리고 컴파일을 하게 되면 지정한 하나의 파일 .css로 합쳐진다
<참조>
'HTML5, CSS3 > CSS' 카테고리의 다른 글
| [GroundWorkCSS] Twitter Bootstrap의 새로운 대안 (0) | 2013.08.07 |
|---|---|
| [RWD] 반응형 웹 디자인 - 개념 잡기 (0) | 2013.05.09 |
| [Compass] 이해하기 (0) | 2013.04.20 |
| [CSS] Preprocessor 선택하기 (0) | 2013.04.20 |
| [Twitter Bootstrap] 시작하기 (0) | 2013.01.26 |
