Sass (Syntactically Awesome StyleSheets)

Sass의 수요가 높아지고, 많이들 사용하는 추세라 배워보고 싶었는데 생각보다 공부하고 프로젝트에 적용시키기가 어려웠습니다.

프로젝트를 진행하는 경우에 Sass를 사용해 보고 싶었지만, 빌드된 CSS파일 관리를 어떻게 해야할지 몰라 결국 익숙한 styled-components로 사용하기도 했습니다.

예전에 웹 공부를 시작할때 기초 강의로 도움을 받았던 유노코딩님의 Sass 강의가 열려 재밌게 공부하고 정리한 내용입니다.

📄 Sass란 무엇인가?

Sass는 css를 효율적으로 작성하기 위한 CSS 전처리기 언어입니다.
전처리기는 ‘전에 처리한다’라고 이해하면 쉽습니다.
css가 되기 전에 Sass구문으로 작성해 처리하기 때문입니다.
css는 코드가 커질수록 유지보수가 복잡해집니다.
Sass는 이를 보완하기 위해 등장하였으며, 코드를 수정하거나 재사용하기에도 굉장히 편리합니다.

정리하자면 CSS를 읽기도 좋고 쓰기에도 좋게 사용하기 위해 만들어진 CSS 전처리기 언어입니다.

▪ Sass 동작 방식

Sass의 동작 방식은 다음과 같습니다.

1. Sass 구문에 맞게 코드를 작성한다.
2. Sass 전처리기에 의해 CSS 코드로 변환(컴파일)된다.
3. 변환을 마치고, CSS 파일이 생성된다.(빌드)

▪ SCSS 이란?

SCSS는 Sass의 하위 개념입니다.
Sass 구문과 동일한 기능을 제공하는데 사용하기 좋아 SCSS구문의 수요가 더 높은 편입니다.

👾 scss로 작성한 코드

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

👾 sass로 작성한 코드

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body
  font: 100% $font-stack;
  color: $primary-color;

Sass로 작성하나 SCSS로 작성하나 결과는 같지만 SCSS구문이 더 가독성있고 친숙한 느낌을 줍니다.

// 결과

body {
  font: 100% $font-stack;
  color: $primary-color;
}

📄 Sass 준비하기

▪ Live Sass Compiler 설치하기

scss 코드의 변경 사항을 자동으로 감지해 저장할 때마다 새롭게 빌드를 진행하게 해주는 vscode extension입니다.

SCSS파일을 생성 후 vscode 하단에 있는 Live Sass Compiler 버튼을 클릭하면 실행됩니다.

▪ 명령행 인터페이스 사용하기

명령행은 명령 프롬프트나 터미널을 뜻합니다.
명령행에서 명령어를 입력해 Sass 컴파일을 진행할 수 있습니다.
node.js가 설치되어 있어야 합니다..

✔ Sass 명령행 인터페이스 설치하기

npm install -g sass

// 설치 확인하기
sass --version

✔ Sass파일을 css파일로 컴파일하기

아래와 같이 컴파일을 진행하면 style폴더에 main.css 파일이 생성되어 컴파일됩니다.

sass style/main.scss:style/main.css // style/main.scss를 style/main.css로 컴파일한다.

// live Sass Compiler처럼 자동으로 변경사항 감지하는 옵션 추가
sass --watch  style/main.scss:style/main.css

css에서 기존 중괄호와 들여쓰기가 포함된 css스타일을 extend 스타일이라고 부릅니다.
extend 스타일은 가독성엔 좋지만 직접 css를 다루지 않는 경우엔 가독성이 필요가 없으니 파일이 큰 경우 용량에 부담이 됩니다.
compressed옵션은 그러한 단점을 보완해 코드를 공백없이 압축해 줍니다.

sass --style compressed style/main.scss:style/main.css

✔ extend 스타일

h1 {
  color: black;
  background-color: yellow;
}

✔ compressed 스타일

