SCSS는 SASS의 슈퍼셋으로 CSS를 좀 더 편하고 효율적으로 쓸 수 있게 해주는 CSS 전처리기입니다.
변수, 중첩, 반복문, 함수 등을 제공해줍니다.
✨ SCSS를 브라우저 내에서 사용하려면 CSS로 변환하는 컴파일 작업을 거쳐야합니다.
중첩을 사용하면 상위 선택자의 반복을 피해 편리하게 스타일링을 작성할 수 있습니다.
.container {
div {
span {
}
}
}
& 기호를 사용하면 상위 선택자를 참조할 수 있습니다.
.btn {
&:hover {
}
}
CSS의 공통된 네임스페이스 속성을 중첩하는 속성입니다.
div {
font: {
family: sans-serif;
size: 16px;
weight: 700;
};
}
반복적으로 사용되는 수치나 색상을 변수에 담아서 사용할 수 있습니다.
$을 사용해 변수를 선언합니다.
변수는 재할당이 가능합니다.
✨ 변수는 유효 범위가 있습니다.
$white: #fff;
$size: 16px;
기본적인 수학 산술 연산자를 사용할 수 있습니다. (+, -, *, /, %)
✨ 나누기의 경우 ()로 감싸거나, 변수로 지정해서 나눠 줍니다.
/ 는 단축속성을 나타내기 때문.
mixin을 활용하면 여러 코드를 재활용할 수 있습니다.
@mixin을 사용해 코드를 재활용합니다. 재활용한 코드를 사용하기 위해서는 @include를 사용합니다.
mixin은 인수를 받습니다. 자바스크립트에서 함수와 비슷합니다.
@mixin 이름(매개변수: 기본값) {}
@mixin center {
display: flex;
align-items: center;
justify-content: center;
}
.container {
@include center;
}
자바스크립트의 반복문과 같이 SCSS에서도 반복문을 사용할 수 있습니다.
#{}을 사용하면 보간이 가능 합니다.
✨ 제로베이스 x
// 기본 문법
@for $i from 1 through 10 {}
자바스크립트의 함수와 유사한 함수를 사용할 수 있습니다.
// 기본 문법
@function size($width, $height) {
@return $width * $height
}
SCSS 내부에서 이미 구현된 함수로 별도의 선언 없이 사용할 수 있습니다.
@import를 이용해 다른 SCSS 파일들을 가져올 수 있습니다.
mixin에 내용을 추가할 때 사용합니다.
@mixin box {
width: 100px;
height: 100px;
@content
}
div {
@include box {
padding: 16px;
}
}