중첩(Nesting)
SASS는 중첩기능을 사용할 수 있다. 상위 선택자의 반복을 피할수 있어 좀 더 편리하게 복잡한 구조를 작성할 수 있다.
SCSS
.wrap {
width: 100%;
.list {
padding: 20px;
li {
color: red;
}
}
}
Compiled to
.wrap {
width: 100%;
}
.wrap .list {
padding: 20px;
}
.wrap .list li {
color: red;
}
상위 선책자 참조
중첩 안에서 &키워드는 상위(부모) 선택자를 참조한다.
SCSS
.wrap {
width: 100%;
&.active {
color: red;
}
}
Compiled to
.wrap {
width: 100%;
}
.wrap.active {
color: red;
}
& 키워드는 상위 선택자를 참조했기 때문에 아래와 같이 응용이 가능하다.
SCSS
.wrap {
width: 100%;
&-small { font-size: 12px; }
&-medium { font-size: 14px; }
&-large { font-size: 16px; }
}
Compiled to
.wrap {
width: 100%;
}
.wrap-small {
font-size: 12px;
}
.wrap-medium {
font-size: 14px;
}
.wrap-large {
font-size: 16px;
}
중첩 벗어나기
중첩에서 벗어나고 싶을 때 @at-root키워드를 사용한다. 중첩 안에서 생성하되 중첩 밖에서 사용해야 하는 경우에 유용하다.
SCSS
.list {
width: 100px;
li {
width: 50px;
@at-root .box {
width: 10px;
}
}
}
Compiled to
.list {
width: 100px;
}
.list li {
width: 50px;
}
.box {
width: 10px;
}
중첩된 속성
font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들은 아래와 같이 사용할 수 있다.
SCSS
.wrap {
font: {
weight: bold;
size: 12px;
family: sans-serif;
};
margin: {
top: 10px;
left: 20px;
};
padding: {
bottom: 20px;
right: 10px;
}
}
Compiled to
.wrap {
font-weight: bold;
font-size: 12px;
font-family: sans-serif;
margin-top: 10px;
margin-left: 20px;
padding-bottom: 20px;
padding-right: 10px;
}
변수(Variables)
반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $를 붙인다.
$변수이름: 속성값;
SCSS
$color-code: #000;
$url: "/common/images/";
$w: 200px;
.wrap {
color: $color-code;
background-image: $url;
width: $w;
}
Compiled to
.wrap {
color: #000;
background-image: "/common/images/";
width: 200px;
}
변수의 유효범위
변수는 사용 가능한 유효범위가 있다. 선언된 블록({}) 내에서만 유효범위를 가진다.
SCSS
.wrap {
$w: 100px;
.box {
width: $w;
}
}
// Error
.box2 {
width: $w;
}
변수 $w는 .wrap의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서 사용할 수 없다.
변수 재 할당
아래처럼 변수에 변수를 할당할 수 있다.
SCSS
$red: #FF0000;
$color-code: $red;
.box {
color: $color-code;
}
Compiled to
.box {
color: #FF0000;
}
전역 설정
!global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있다. 대신 기존에 사용하던 같은 이름의 변수가 있을 경우 값이 덮어져 사용된다.
SCSS
.box {
$w: 100px !global;
width: $w;
}
.box2 {
width: $w;
$w: 200px !global;
}
.box3 {
width: $w;
}
Compiled to
.box {
width: 100px;
}
.box2 {
width: 100px;
}
.box3 {
width: 200px;
}
초기값 설정
!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다. 즉, 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다.
SCSS
$w: 100px;
.box {
$w: 200px !default;
width: $w;
}
Compiled to
.box {
width: 100px;
}
변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우 현재 설정하는 값은 사용하지 않겠다는 의미로 쓸 수 있다.
문자 보간
#{}를 이용하여 코드의 어디든지 변수 값을 넣을 수 있다.
SCSS
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
Compiled to
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
가져오기(Import)
CSS에는 현재 파일에 다른 CSS를 불러오는 @import라는 속성이 있다. 이 속성을 사용하면 의도에 따라 코드를 잘게 쪼개어 효율적으로 유지 보수할 수 있지만, @import로 선언되어 있는 CSS마다 http 요청을 발생하므로 웹페이지 성능 저하의 원인이 된다 하여 사용을 지양하고 있다. SASS에서도 다른 파일을 불러올 수 있는 @import가 있다. CSS의 @import와 다른 점은 여러개의 SASS파일은 @import해도 최종적으로 하나의 CSS로 컴파일해주기 때문에 성능에 영향을 주지 않고 코드를 여러 파일로 나누어 관리할 수 있다. 물론 @import된 파일에서 정의된 내용은 부모 SASS 파일에서도 사용할 수 있다.
// 작성 방법 : @import "파일명.scss" 또는 @import "파일명";
@import "reset";
@import "reset.scss";
참고로 .scss파일을 @import할 경우, .scss 확장자를 써주지 않아도 된다.
Partials
만약 .scss파일 앞에 언더바(_)로 시작하면 CSS파일로 따로 컴파일 되지 않는다. html에서 해당 CSS파일을 불러올일이 없고, @import만 필요한 경우에는 이 기능을 사용하면 된다.
References
Sass(SCSS) 완전 정복!
Sass 기초와 활용
[사스(Sass)] 2. Sass 사용법
CSS 전처리기
Sass는 SCSS로 쓰세요
[사스(Sass)] Sass 기본 사용법 (컴파일 및 명령어)
![[Nginx] Nginx 기본 세팅](https://susukkekki.kr/wp-content/uploads/2017/02/web.png)