scss
나오게 된 이유
CSS 로도 충분한 스타일링을 할 수 있지만, 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재 등 프로젝트의 규모가 커질수록 아쉬움도 커지기 때문에 등장하게 되었다.
코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다.
CSS Preprocessor
sass, less 등을 부르는 말로 css 전 처기리 라고 한다.
CSS 가 동작하기 전에 사용하는 기능으로,
웹에서는 분명 CSS 가 동작하지만 우리는 CSS 의 불편함을 이런 확장 기능으로 상쇄할 수 있다.
sass 는 기초 언어에 힘과 우아함을 더해주는 CSS 의 확장이다.
설치 방법
설치하기에 앞서 node 를 설치했는지 확인하시길 바랍니다.
$ npm install -g node-sass문법
주석
/* 주석입니다. */중첩
Sass 는 중첩 기능을 사용할 수 있습니다.
상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있습니다.
Sass
.section {
width:100%;
.list {
padding:20px;
li {
margin:20px;
}
}
}css
.section {
width: 100%;
}
.section .list {
padding: 20px;
}
.section .list li {
margin:20px;
}상위 선택자 참조 (Ampersand)
중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환합니다.
sass
.btn {
position: absolute;
&.active {
color: white;
}
&:hover {
color: red;
}
}css
.btn {
position: absolute;
}
.btn.active {
color: white;
}
.btn:hover {
color: red;
}상위 선택자 참조를 응용하면 이렇게도 만들 수 있습니다.
HTML
<p class="fs fs-small">이 텍스트는 작은 글꼴입니다.</p>
<p class="fs fs-medium">이 텍스트는 중간 글꼴입니다.</p>
<p class="fs fs-large">이 텍스트는 큰 글꼴입니다.</p>css
.fs {
&-small { font-size: 12px; }
&-medium { font-size: 14px; }
&-large { font-size: 16px; }
}중첩된 속성
font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있습니다.
scss
.list {
font: {
size: 10px;
family: sans-serif;
}
margin: {
top:10px;
left:10px;
}
padding: {
top: 20px;
bottom: 30px;
}
}css
.list {
font-size: 10px;
font-family: sans-serif;
margin-top: 10px;
margin-left: 10px;
padding-top: 20px;
padding-bottom: 30px;
}변수
반복적으로 사용되는 값을 변수로 지정할 수 있습니다.
변수 이름 앞에는 항상 $ 를 붙입니다.
$변수이름 : 속성값;
변수는 유효범위({}) 가 있기 때문에 선언된 블록({}) 내에서만 유효범위를 가집니다.
scss
$w: 150px;
$h: 200px;
$white-color: white;
$url-images: "/img/people/"
// 변수 재할당 가능
$basic-color: $white-color;
.box {
width: $w;
height: $h;
color: $white-color;
background: url($url-images + "people1.jpg");
}css
.box {
width: 150px;
height: 200px;
color: white;
background: url('/img/people/people1.jpg')
}전역설정, 초깃값 설정
scss
.box {
$color: red; !global
$font-size: 24px; !default;
}
.box1 {
color: $color; // red;
font-size: $font-size; // 24px;
}
// $font-size: 29px;
.box2 {
font-size: $font-size; // 29px;
}가져오기(import)
@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다.
scss
// 하나만 가져오기
@import 'button'
// 두개 이상 가져오기
@import 'map', 'navbar'파일 분할
프로젝트 규모가 커지면 파일들을 header나 side-menu 같이 각 기능과 부분으로 나눠 유지보수가 쉽도록 관리하게 됩니다.
이 경우 파일이 점점 많아지는데, 모든 파일이 컴파일 시 각각의 ~.css 파일로 나눠서 저장된다면 관리나 성능 차원에서 문제가 될 수 있겠죠.
그래서 Sass는 Partials 기능을 지원합니다.
파일 이름 앞에 _를 붙여(_header.scss와 같이) @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않습니다.
# ...
├─scss
│ ├─header.scss
│ ├─side-menu.scss
│ └─main.scss
# ...// main.scss
@import "header", "side-menu";그리고 이 파일들을 css/디렉토리로 컴파일합니다.
(컴파일은 위에서 설명한 node-sass로 진행합니다.)
//`scss`디렉토리에 있는 파일들을 `css`디렉토리로 컴파일
$ node-sass scss --output css컴파일 후 확인하면 아래와 같이 scss/에 있던 파일들이 css/ 안에 각 하나씩의 파일로 컴파일됩니다.
# ...
├─css
│ ├─header.css
│ ├─side-menu.css
│ └─main.css
├─scss
│ ├─header.scss
│ ├─side-menu.scss
│ └─main.scss
# ...자, 이번에는 가져올 파일 이름에 _를 붙이겠습니다.
메인 파일인 main.scss에서는 _를 사용하지 않습니다.
Sass-App
# ...
├─scss
│ ├─_header.scss
│ ├─_side-menu.scss
│ └─main.scss
# ...// main.scss
@import "header", "side-menu";같은 방법으로 컴파일하면…
$ node-sass scss --output cssSass-App
# ...
├─css
│ └─main.css <- main + header + side-menu
├─scss
│ ├─header.scss
│ ├─side-menu.scss
│ └─main.scss
# ...연산자
Sass는 기본적인 연산 기능을 지원합니다.
레이아웃 작업시 상황에 맞게 크기를 계산을 하거나 정해진 값을 나눠서 작성할 경우 유용합니다.
재활용(Mixins)
Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능입니다.
약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다.
우선, Mixin은 두 가지만 기억하면 됩니다.
선언하기(@mixin)와 포함하기(@include) 입니다.
만들어서(선언), 사용(포함)하는 거죠!
@mixin
// SCSS
@mixin large-text {
font-size: 22px;
font-weight: bold;
font-family: sans-serif;
color: orange;
}@include
h1 {
@include large-text;
}
div {
@include large-text;
}인수(Arguments)
Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다.
하나의 Mixin으로 다양한 결과를 만들 수 있습니다.
scss
// 매개변수는 기본값을 가질 수 있으며, 매개변수 뒤에 ... 가 붙으면 입력할 인수의 개수가 불확실한 경우이다.
@mixin dash-line($width : 1px , $color, $bg-values...) {
border: $width dashed $color;
background:$bg-values
}
.box1 { @include dash-line(1px, red, url(...) no-repeat center/ cover); }
.box2 {
@include dash-line(4px, blue, url(...));
width: 150px;
...
}css
.box1 {
border: 1px dashed red;
}
.box2 {
border: 4px dashed blue;
}