주석
- /* */
// scss → css 로 변환할때 나타나지 않음
중첩
상위(부모) 선택자 참조
중첩된 속성
.box {
font: {
weight: bold;
size: 10px;
family: sans-serif;
};
변수
- 달러사인 $
ex) $size: 100px;
선언된 범위에서 유효범위를 가짐
산술 연산
- ( )안에 기재하기
- $ 변수에 기재하기
- 다른 연산자와 같이 기재하기
- 단위를 같게 사용하기, 단 calc 함수를 사용하면 다르게 사용 가능함
재활용
반복문
- @for $i(ndex) from 1 through 10
보간 처리 #{ $i}
함수
- @function (일반적인 값을 어떻게 처리해야할지에 대한내용 명시)
@return
색상 내장 함수
- mix
lighten
darken
saturate
desaturate
grayscale
invert
rgba
가져오기
- @import "./sub", "./sub2";
데이터 종류
- $ number
$ string
$ color
$ boolean
$ null
$ list
$ map
반복문
- list 데이터 반복적으로 처리하기
@each $c in $list { }
- map 데이터 반복적으로 처리하기
@each $key, $value in $map { }
재활용
- @mixin 상황에 맞게 추가적인 내용 삽입 가능
@content