h1 {color: #fff;background-color: #ff0;}

📄 주석과 중첩(nestring)

▪ 주석

주석 1: 여러 줄 짜리 주석

/* 여러 줄 짜리 주석*/

주석 2: 한 줄 짜리 주석

// 한 줄 짜리 주석

Scss에서 주석을 사용하는 방법은 두가지 입니다.
한 줄 짜리 주석은 컴파일된 css파일에 반영되지 않지만, 기존 css 주석은 최종 css 파일에도 반영된다는 차이점을 가지고 있습니다.

▪ 중첩 규칙 (nesting)

css를 작성하는 경우 선택자를 서로 다른 선언문에서 반복해야 하는 경우가 있습니다.
Sass에서는 선택자를 반복하지 않고 중첩해 사용할 수 있습니다.

div {
  width: 100px;
  height: 100px;

  p {
    color: red;

    span {
      color: blue;
    }
  }
}

컴파일 후 결과 파일에는 선택자가 따로 생성되어 반영된다.

div {
  width: 100px;
  height: 100px;
}
div p {
  color: red;
}
div p span {
  color: blue;
}

---

✔ 단축 속성 중첩

Sass의 단축 속성 중첩은 ‘네입스페이스 속성 중첩’이라고도 부릅니다.

아래 코드는 font의 속성들을 중첩으로 정의한 예시입니다.

p {
  font: {
    family: sans-serif;
    size: 1rem;
    style: normal;
    weight: 900;
  }
}

---

✔ 상위 선택자 참조 (&)

기호 &사용하면 중첩된 선언문안에서 상위 선택자를 참조할 수 있습니다.
의사클래스를 선택하고자 할 때 유용합니다.

.first-btn {
  &:hover {
    background: {
      color: red;
    }
  }
}

📄 변수

Sass에서는 $를 사용해 변수를 만들어 데이터를 저장하고 사용할 수 있습니다.
생성된 변수는 최종 CSS파일에서 표시되지 않습니다.

$main-color: orange;
$font-color: white;

button {
  &:nth-child(1) {
    color: $font-color;
    background-color: $main-color;
    width: 100px;
  }
  &:nth-child(2) {
    color: $font-color;
    background-color: $main-color;
    width: 200px;
  }
  &:nth-child(3) {
    color: $font-color;
    background-color: $main-color;
    width: 300px;
  }
}

▪ SCSS 변수 사용 규칙

1. 개수 제한은 없지만, 가독성을 해치니 남용하지 않는다.
2. 변수명에는 영문자, 숫자, -, _를 사용하며 가능한 직관적인 이름을 사용한다.

📄 믹스인 (mixin)

믹스인은 사이트 전체에서 재사용할 스타일 그룹을 정의하기 위해 사용하는 문법입니다.

▪ 믹스인 정의하기

믹스인을 정의할 때 인자를 함께 정의하면, 믹스인 호출 시에 상황에 따라 값을 다르게 주어 사용할 수 있습니다.
인자를 정의할 때 기본값은 옵션으로 설정합니다.
정의된 믹스인은 최종 CSS파일에 포함되지 않습니다.

@mixin box-style($bg-color: yellow, $font-color: green) {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $bg-color;
  color: $font-color;
}

▪ 믹스인 사용하기

정의된 믹스인을 사용하고자 할땐 @include지시어를 사용합니다.

.one {
  @include box-style();
}

.two {
  @include box-style(purple, yellow);
}

📄 @content

@content는 믹스인의 인자로 단순한 변수가 아닌 스타일 블록 전체를 넘길 때 사용하는 문법입니다.
인자와 스타일 블록을 모두 전달받는 형태의 믹스인을 정의할 수도 있습니다.

@mixin btn-style($hv-color) {
  @content;
  width: 100px;
  height: 25px;

  &:hover {
    background-color: $hv-color;
  }
}

.one {
  @include btn-style(orange) {
    color: white;
    background-color: tomato;
  }
}

.two {
  @include btn-style(green) {
    color: red;
    background-color: teal;
  }
}

📄 여러개의 .scss파일을 하나의 .css파일로 관리하기

여러개의 .scss파일이 우후죽순 생겨날 때 이를 관리하는 방법이 있습니다.
모든 scss파일을 하나의 css파일로 보내버리는 것이 아니라,
하나의 main.scss파일에서 각 기능을 담당하는 scss파일을 @import해서 사용하는 방법입니다.

이때 주의해야할 점은 mains.scss파일이 아닌 scss파일의 이름은 언더바로 시작해야 컴파일 대상에서 제외된다는 사실입니다.</br> @import지시자를 사용할 때는 언더바를 제거하고 사용합니다.

//main.scss

@import "variables.scss";
@import "mixins.scss";

div {
  @include box($main-color);
}

이렇게 CSS파일을 하나로 만들게 된다면

• HTML과 CSS 문서 간 연결 횟수가 줄어 웹사이트 성능 개선에 도움이 되고
• scss파일을 기능별로 분리할 수 있어 보기도 좋고 재사용하기도 좋습니다.

📄 스타일 중복을 피하는 방법 @extend

@extend지시자는 기존의 스타일을 확장해서 다른 클래스에서 쓰고 싶을 때 사용합니다.

.message {
  padding: 8px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #5f0;
}

.bad-message {
  @extend .message;
  background: #f05;
}

mixin과 비슷하지만, 저는 mixin은 규격을 설정하는 것이고 extend는 확장을 위해 사용하는 것이라고 이해했습니다.

실제로 컴파일된 결과도 mixin과 다릅니다.

.message,
.bad-message {
  padding: 8px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #5f0;
}

.bad-message {
  background: #f05;
}

@exclue를 사용해 컴파일된 결과를 보면 속성들을 사용하고 있는 클래스 네임이 쉼표와 함께 열거되고 있는 것을 확인할 수 있습니다.

유령 클래스(공식 명칭은 아닙니다.)를 사용해 컴파일 되었을 때 기존 클래스는 노출되지 않으면서 재사용한 클래스만 보여주는 방법도 있습니다.
유령 클래스는 %기호를 사용합니다.

%message {
  padding: 8px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #5f0;
}

.bad-message {
  @extend %message;
  background: #f05;
}

컴파일 된 결과를 확인하면 유령클래스의 이름은 노출되지 않고 있는 것을 확인할 수 있습니다.

.bad-message {
  padding: 8px;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: #5f0;
}

.bad-message {
  background: #f05;
}

📄 조건문을 사용해 코드의 흐름 제어하기

Sass에서는 @if 지시자를 이용해 조건을 설정할 수 있습니다.</br> 아래 예시는 mixin안에 조건문을 설정한 경우입니다.</br> @else 지시자를 사용하면 @if문이 불만족할 경우의 속성을 설정할 수 있습니다.

@mixin select-color($color) {
  @if $color == blue {
    color: blue;
  } @else {
    color: tomato;
  }
}

h1 {
  @include select-color((red));
}

Sass에서 조건문은 웹사이트를 개발하는 단계보다는 라이브러리를 만드는 경우에 더 자주 사용된다고 합니다.

📄 미디어 쿼리

미디어 쿼리는 반응형 웹을 만들 때 사용되는 필수 문법입니다.
Sass에서 미디어 쿼리를 사용할 때 문자열을 변수로 사용하는 경우가 있는데 이때 문자열 삽입용 기호인 #{}를 사용해야 합니다.

$width-small: "all and (min-width: 300px)";
$width-medium: "all and (min-width: 600px)";
$width-large: "all and (min-width: 900px)";

div {
  width: 100px;
  height: 100px;

  @media #{$width-small} {
    background-color: cadetblue;
  }

  @media #{$width-medium} {
    background-color: orange;
  }

  @media #{$width-large} {
    background-color: purple;
  }
}

---

출처

• 유노코딩

• 실습을 진행한 깃허브 레파지토리