SASS(Syntactically Awesome Stylesheets)
CSS pre-processor (CSS 전처리기)로서 CSS의 단점을 보완하고 가독성, 코드의 재사용에 유리한 CSS를 만들기 위한 확장이다. 조건문이나 반복문, 그리고 변수등을 사용할 수 있다.
브라우저는 SASS를 바로 해석할 수 없기 때문에 .sass, .scss 파일을 .css 파일로 컴파일 해야 하므로 SASS 환경을 설치해야 한다.
SASS는 중괄호를 사용하는 대신 파이썬 처럼 들여쓰기의 단계로 구문을 해석한다. (세미콜론도 사용하지 않음)
SCSS는 기본적인 CSS문법과 거의 비슷하게 SASS를 사용할 수 있다.
중첩
SASS에서 중첩기능을 사용하여 반복되는 부분을 많이 줄일 수 있다.
<div class="container">
<ul>
<li>
<div class="name">aB</div>
<div class="age">32</div>
</li>
</ul>
</div>
.container {
ul {
li {
list-style: none;
font-size: 50px;
.name {
color: royalblue;
}
.age {
color: orange;
}
}
}
}
해당 요소의 스코프 안에 중첩으로 정의할 수 있다.
.container-nest ul li {
list-style: none;
font-size: 50px;
}
.container-nest ul li .name {
color: royalblue;
}
.container-nest ul li .age {
color: orange;
}
위에 작성한 SCSS가 컴파일된 소스를 보면 후손 선택자를 사용한걸 알 수 있다. 만약 자식 선택자를 사용하길 원한다면
.container {
> ul {
li {
list-style: none;
font-size: 50px;
.name {
color: royalblue;
}
.age {
color: orange;
}
}
}
}
원하는 곳에 자식요소 선택자를 사용하면 된다. 그 결과는 아래와 같다.
.container-nest > ul li {
list-style: none;
font-size: 50px;
}
.container-nest > ul li .name {
color: royalblue;
}
.container-nest > ul li .age {
color: orange;
}
상위 선택자
상위 선택자는 '&' 기호를 사용한다.
쉽게 생각해서 &기호가 있는 범위의 선택자를 참조하고 있다고 생각하면 된다.
아래에서는 각각 'btn'과 'li'를 참조하고 있다는 의미.
.btn {
position: absolute;
&.active {
color: red;
}
}
.list {
li {
&:last-child {
margin-right: 0;
}
}
}
컴파일된 모습은 아래와 같다.
.btn {
position: absolute;
}
.btn.active {
color: red;
}
.list li:last-child {
margin-right: 0;
}
또 다른 방법으로도 응용할 수 있다.
.fs {
&-small {
font-size: 12px;
}
&-medium {
font-size: 14px;
}
&-large {
font-size: 16px;
}
}
& 기호가 상위 요소로 치환된다고도 볼 수 있다. (& 부분이 .fs 로 치환됨)
.fs-small {
font-size: 12px;
}
.fs-medium {
font-size: 14px;
}
.fs-large {
font-size: 16px;
}
중첩된 속성
심지어 속성들도 중첩되어 사용할 수 있다.
쉽게생각해서 네임스페이스를 정의한다고 보면 된다.
사용상 주의할 점은 중첩으로 사용할 속성을 정의할 때 콜론 ':' 기호를 붙여줘야 한다.
.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};
margin: {
top: 10px;
left: 20px;
};
padding: {
top: 10px;
bottom: 40px;
left: 20px;
right: 30px;
};
}
이 코드의 경우 아래와 같이 컴파일 된다.
.box {
font-weight: bold;
font-size: 10px;
font-family: sans-serif;
margin-top: 10px;
margin-left: 20px;
padding-top: 10px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
}
변수
SASS에서는 변수를 사용할 수 있다.
$size: 100px;
.container-var {
position: fixed;
top: $size;
.item {
width: $size;
height: $size;
transform: translateX($size);
}
}
변수는 앞에 '$' 기호를 붙여 정의해야 한다.
이렇게 공통되는 부분을 변수로 정의하여 재활용이 가능하다.
유의할 점으로는 변수는 블록의 유효범위를 가진다.
$size: 100px;
.container-var {
position: fixed;
top: $size; /* 100px */
.item {
$size: 200px;
width: $size; /* 200px */
height: $size; /* 200px */
transform: translateX($size);
}
left: $size; /* 200px */
}
위와 같이 해당 변수에 대해 재정의도 가능하다.
유의할 점은 .item 안에서 $size 변수가 200px로 재정의 하였기 때문에 left 속성이 100px이 아니라 200px이 된 것을 알 수 있다.
산술 연산
SASS에서 산술연산도 가능하다. 하지만 나누기의 경우 원하는대로 작동하지 않는다.
그 이유는 '/' 기호가 CSS의 단축속성에서 구분선으로 사용될 수 있기 때문이다.
산술 연산을 할 때는 기본 단위가 동일해야 한다. (calc 함수를 사용하면 가능.,)
div {
width: 20px + 20px; /* 40px */
height: 40px - 10px; /* 30px */
font-size: 10px * 2; /* 20px */
margin: 30px / 2; /* 30px/2 */
padding: 20px % 7 /* 6px */
}
이 문제를 해결할 수 있는 방법은 3가지가 있다.
1. 소괄호를 이용한다.
2. 변수를 사용한다. (변수를 사용할 경우 소괄호가 필요 없다.)
3. 다른 연산자와 같이 사용한다. 그러면 단축속성의 구분선으로 사용하지 않은 것을 명확하게 했기 때문
div {
$size: 30px;
margin: (30px / 2); /* 소괄호 사용 */
margin: $size / 2; /* 변수 사용 */
margin: 10px + 20px / 2; /* 20px 다른 연산자와 같이 사용 */
}
Mixin (재활용)
재활용할 속성들을 @mixin 이름 이라는 키워드를 사용하여 정의하고,
사용할 때에는 @include 이름 으로 정의된 mixin을 사용한다.
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.container-mixin {
@include center;
.item {
@include center;
}
}
.box {
@include center;
}
mixin은 마치 함수처럼 인수를 받게끔 정의할 수도 있다.
자바스크립트 처럼 인수가 없을 때 기본값을 정의할 수 있다.
@mixin box($size: 100px, $color: red) {
width: $size;
height: $size;
background-color: $color;
}
.container-mixin-box {
@include box(200px);
.item {
@include box($color: blue); /* 키워드 인수 */
}
}
.box {
@include box(300px);
}
키워드 인수를 사용하여 매개변수의 이름을 명시해서 사용할수도 있다.
반복문
반복문 또한 사용할 수 있는데, 문법은 아래와 같다.
// javascript
for (let i = 0; i < 10; i++) {
console.log(i)
}
/* SCSS */
@for $i from 1 through 10 {
.box:nth-child(#{$i}) {
width: 100px * $i;
}
}
단, 반복문에서 정의된 변수 (위 코드에서 $i)는 #{$i} 로 사용할 수 있다. (선택자에서)
함수
구조는 자바스크립트의 함수 구조와 비슷하다.
@function 키워드로 함수를 정의하고 반환 값은 @return을 사용하면 된다.
@function ratio($size, $ratio) {
@return $size * $ratio;
}
.box {
$width: 100px;
width: $width;
height: ratio($width, 1/2);
}
색상 내장 함수
SASS에 내장되어 있는 색상 함수들을 사용할 수 있다.
.box {
$color: royalblue;
background-color: $color;
&:hover {
background-color: darken($color, 10%);
}
&.built-in {
background-color: mix($color, red); /* 1, 2번째의 색상을 섞은 값을 반환한다.*/
background-color: lighten($color, 10%); /* 2번째 인수 만큼 더 밝게 만든다.*/
background-color: darken($color, 10%); /* 2번째 인수 만큼 더 어둡게 만든다.*/
background-color: saturate($color, 10%); /* 2번째 인수 만큼 채도를 올린다.*/
background-color: desaturate($color, 10%); /* 2번째 인수 만큼 채도를 낮춘다.*/
background-color: grayscale($color); /* 색상을 회색으로 변환한다.*/
background-color: invert($color); /* 색상을 반전시킨다.*/
background-color: rgba($color, 0.5); /* 2번째 인수에 투명도를 넘겨준다.*/
}
}
가져오기
다른 SCSS 파일을 가져오고 싶을 때 @import 키워드를 사용하여 가져올 수 있다.
url 함수를 사용하지 않고도 가져올 수 있다. 또한 확장자를 따로 명시하지 않아도 된다.
여러 파일을 쉼표로 구분하여 가져올 수 있다.
@import url('./sub.scss');
@import './sub.scss';
@import './sub';
@import './sub', './sub2';
데이터 종류
$number: 1; /* .5, 100px, 2rem */
$string: bold; /* relative, '../images/test.png' */
$color: red; /* blue, #fff000, rgba(0, 0, 0, .5) */
$boolean: true; /* false */
$null: null;
$list: orange, blue, red;
$map: (
o: orange,
b: blue,
r: red,
);
@each 반복문
map 자료형이나 list 자료형에 each 반복문을 사용할 수 있다.
$list: orange, blue, red;
@each $c in $list {
.box {
color: $c;
}
}
$map: (
o: orange,
b: blue,
r: red,
);
@each $key, $value in $map {
.box-#{key} {
color: $value;
}
}
@content 재활용
아래 코드를 보면 .box 에서 left-top mixin에 블럭을 지정하여 내용을 추가 했다.
추가한 부분이 @content 부분에 삽입된다.
@mixin left-top {
position: absolute;
top: 0;
left: 0;
@content;
}
.box {
width: 200px;
height: 200px;
@include left-top {
bottom: 0;
right: 0;
margin: auto;
}
}컴파일된 모습.
.box {
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
댓글