CSS의 각종 단점을 보완하기 위해 사용하는 전처리기(Preprocessor)
Sass
로 작성한 스타일을 그대로 사용할 수 없고, compile
과정을 통해 CSS
로 변환해서 사용한다.
/* */
과 //
두 가지 주석을 사용할 수 있으며, //
주석은 compile
에 포함되지 않는다.
Sass
는 들여쓰기에 민감하다. 주의하도록 하자!
complile
된 결과물을 보고싶다면 SassMeister에서 직접 작성해보자.
선언을 중첩하여 상위 선택자의 반복을 피하는 문법
상위 선택자를 참조할 때 사용하는 기호
scss
.font-size {
&-sm { font-size: 12px; }
&-md { font-size: 14px; }
&-lg { font-size: 16px; }
}
css
.font-size-sm {
font-size: 12px;
}
.font-size-md {
font-size: 14px;
}
.font-size-lg {
font-size: 16px;
}
중첩 유효범위의 변수는 사용하되, 상위 선택자를 제거할 때 사용한다.
@at-root
를 붙여서 사용한다.반복되는 속성 명을 단축해서 사용할 수 있다.
flex-...
, grid-...
, margin-...
등 속성들을 묶어서 단축하여 사용할 수 있다.scss
.container {
display: flex;
.item {
flex: {
grow: 1;
shrink: 0;
basis: 50px;
};
margin: {
top: 10px;
bottom: 20px;
left: auto;
right: auto;
}
}
}
css
.container {
display: flex;
}
.container .item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
반복적으로 사용하는 값을 변수로 선언 및 사용할 수 있다.
$(Dollar Sign)
을 이용해서 선언한다.
유효 범위를 가지고 있으며, 중괄호 내부에 있는 것만 참조가 가능하다.
!global
!default
특정 값을 채워넣기 위해 사용하는 문법
문자열 안에 #{value}
문법을 이용해서 변수를 채워 넣을 수 있다.
아래처럼 선택자에도 사용이 가능하다.
scss
$class: "item";
.box-#{$class} {
width: 100px;
height: 100px;
}
css
.box-item {
width: 100px;
height: 100px;
}
Numbers, Colors
CSS
에서 사용하는 것과 동일한 타입이다.Booleans
JS
의 boolean
과 동일한 타입이다.Strings
Colors
와 Booleans
를 제외한 모든 문자열은 String
타입이다.Null
compile
되지 않는다.Lists
JS
의 Array
와 유사한 타입이다.
소괄호를 사용한다.
Maps
JS
의 Object
와 동일한 타입이다.
소괄호를 사용한다.
내장 모듈 map
을 이용해서 조회한다.
스타일을 정의해서 저장해두고, 함수처럼 재활용할 수 있게 하는 규칙
@mixin string[($parameters)] { style }
문법으로 스타일을 정의할 수 있다.
Sass
에서는 =
기호로 사용한다.
믹스인 또한 중첩이 가능하다.
믹스인의 변수 뒤에 spread operator
를 이용해서 rest parameter
를 사용할 수 있다.
parameter
에 :
을 사용해서 default parameter
를 지정할 수 있다.
만들어진 믹스인을 불러와서 재사용할 수 있게 하는 규칙
@include string[(arguments)];
를 이용해 믹스인을 재사용할 수 있다.
Sass
에서는 +
기호로 사용한다.
arguments
의 타입이 Lists
일 때, 뒤에 spread operator
를 이용해서 전개할 수 있다.
arguments
에 :
을 사용하여 순서에 상관없이 명시적으로 값을 정의하는 keyword arguments
를 사용할 수 있다.
믹스인 이름과 스타일 블록 사이에 using (variable)
을 이용해서 데이터를 추가로 전달받을 수 있다.
@include에서 @mixin으로 추가적인 스타일을 전달할 때 사용하는 규칙
@include
문법 뒤에 중괄호로 style
을 정의하고, @mixin
에서는 @content
를 이용해 해당 스타일을 받아온다.scss
@mixin font($fontSize: 12px) {
font-size: $fontSize;
@content;
}
.header {
@include font(15px) {
font-weight: border;
font-family: serif;
};
}
css
.header {
font-size: 15px;
font-weight: border;
font-family: serif;
}
@include
에서 사용할 데이터를 전달할 수 있다.스타일을 정의해두고 가져오는 믹스인과 달리, 이미 정의된 스타일을 상속받을 때 사용하는 규칙
@extend selector
를 이용해서 사용한다.
Sass
에서는 %(Percent)
기호를 사용해서 extend
에 사용하는 Placeholder Selector
로 사용할 수 있다.
중첩 구조에서 사용하는 경우, 의도하지 않은 선택자가 만들어질 수 있다.
대부분은 믹스인을 사용하는 것이 좋다.