Sass는 Syntatically Awesome Style Sheets 의 약어로, 해석하면 "문법적으로 간지나는 스타일 시트" 정도가 된다.
SCSS는 Sass의 상위 호환이라고 보면 되는데, Sass 출시 이후에 문제점을 더 보완해서 나온 언어이다.
(Sassy CSS : 개쩌는 CSS)
그래서 얘네가 하는 역할이 뭐냐
얘네는 CSS Preprocessor, 즉, CSS 전처리기이다. CSS를 더 편하게 만들 수 있도록 도와주는 컴파일 언어인것이다.
Sass(SCSS) 언어로 스타일시트를 작성하여 컴파일하면 CSS 파일이 생성된다.
/*SCSS*/
div{
width : 100%;
height : 500px;
ul{
padding : 10px;
li{
width : 100px;
height : 100px;
&.long{
width : 200px;
}
}
}
}
Sass(SCSS)로 이렇게 작성하여 컴파일 하면,
/*CSS*/
div{
width : 100%;
height : 500px;
}
div ul{
padding : 10px;
}
div ul li{
width : 100px;
height : 100px;
}
div ul li.long{
width : 200px;
}
이렇게 위와 같이 CSS파일이 생성된다.
Sass(SCSS)를 컴파일하지 않고 그대로 브라우저에 넣어봤자 읽지 못하니 컴파일 과정이 꼭 필요하다.
필자는 SCSS를 사용하므로 본문에서는 SCSS를 기준으로 설명하겠다.
시작하기
IDE로는 VS Code를 사용한다 가정하고, SCSS를 컴파일 해줄 extension만 설치해주면 된다.
(npm같은거 안씀. scss파일은 그냥 확장자만 .scss로 저장해주면 만들어짐)
얘를 마켓플레이스에서 찾아서 설치해주자.
SCSS를 작성하고 저장만 누르면 얘가 알아서 컴파일해서 같은 위치에 CSS 파일로 만들어준다.
얘를 설치하고 VS Code 우측 하단에 보면
이렇게 생긴 눈깔이 있을 것이다.
저 눈깔을 눌러주면 잠시 Working on it... 이라는 문구가 나오면서 로딩이 걸리다가
터미널이 켜지며 Watching... 문구로 바뀐다.
이 상태에서 SCSS 파일을 작성하고 저장하면 SCSS파일이 있는 위치에 자동으로 컴파일된 CSS파일이 생성된다.
만약 저장위치를 바꾸고 싶다면 확장 설정에서 setting.json을 열어 바꿔주자.
그럼 SCSS를 시작하기 위한 준비는 다 되었으니, SCSS의 특징을 한 번 알아보도록 하자!
문법
일단 위에서 보다시피 CSS와 SCSS의 가장 눈에 띄는 차이점은 들여쓰기이다.
ul{
li{
width : 100px;
}
}
자바스크립트의 객체처럼 중괄호로 하위 DOM요소들을 표현할 수 있다.
중복되는 상위요소를 계속 작성할 필요가 없이, 중괄호 아래에 해당 요소를 넣기만 하면 되서, 생산성이 빨라진다.
그럼 클래스 선택할때나 :hover 같은거는 어떻게 표현하지?
div{
&.box{
color : #ff0000;
}
&:hover{
background-color : #ff0000;
}
}
바로바로 & 이 문자를 앞에 붙여주면 된다. &는 상위 요소 선택자이다. 위 코드를 컴파일 해보면
div.box {
color: #ff0000;
}
div:hover {
background-color: #ff0000;
}
이렇게 나온다.
이게 진짜 개편하다. SCSS에서 & 쓰면서 네스팅하다가 CSS 하드코딩하려고 하면....후......
변수 사용
SCSS에서는 변수를 사용할 수 있다.
기존 CSS 에서도 var()를 이용하여 변수를 설정할 수 있는데 보통 이렇게 사용했을 것이다.
:root{
red : #ff0000;
}
div{
background-color : var(red);
}
SCSS에서는 변수명 앞에 $를 붙여서 간편하게 사용할 수 있다.
$red : #ff0000;
div{
background-color : $red;
}
참고로 SCSS의 변수는 자바스크립트의 변수 처럼 블록스코프의 영향을 받는다.
div{
$test: #ff0000;
span{
color: $test; /* #ff0000 */
}
}
span{
color: $test; /* 컴파일 에러 남 */
}
다른 블록스코프에서 선언한 변수에는 접근이 불가능하다.
이러한 변수들을 활용하여 쓸 수 있는 함수들이 있는데 아래에서 확인해보자.
각종 함수
SCSS에는 여러가지 함수들이 내장되어 있다.
색상 관련 함수부터, 문자, 숫자, 심지어 데이터 까지...
나도 함수들을 다 사용해본건 아니지만 자주 사용하는 함수들을 한번 알아보자.
색상관련 함수
색상관련 함수는 보통 CSS의 filter 기능과 비슷하다.
mix($color1, $color2)
- 두 개의 색을 섞는다.
div{
color : mix(#ff0000, #00ff00);
/*color : #800080*/
}
lighten($color, $amount)
- 더 밝은색을 만든다.
div{
color: lighten(#5584ff, 10%);
/*color: #88a9ff*/
}
darken($color, $amount)
- 더 어두운색을 만든다.
div{
color: darken(#5584ff, 10%);
/*color: #225fff*/
}
transparentize($color, $amount) 혹은 fade-out($color, $amount)
- $color 색상을 $amount 만큼 더 투명하게 만든다.
$red : #ff0000;
div{
color : transparentize($red, .3);
/*굳이 색상에 변수 안넣어도 된다. #ff0000 을 직접 넣어도 됨.*/
}
/*색상을 30%만큼 더 투명하게 만든다.*/
opacify($color, $amount) 혹은 fade-in($color, $amount)
- $color 색상을 $amount 만큼 불투명하게 만든다.
$red : rgba(255,0,0,.5);
div{
color : opacify($red, .5);
}
/* $red를 50%만큼 더 불투명하게 만든다. */
이외에도 여러 색상관련 함수가 있으니 직접 사용해보자.
saturate($color, $amount) : 색상의 채도를 올린다.
desaturate($color, $amount) : 색상의 채도를 낮춘다.
grayscale($color) : 색상을 회색으로 변환한다.
invert($color) : 색상을 반전시킨다.
rgba($color, $alpha) : 색상의 투명도를 변경한다.
문자 함수
문자 함수는 자바스크립트의 문자열 관련 함수와 비슷하다.
문자나 숫자함수는 개인적으로는 쓸 일이 잘 없는 함수들이다... for문 같은 반복문을 자주 사용하고 SCSS의 연산기능을 잘 활용하는 사람이면 유용하게 사용할지도?
unquote($string)
- 문자에서 따옴표를 제거한다.
$test : "#ff0000";
$test2 : unquote($test);
div{
color: $test; /* color: "#ff0000" */
color: $test2; /* color : #ff0000 */
}
quote($string)
- 문자에 따옴표를 추가한다.
$test : quote(nothing); /* "nothing" */
str-insert($string, $insert, $index)
- 문자의 index번째에 특정 문자를 삽입한다.
$test : str-insert("nothing", "--", 3); /* "no--thing" */
str-index($string, $substring)
문자에서 특정 문자의 첫 index를 반환한다.
$test : str-index("nothing", "thing"); /* 3 */
str-slice($string, $start-at, [$end-at])
문자에서 특정 문자(몇 번째 글자부터 몇 번째 글자까지)를 추출한다.
$test : str-slice("nothing", 1, 3); /* "not" */
to-upper-case($string)
문자를 대문자를 변환한다.
$test : to-upper-case("nothing"); /* "NOTHING" */
to-lower-case($string)
문자를 소문자로 변환한다.
$test : to-lower-case("NOTHING"); /* "nothing" */
숫자 함수
percentage($number)
- 숫자를 백분율로 변환한다.
$test : percentage(.1); /* 10% */
round($number)
- 정수로 반올림한다.
$test : round(1.4); /* 1 */
$test2 : round(1.7); /* 2 */
ceil($number)
- 정수로 올림한다.
$test : ceil(1.4); /* 2 */
floor($number)
- 정수로 내림(버림)한다.
$test : floor(1.7); /* 1 */
abs($number)
- 숫자의 절대 값을 반환한다.
$test : abs(-56); /* 56 */
min($numbers…)
- 숫자 중 최소 값을 찾는다.
$test : min(10, 25, 4, -2); /* -2 */
max($numbers…)
- 숫자 중 최대 값을 찾는다.
$test : max(10, 25, 4, -2); /* 25 */
random()
- 0 부터 1 사이의 난수를 반환한다.
$test : random(); /* 0.1118620687 */
List 함수
SCSS에는 list 라는것이 존재한다. 배열 비스무리 한거다.
리스트 요소들의 구분은 콤마 혹은 스페이스로 구분해주면 된다. ($list : 가, 나, 다 혹은 $list : 가 나 다 이런식으로...)
참고로 리스트를 변경하는 함수들은 원본을 변경하는 것이 아닌, 새로운 리스트를 만드는것이다.
length($list)
- 리스트의 갯수를 반환한다.
$list : 123, 456, 789;
div{
content : length($list); /* 3 */
}
nth($list, $n)
- List에서 n번째 값을 반환한다.
$list : 123, 456, 789;
div{
content : nth($list, 2); /* 456 */
}
set-nth($list, $n, $value)
- List에서 n번째 값을 다른 값으로 변경한다.
$list : 123, 456, 789;
div{
content : set-nth($list, 2, 1357); /* 123, 1357, 789 */
}
join($list1, $list2, [$separator])
- 두 개의 List를 하나로 결합한다.
$list : 123, 456, 789;
$list2 : abc, def, ghi;
div{
content : join($list, $list2); /* 123, 1357, 789, abc, def, ghi */
}
zip($lists…)
- 여러 List들을 하나의 다차원 List로 결합한다.
$list : 123, 456, 789, 0123;
$list2 : abc, def, ghi;
$list3 : 가, 나, 다, 라, 마;
div{
content : zip($list, $list2, $list3); /* 123 abc 가, 456 def 나, 789 ghi 다 */
}각 리스트의 요소들을 순서에 맞게 결합하여 하나의 요소로 만든다.
만약 리스트들의 요소 갯수가 서로 다를 경우에는, 짝이 맞을때까지만 결합하고 나머지는 버린다.
index($list, $value)
- List에서 특정 값의 index를 반환한다.
$list : 123, 456, 789, 0123;
div{
content : index($list, 456); /* 2 */
}
Map 함수
SCSS에는 Map도 있다. Map은 자바스크립트의 객체와 비슷하다.
key: value 형식으로 이루어진 데이터다.
map-get($map, $key)
- Map에서 key에 해당하는 값을 가져온다.
$test: (
"lightest": 100,
"light": 300,
"medium": 500,
"bold": 700
);
div{
font-weight: map-get($weight, "light"); /* 300 */
}
map-merge($map1, $map2)
- 두 개의 Map을 병합하여 새로운 Map를 만든다.
$test: (
"lightest": 100,
"light": 300,
"medium": 500,
"bold": 700
);
$test2: (
"red": #ff0000,
"blue": #0000ff,
"green": #00ff00
);
$mergedList : map-merge($test, $test2);
div{
font-weight: map-get($mergedList, "light"); /* 300 */
color: map-get($mergedList, "blue"); /* #0000ff */
}
map-keys($map)
- Map에서 모든 key를 List로 반환한다.
$test: (
"lightest": 100,
"light": 300,
"medium": 500,
"bold": 700
);
$keys : map-keys($test);
div{
content: $keys; /* content: "lightest", "light", "medium", "bold" */
}
map-values($map)
- Map에서 모든 value를 List로 반환한다.
$test: (
"lightest": 100,
"light": 300,
"medium": 500,
"bold": 700
);
$values : map-values($test);
div{
content: $values; /* content: 100, 300, 500, 700 */
}
추가적으로 사용할만한 함수들
unit($number)
- 숫자의 단위를 반환한다.
unit(250px); /* "px" */
unitless($number)
- 숫자에 단위가 있는지 여부를 불리언으로 반환한다. 단위가 있으면 false, 없으면 true
unitless(250px); /* false */
unitless(250); /* true */
variable-exist(name)
- 현재 접근가능한 범위안에 변수가 있는지 여부를 반환한다. 얘는 인수로 변수를 넣을때, 변수명 앞에 $를 넣으면 안된다.
$test: "test";
span{
$test2: "test2";
}
div{
content: variable-exists(test); /* true */
content: variable-exists(test2); /* false */
}
작성하다보니 글이 꽤 길어졌는데, 아직 설명하지 못한게 좀 남아있다.
믹스인(mixin)이나 확장(extend)과 상속(inheritance), 연산자 등...
나머지는 2편에서 마저 설명하도록 하겠다.
'개발 > CSS, SCSS' 카테고리의 다른 글
| SCSS(Sass 상위 호환) 사용하기 2편 (2) | 2022.09.14 |
|---|