함수(Function)
SCSS는 함수를 직접 만들어서 사용할 수 있다.
-
@function <name(properties)> { @return <value> }문법을 이용해서 함수를 작성한다. -
믹스인과 동일하게
default parameter와spread operator,keyword arguments의 사용이 가능하다.
제어문
@if
조건문에 사용하는 규칙
-
@if <condition> { ... }문법을 이용해서 사용한다. -
condition에 괄호를 생략해도 된다. -
@else if와@else를 이용해서 추가적인 조건에 대한 처리가 가능하다.
@each
배열 혹은 객체 반복에 사용하는 규칙
-
리스트는
@each <variable> in <list> { ... }문법으로 사용한다. -
맵은
@each <key, value> in <map> { ... }문법으로 사용한다.
@for
변수를 이용한 반복에 사용하는 규칙
@for <variable> from <expression> through <expression>문법으로 사용한다.
scss
.list {
position: relative;
top: 0;
@for $num from 1 through 3 {
.item:nth-child(#{$num}) {
width: 100px * ($num);
}
}
}css
.list {
position: relative;
top: 0;
}
.list .item:nth-child(1) {
width: 100px;
}
.list .item:nth-child(2) {
width: 200px;
}
.list .item:nth-child(3) {
width: 300px;
}- 위 예제에서
through를to로 바꾸면 해당하는 값 미만까지 반복된다.
@while
해당 조건을 만족하는 동안 반복하는 규칙
@while (condition) { ... }문법으로 사용한다.
모듈(Module)
@import
만들어진 모듈을 가져올 때 사용하는 규칙
-
@import <modulepath>;문법으로 사용한다. -
모듈 이름 앞에
_(Underscore)를 붙이면, 별도의 CSS 파일로compile하지 않는다. -
.css확장자를 붙이거나,url주소를 사용하거나,url()함수를 사용하면compile된 결과물에@import도 포함된다.
@use
모듈을 불러와 Namespace를 부여하는 규칙
-
@use <modulepath> [as <modulename>]문법으로 사용한다. -
as를 이용해 명시적으로namespace를 지정하지 않으면, 모듈 이름을 그대로 사용한다.
@forward
외부에 있는 다른 모듈에게 모듈을 전달하기 위한 규칙
-
@forward <modulepath> [as <variable>*]문법으로 사용한다. -
as로namespace를 정의해서 전달했다면,$namespace<variable>형태로 작성해야 한다.
전역 함수(Global Functions)
별도의 import 없이도 사용할 수 있는 함수
hsl()
색상, 채도, 명도를 이용해 색을 만들어내는 함수
-
hsl($hue, $saturation, $lightness)로 사용한다. -
hsla()는 뒤에alpha값이 붙어서 불투명도를 정의할 수 있다.
if()
삼항 연산자를 사용할 수 있는 함수
if(condition, if-true, if-false)형태로 사용한다.
rgb()
red, green, blue 삼색을 이용해 색을 만들어내는 함수
-
rgb(red, green, blue)로 사용한다. -
hsla()와 마찬가지로 뒤에alpha값을 붙여서rgba()로 불투명도를 정의할 수 있다.
lighten()
색상을 어둡게 할 때 사용한다.
-
lighten(color, amount)에서amount로 밝기를 조절한다. -
반대 개념으로
darken(color, amount)이 있다.
saturate()
색상의 채도를 높일 때 사용한다.
-
saturate(color, amount)에서amount로 채도를 조절한다. -
반대 개념으로
desaturate(color, amount)가 있다.
grayscale()
색상을 흑백처리할 때 사용한다.
grayscale(color)로 사용한다.
invert()
색상을 반전시킬 때 사용한다.
invert(color)로 사용한다.
내장 모듈(Built-in Modules)
@use "sass:<module>";문법으로 내장 모듈을 불러올 수 있다.
color
adjust($color, $lightness, $saturation)
-
$lightness에 음수와 양수를 이용해서 밝기를 조절할 수 있다. -
$saturation에 음수와 양수를 이용해서 채도를 조절할 수 있다.
grayscale($color)
- 색상을 흑백처리할 때 사용한다.
invert($color)
- 색상을 반전할 때 사용한다.
list
append($list, newItem)
list에 가장 마지막에 새로운 요소를 추가하는 함수.
index($list, $data)
-
list item의index를 가져올 수 있는 함수. -
index는 1부터 시작한다.
join($list1, $list2)
- 인수로 들어온
list들을 합쳐서 새로운list를 반환한다.
length($list)
list의 길이를 반환한다.
nth($list, index)
- 해당
index에 속하는item을 가져온다.
map
get($map, key)
key에 해당하는value를 가져올 때 사용하는 함수
has-key($map, key)
map에 해당key가 존재하는지 함수.boolean데이터를 반환한다.
keys($map)
map의key list를 반환하는 함수.
values($map)
map의value list를 반환하는 함수.
merge($map1, $map2)
-
map을 병합하여 새로운map을 반환하는 함수. -
중복되는
key가 있는 경우,$map2의 값이 우선한다.
remove($map, key)
key에 해당하는 데이터를 제거한 새로운map을 반환한다.
math
is-unitless($value)
-
$value에 단위가 있는지 확인하는 함수. -
단위가 없다면
true, 있다면false를 반환한다.
compatible($value1, $value2)
-
두 값이 연산이 가능한지 확인하는 함수.
-
연산이 가능하다면
true, 아니라면false를 반환한다.
더 많은 내용은 Sass: math를 참고하자.
meta
call($callback, value)
-
callback함수를 실행할 때 사용하는 함수. -
value가callback의 인수가 된다.
type-of($value)
value의type을 반환하는 함수.
string
Sass: string을 참고하자.
