SCSS ?
CSS 파일의 규모가 커지면 불가피하게 가독성이 떨어지고 유지보수에
어려움을 겪는다. CSS의 가독성과 재활용성을 높이고,
CSS의 단점을 보완해서 나온게 SCSS이다.
또한 브라우저에서는 SCSS 파일을 인식하지 못하기 때문에
배포할 때에는 SCSS -> CSS 변환 과정을 반드시 거쳐야한다.
이때 사용되는 기술들로는 Gulp, webpack 등이 있다.
SCSS의 기능들
그럼 CSS의 단점을 보완했다는 SCSS의 기능들에 대해 알아보자.
variables
css에서 변수를 설정하고 그 변수값을 사용하여 css를 작성할 수 있다.
import만 하면 쉽게 사용가능하다.
scss파일을 css파일로 변환하지 않기 위해서는 scss파일 앞에 _를 사용한다.
/* scss/_variables.scss */
$bg: #acb5ea;/* scss/styles.scss */
@import "variables"; /* import */
body {
background: $bg;
}
Nesting
특정 요소들의 스타일을 좀 더 간편하고 시인성 좋게 작성할 수 있게 한다.
/* 기존 css */
.box { ... }
.box h2 { ... }/* Nesting SCSS */
.box {
...;
h2 {
...;
}
}mixins
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
@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;
}
wannabe---ing