SCSS란 무엇일까?

SCSS란 CSS를 위한 전처리언어 입니다.
CSS는 웹사이트가 커질수록 코드가 복잡해지고, 유지하기가 더 어려워지게 되는데 이 문제를 해결해 줄 수 있는 것이 SCSS입니다.

SCSS를 사용하면 변수, 연산자, 상속, 믹스인, 네스팅 등을 사용해 코드를 효율적으로 관리하고, 작성할 수 있게 도와줍니다.

예를 들어 CSS에서는 아래와 같이 코드를 작성해야했다면,

.items .main-item > a { }
.items .main-item > a:after { }
.items .main-item .sub-items { }
.items .main-item .sub-items a { }

SCSS에서는 이렇게 작성할 수 있습니다. 이걸 네스팅이라고 합니다.

.items {
  .main-item {
    > a:after {}
    .sub-items {
      a {}
    }
  }
}

예시로 보여드린 코드에서는 큰 차이점이 없어 보이지만 CSS에서 중복적으로 작성해야됬던 클래스 선택자를 SCSS에서는 네스팅을 통해 한 번만 작성하면 됩니다.

또한 변수, 믹스인 등을 사용하면 중복되는 속성, 코드들을 한 번만 작성하고, 나중에 재사용할 수 있습니다.

이 글에서는 SCSS의 기능을 모두 설명하진 않고 다음 포스트에서 각 기능들을 하나씩 설명하도록 하겠습니다.

웹브라우저는 SCSS를 이해할 수 없습니다. 웹브라우저는 CSS만 이해할 수 있습니다.

그렇기 때문에 우리는 SCSS코드를 작성한 뒤 컴파일을 통해 CSS로 변환하는 작업을 거쳐야 합니다.

SCSS컴파일러를 컴퓨터에 설치할 수도 있습니다. 컴퓨터에 직접 설치하고 싶으시다면 여기를 방문하시면 됩니다.

VS Code를 사용하고 계시다면 VSCode의 Extension 에서 Glenn Marks - Live Sass Compiler를 설치하시면 됩니다.