SCSS : 기본 문법 알아보기

SCSS의 기본 문법

SCSS는 CSS를 좀 더 편하게 작성하기 위한 언어입니다. CSS와 문법이 비슷하지만 분명한 차이점이 존재합니다. SCSS의 문법을 알아두었다가 활용해봅시다.

1. 변수

SCSS는 변수를 지정할 때, $를 사용합니다. 변수는 선언한 블록{} 안에서만 유효합니다.

$boolean: true;
$string: hello;
$color: red;
$number: 720;
$list: red, orange, yellow, green, blue;
$map: (
    l: light,
    d: dark,
);

---

2. 중첩

SCSS는 속성을 적용하는 부모 요소가 같을 때, 자식요소는 블록{} 바깥에 따로 작성하지 않고 블록{} 안에 중첩하여 작성할 수 있습니다.

/* SCSS */

.section {
    width: 100%;

    .list {
        padding: 20px;

        li {
            float: left;
        }
    }
}

/* Compile to CSS */

.section {
    width: 100%;
}

.section .list {
    padding: 20px;
}

.section .list li {
    float: left;
}

---

3. &

SCSS는 블록{} 안에서 중첩을 사용하여 작성할 때, &를 통해 상위요소를 선택할 수 있습니다.

/* SCSS */

.btn {
    position: absolute;

    &.active {
        color: red;

    }
}

.list {
    li {
        &:last-child {
            margin-right: 0;
        }
    }
}

/* Compile to CSS */

.btn {
    position: absolute;
}
.btn.active {
    color: red;
}
.list li:last-child {
    margin-right: 0;
}

4. 가상 클래스 선택자

SCSS는 가상 클래스 선택자를 CSS와 동일하게 사용 가능합니다.

:first-child
:last-child
:nth-child()

5. 연산자

SCSS는 연산자를 CSS와 동일하게 사용 가능합니다.

연산자	설명
+	더하기
-	빼기
*	곱하기. 하나 이상의 값이 반드시 숫자(Number)여야 함.
/	나누기. 오른쪽 값이 반드시 숫자(Number)여야 함.
%	나머지. 왼쪽 값을 오른쪽 값으로 나눈 나머지를 구합니다.