CSS 전처리기로서 CSS의 한계나 단점을 보완하기 위해 만들어졌습니다.
SASS 에 SCSS가 포함되어 있는데, SCSS는 SASS 3번째 버전에서 추가되었고,
SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌습니다.
$
표시를 사용하여 변수명을 지정할 수 있습니다.$hongsi-1: 1;
$HONGSI_2 : 2;
$hongsi: 'hongsi';
반복적으로 사용되는 폰트나 색상 등을 변수로 지정해 간단하게 제어할 수 있습니다.
규칙
body {
background-color: $bg;
}
.box {
margin-top: 50px;
&:hover {
background-color: green;
}
h2 {
color: red;
}
button {
color: yellowgreen;
}
}
&
를 사용하여 부모 참조 선택자를 사용할 수 있습니다.@mixin
으로 재사용할 스타일을 정의하고 필요한 부분에서 @include
를 통해 불러옵니다.@mixin title {
color: blue;
font-size: 30px;
margin-bottom: 12px;
}
-----------------------------
@import '_mixin.scss';
body {
background-color: $bg;
}
h1 {
@include title();
}
@if
, @else
를 사용하여 조건에 따라 CSS를 반환 합니다.@for
through
와 to
를 사용하여 반복문을 만들 수 있습니다.@while
을 사용하여 조건이 거짓이 될 때까지 내용을 반복할 수 있습니다.//기본 @if 지시문
@if(조건식) {
//조건이 참일 때 표현식
}
//@if @else문
@if(조건식) {
//조건이 참일 때 표현식
} @else {
//조건이 거짓일 때 표현식
}
//다중 @if문
@if(조건식1) {
조건식1이 참일 때 표현식
} @else if(조건식2) {
//조건식2가 참일 때 표현식
} @else {
//조건식이 모두 거짓일 때 표현식
}
// through - 시작부터 종료조건까지 반복
@for $변수 from 시작 through 종료 {
// 반복내용
};
// to - 시작부터 종료조건 직전까지 반복
@for $변수 from 시작 to 종료 {
//반복내용
};
@while 조건 {
//반복 내용
}