Sass(scss)를 마스터해보자 1

SCSS

SCSS = CSS를 위해 새롭게 나타남

평소에 웹공부를 하게 되면 SCSS, Sass라는 것들을 보게 된다.

나는 백엔드 Node.js와 프론트엔드 React.js를 배우면서 Sass를 약소하게나마 사용해보았는데, 어떻게 사용하는지에 대해서만 알지 제대로 알지는 못한다.

다만, 사용하면서 CSS처럼 스타일링 할 수 있는데, CSS보다 다양한 기능을 지원해주는 CSS의 Superset이라는 느낌은 강하게 받았다.

그래서 이번에 SCSS에 대한 지식을 끌어올리기 위해 Sass/SCSS를 파고들어서 공부를 해보려고 한다.

우선 SCSS와 Sass는 간단하게 예기하면

CSS의 처리를 편리하게 사용하게 도와주는 도구라고 보면 된다.

그리고 이후에 설명하지만 SCSS는 Sass의 상위 버전이다.

CSS Preprocessor

우리는 이를 CSS Preprocessor라고 부르는데, CSS 전처리기라는 말이다.

왜 전처리기일까?

곰곰히 생각해보면 답을 알 수 있는데, CSS가 브라우저에서 작동되기 전에 이 것들을 읽어서 처리를 하는 거라고 보면 된다.

그리고 Sass/SCSS 말고도 다른 CSS Preprocessor가 존재하는데

Sass/SCSS
postCSS
Less
Stylus

이렇게 있다. 하지만 가장 많이 쓰는건 Sass/SCSS.

Sass(SCSS)

Sass는 공식 문서에서 이렇게 표현하고 있다.

Sass는 기초언어의 힘과 우아함을 더해주는 CSS의 확장이다.

Sass는 단순하게 CSS를 확장시킨 것이라는 건데,

CSS의 부족한 부분과 결함을 보완하기 위해 확장판으로 나왔다고 보면 되겠다.

CSS보다 무엇이 좋은가

타 언어의 만들어진 계기, 발전과정과 똑같이 CSS도 사용되면서 여러 문제가 발생하였는데,

불필요한 선택자(Selector)의 과용
연산기능의 한계
구문(Statement)의 부재
가독성이 떨어지고 재사용성이 떨어짐

와 같은 문제들이 있었다.

당연히 이러한 문제를 해결하기 위해 생겨난 Sass/SCSS는 다음과 같은 기능을 제공한다

변수의 사용
조건문과 반복문
Import
Nesting
Mixin
Extend/Inheritance

Sass/SCSS는 다음과 같은 특징을 사용해서 CSS와 비교하여 더욱 구조화 된 Styling을 할 수 있으며,

이를 통해 가독성과 재사용성을 높이는 강력한 CSS의 Superset인 걸 알 수 있다.

어떻게 작동되는걸까

앞서 말했듯이 Sass/SCSS는 CSS 전처리기 이다. 그리고 또 하나 알아야 할 것이 브라우저는 Sass/SCSS를 읽지 못한다.

결국, Sass/SCSS를 CSS로 바꿔야 된다는 말이다. (여기서 최종적으로 CSS로 바뀌어야 되기 때문에 CSS Preprocessor라고 부르는 것)

그래서 우리는 우선 Sass/SCSS로 디자인 파일을 생성하고 이 파일을 CSS로 바꿔주면 된다.

이 바꿔주는 건 Compile작업을 통해 변환시킬 수 있다.

마치 우리 프로그래밍언어가 기계어로 컴파일 되는 과정과도 같다고 보면 된다.

SCSS_Compile

프로그래밍 언어 -> 기계어 -> 컴퓨터가 이해 할 수 있음
Sass/SCSS (CSS Preprocessor) -> CSS -> 브라우저가 이해 할 수 있음

컴파일은 우리가 잘 알고있는 Webpack 혹은 Parcel과 같은 웹 애플리케이션 번들러를 통해서 할 수 있다.

Sass와 SCSS의 차이는?

SCSS는 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장하였는데,

SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset)이다.

한마디로 SCSS는 Sass인데, Sass의 모든기능을 지원하면서 문법, 구문적으로 CSS와 더욱 비슷하다고 보면 된다.

더 자세한 비교를 하자면 (여기를 참조하였다.)

Sass:

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

SCSS:

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

딱 봐도 SCSS가 더 CSS 구문에 가깝다.