CSS 전처리기는 CSS를 작성하기 위한 스크립팅 언어로, 확장된 기능과 간결한 문법을 제공합니다. Sass와 Less는 가장 대표적인 CSS 전처리기입니다. 이 강좌에서는 Sass와 Less의 기본 개념과 사용 방법에 대해 알아보겠습니다.
Sass (Syntactically Awesome Style Sheets)
Sass는 CSS의 확장이자 Ruby로 작성된 CSS 전처리기입니다. Sass에는 SCSS와 Sass 두 가지 문법이 있으며, SCSS 문법은 CSS와 거의 동일하므로 기존의 CSS를 쉽게 전환할 수 있습니다.
변수
변수를 사용하여 공통적으로 사용되는 값을 저장하고 재사용할 수 있습니다.
$primary-color: #f06;
body {
background-color: $primary-color;
}
중첩
선택자를 중첩하여 작성할 수 있어 가독성이 좋아집니다.
nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
}
믹스인
코드를 재사용하고자 할 때 사용하는 믹스인 기능입니다.
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
@include center;
}
조건문과 반복문
조건문(if, else)과 반복문(for, each, while)을 사용하여 동적인 스타일을 작성할 수 있습니다.
@for $i from 1 through 5 {
.col-#{$i} {
width: 100% / $i;
}
}
Less (Leaner Style Sheets)
Less는 자바스크립트로 작성된 CSS 전처리기로, Sass와 유사한 문법과 기능을 제공합니다. Less의 문법은 CSS와 호환되기 때문에 기존 CSS 코드를 그대로 사용할 수 있습니다.
변수
변수를 사용하여 공통적으로 사용되는 값을 저장하고 재사용할 수 있습니다.
@primary-color: #f06;
body {
background-color: @primary-color;
}
중첩
선택자를 중첩하여 작성할 수 있어 가독성이 좋아집니다.
nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
}
믹스인
코드를 재사용하고자 할 때 사용하는 믹스인 기능입니다.
.center() {
display: flex;
justify-content: center;
align-items: center;
}
.box {
.center();
}
조건문과 반복문
조건문(when)과 반복문(each)을 사용하여 동적인 스타일을작성할 수 있습니다.
조건문 예시:
.mixin (@a) when (@a > 10) {
font-size: 2em;
}
.mixin (@a) when (@a <= 10) {
font-size: 1em;
}
p {
.mixin(5);
}
반복문 예시:
.loop (@i) when (@i > 0) {
.col-@{i} {
width: (100% / @i);
}
.loop(@i - 1);
}
.loop(5);
이처럼 Sass와 Less는 CSS 전처리기로써 다양한 기능과 간결한 문법을 제공하며, 이를 통해 개발자들이 더 효율적으로 스타일을 작성할 수 있습니다. 전처리기를 사용하면, CSS 코드의 재사용성과 유지보수성이 높아집니다. 하지만 전처리기로 작성된 코드는 브라우저에서 직접 동작하지 않기 때문에, Sass나 Less를 사용하여 작성한 코드를 CSS로 컴파일해야 합니다. 이러한 컴파일 과정을 자동화하는 도구로 Gulp, Grunt 등이 사용되곤 합니다.
댓글