오늘의 키워드📌

---

• Sass(SCSS)

1. 개요

---

SCSS는 CSS의 전처리 도구 중 하나이며, CSS Preprocessor 라는 CSS가 실행되기 전에 실행을 하는 의미를 갖고 있다. Sass(SCSS) 이외에도 Less, Stylus 등이 있다.

SCSS는 CSS가 동작하기 전에 사용하는 기능으로 CSS에서 발생하는 여러 불편함을 해결하는 도구로써 사용된다. 여기서 말하는 불편함이란 불필요한 선택자의 과용, 연산 기능의 한계, 구문의 부재 등이 있다.

1-1. Variables

CSS 예제

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SCSS 예제

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

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

SCSS의 경우에는 코드 한 줄이 끝났을때 ;으로 마무리가 되고, 선택자 body가 작성되어져 있고 {}으로 범위 또한 명시되어져 있다.

Sass 예제

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

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

반면에 Sass의 경우에는 {} 범위와 ; 이 명시되어져 있지 않다. 따라서 들여쓰기 형태로 구분되어 해석한다.

결국 SCSS와 Sass 문법 두 가지를 모두 지원한다고 볼 수 있지만, SCSS가 Sass의 단점을 보완해서 나온 문법이기 때문에 SCSS 문법 사용을 권장한다.

1-2. SCSS 컴파일이란?

컴퓨터에서 프로젝트를 진행할 시, 표준의 CSS 문법이 아닌 CSS의 전처리 도구인 SCSS를 사용하여 프로젝트를 쉽게 진행한다. 그러나 브라우저에서는 SCSS는 작동하지 않으며, 표준의 CSS 문법만 작동한다.

따라서 SCSS의 문법을 CSS로 변환을 시켜주어야 하며, 이러한 변환 과정을 컴파일(Compile)이라고 한다. SCSS로 작성한 프로젝트에 컴파일을 진행할 수 있도록 구성 옵션을 작성해야 한다. 그러면 자동으로 컴퓨터에서 CSS 문법으로 변환시켜주어 브라우저에서 작동이 가능해진다.

1-3. SCSS vs Sass

Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합이다.

즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다.

2. 주석

---

$color: royalblue;
.container {
  h1 {
    color: $color;
    background-color: orange;
    // background-color: tomato;
    /* background-color: yellow; */
  }
}

SCSS에서는 주석처리를 // 한줄주석, /* */ 두줄주석으로 할 수 있는데 //으로 주석처리 할 경우에는 SCSS에서 CSS로 컴파일(변환) 했을때 컴파일 된 결과에서는 나타나지 않는다.

반면에 표준의 CSS 주석처리인 /* */는 SCSS에서 CSS로 컴파일 됐을때도 정상적으로 주석처리가 된다.

따라서 SCSS에서 CSS로 컴파일 된 후에도 주석이 남아있어야 된다면 /* */을 사용하고 그 외에 편하게 사용할 때에는 //으로 주석처리를 하는것도 좋은 방법이다.

3. 중첩 with SassMeister

---

SCSS와 같은 CSS 전처리 도구를 쓸 때 가장 유용하게 사용되는 기능은 중첩(Nesting)이다. 이는 CSS를 통해 반복해서 사용했던 상위 선택자들을 중첩 기능을 통해 매우 간단하게 표현할 수 있다.

HTML

<div class="container">
  <ul>
    <li>
      <div class="name">Kim</div>
      <div class="age">00</div>
    </li>
  </ul>
</div>

SCSS

.container {
  > ul {
    li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  }
}

CSS(Compiled)

.container > ul li {
  font-size: 40px;
}
.container > ul li .name {
  color: royalblue;
}
.container > ul li .age {
  color: orange;
}

SassMeister

SassMeister는 SCSS를 통해 코딩한 작업을 컴파일 완료된 CSS로 실시간 변환해서 보여주는 사이트다. SCSS를 학습할 때 유용하므로 참고하자.

SassMeister

4. 상위(부모) 선택자 참조

---

& 기호를 사용하여 상위 선택자를 참조할 수 있다. 결국 & 기호가 있는 범위에 해당하는 선택자라고 보면 된다.

5. 중첩된 속성

---

: 기호로 시작하여 중첩된 속성을 나타낼 수 있다. font: {}와 같이 font 속성의 font-weight, font-size 등의 여러가지 속성을 중첩하여 표현이 가능하다.

이렇게 font-로 시작하여 폰트를 나타내는 속성들은 "네임스페이스가 동일하다" 라고 한다.

네임스페이스?
이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말한다.

주의해야될 점은 중괄호가 끝나는 부분에 반드시 ; 작성을 해야한다.

6. 변수

---

$ 기호를 통해 JavaScript에서 사용하는 const, let과 같은 변수를 선언할 수 있다.

$size: 100px;처럼 앞에 $ 기호를 적고 할당 연산자로 :을 사용하는 방식으로 size라는 변수에 값을 입력한다. 해당 변수는 SCSS 내에서 반복적으로 활용이 가능하기 때문에 자주 사용되는 기능이다.

단, 변수는 선언한 범위 내에서 유효 범위를 가진다. 전역 변수는 문제 없이 모두 활용이 가능하지만 특정한 중괄호 내에서 사용이 된다면, 해당 범위내에 유효 범위를 가지므로 다른 곳에서는 활용이 불가능하다.

추가적으로 let과 동일하게 재할당이 가능하다. 재할당된 변수는 let과 마찬가지로 이후 해당 유효 범위 아래에서 할당된 값으로 활용된다.