CSS 파일의 규모가 커지면 불가피하게 가독성이 떨어지고 유지보수에
어려움을 겪는다. CSS의 가독성과 재활용성을 높이고,
CSS의 단점을 보완해서 나온게 SCSS
이다.
또한 브라우저에서는 SCSS
파일을 인식하지 못하기 때문에
배포할 때에는 SCSS -> CSS
변환 과정을 반드시 거쳐야한다.
이때 사용되는 기술들로는 Gulp
, webpack
등이 있다.
그럼 CSS
의 단점을 보완했다는 SCSS
의 기능들에 대해 알아보자.
css에서 변수를 설정하고 그 변수값을 사용하여 css를 작성할 수 있다.
import
만 하면 쉽게 사용가능하다.
scss파일을 css파일로 변환하지 않기 위해서는 scss파일 앞에 _를 사용한다.
/* scss/_variables.scss */
$bg: #acb5ea;
/* scss/styles.scss */
@import "variables"; /* import */
body {
background: $bg;
}
특정 요소들의 스타일을 좀 더 간편하고 시인성 좋게 작성할 수 있게 한다.
/* 기존 css */
.box { ... }
.box h2 { ... }
/* Nesting SCSS */
.box {
...;
h2 {
...;
}
}
scss functionality
를 재사용할 수 있도록 한다.
아래와 같이 프로그래밍하는것처럼 인자를 받고, 그 인자값을 사용할 수 있다.
/* scss/_mixins.scss */
@mixin mixinTitle($color) {
color: $color;
font-size: 36px;
margin-bottom: 20px;
}
/* scss/styles.scss */
@import "mixins";
@import "variables";
h1 {
@include mixinTitle($themeColor);
}
@content
는 이미 구현한 mixinTitle
에 오버라이딩(Overriding)
하는 것이다.
아래 예시에서 보듯이, h1
태그는 mixinTitle
에 css 속성만 갖고 있지만
.h1
클래스를 갖고 있으면 mixinTitle
가 갖고 있는 css 속성에
text-align: center;
가 추가된다.
/* scss/_mixins.scss */
@mixin mixinTitle($color) {
color: $color;
font-size: 36px;
margin-bottom: 20px;
@content; /* @content 사용 설정*/
}
/* scss/styles.scss */
@import "mixins";
@import "variables";
h1 {
@include mixinTitle($themeColor);
}
.h1 {
@include mixinTitle($themeColor);
text-align: center;
}