SCSS

SCSS

SCSS에 대해 알아보는 시간을 가지겠습니다.

---

01. 사용법

웹에서는 CSS에서만 동작합니다. CSS는 불편하니 일단 배제하고 우선 전처리기로 코딩합니다.
전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다.
단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일합니다.
전처리기로 작성하고 CSS로 컴파일해서 동작시키는겁니다.

---

02. 사용 이유

보통 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있습니다.
기본적으로 모두 비슷하지만 Less의 경우 기능적 한계가 있으나 진입 장벽이 낮습니다.
Stylus 같은 경우는 깔끔하고 좀 더 세련됐으며 기능도 훌륭합니다.
하지만 덜 유명하며 비교적 늦게 나왔기 때문에 사소한 버그가 보입니다.
Sass(SCSS)는 언급한 두 가지 전처리기의 장점을 모두 가집니다.
문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능합니다.
또한, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 많은 커뮤니티를 가지고있고 기능도 훌륭합니다.

---

03. 차이점

03-1 일반 CSS 문법

CSS와 SASS의 가장 큰 차이는 CSS 내에서 변수처리 유무가 가장 큰 차이점입니다.

{
    .box ul {
        width: 500px;
    }
    .box ul li {
        color: #000;
        background: url("./image.jpg");
    }
    .box ul li:last-child {
        margin-right: 10px;
    }
}

03-2 SASS 문법

브래킷이 없으니 오류에 주의해야합니다.

{
    .box ul {
        width: 500px
        li
        color: #000
        background: url("./image.jpg")
        &:last-child
        margin-right: 10px
    }
}

03-3 SCSS 문법

브래킷과 세미콜론의 추가로 기존 CSS와 호환성을 높이기 위해서 도입된 문법입니다.

{
    .box ul {
        width: 500px;
        li {
            color: #000;
            background: url("./image.jpg");
            &:last-child {
                margin-right: 10px;
            }
        }
    }
}