Sass(SCSS)는 CSS 전처리기로써 CSS에 프로그래밍적 요소를 곁들인 언어이다.
따라서 어떠한 스타일링을 변수나 mixin을 선언하고 반복적으로 사용할 수 있다.

 

---

변수

사용법

• 변수를 사용할 때는 달러 표기($)를 쓴 다음에 변수명을 적고 변수에 대한 값을 지정해 줘야 한다.

• 변수로 작명할 수 있는 문자는 영어, 숫자, 대쉬(-), 언더바(_)를 사용할 수 있고, 공백이나 특수문자는 사용이 불가능하다.

• Sass에서 변수명을 작명할 때, 대부분의 사람들이 지키는 암묵적인 룰 같은 컨벤션 같은 것이 있는데, 소문자를 사용하는 경우엔 보통 대쉬(-)를 쓰고, 대문자만 쓰는 경우에는 언더바(_)를 쓴다.

• 변수의 값으로는 CSS의 값으로 들어갈 수 있는 모든 값을 쓸 수 있다.

$doge-1 : 64px; ⭕️
$DOGE_1 : blue; ⭕️
$chainLink : color 200ms ease-in-out; ⭕️
$ripple : url('./assets/images/logo.png'); ⭕️

$shiba is good??!! : 32px; 🚫

 

---

예시

색깔

지정된 색깔들만 변수로 선언하여 프로젝트에서 사용하는 경우가 많다.

이러한 지정된 변수들은 상수를 뜻하는 constants 라는 디렉토리를 만들어 그 안에 sass파일을 만든다.
보통 scss파일의 이름은 _colors.scss 와 같이 언더바를 붙이고 파일명을 지정하면 된다.

색깔 작명 꿀팁

• 보통 일반적인 텍스트로 가장 많이 쓰이는 색은 primary라고 한다.
• 흰색보다 아주 약간 진한 색은 보통 배경색으로 쓰이고 background로 쓰인다.
• background색 보다 조금 더 진한 색은 보통 테두리 색으로 쓰이고 border로 쓰인다.

이 파일을 main.scss 파일에서 import로 불러와 사용할 수 있다.

Sass를 실행해 보면 다음과 같이 컴파일 된 style.css 파일을 볼 수 있다.

 

글씨체

_typography.scss라는 파일명의 폰트 관련한 값을 선언한 전용 파일을 만들어보았다.

엄격하게 글씨체를 설정한 프로젝트는 line height와 letter spacing까지 모두 지정된다.

폰트의 크기와 굵기는 바로 티가 나지만 line height와 letter spacing은 뭔가 티가 안나면서도 글의 느낌을 많이 다르게 만드는 요소이니 폰트를 관찰할 때 같이 살펴보면 좋다.

일반적인 웹의 본문 font-size는 16px이며, 어르신들을 위한 웹에서는 18px까지 가는 경우도 있다.

 

그리드

그리드 시스템에 관해서도 값을 변수로 선언해 보자.
그리드는 레이아웃 쪽에 해당하니 layouts라는 디렉토리를 만들고 그 안에 _grids.scss라는 파일을 만들어보았다.

모바일에 관한 변수명은 앞에 sm, 태블릿은 md, 데스크탑은 lg를 붙여 사이즈를 구분하였다.

$gutter: 20px;

$sm-columns: 4;
$sm-margin: 5px;

$md-columns: 12;
$md-margin: 30px;
$md-max-container: 960px + $md-margin * 2;

$lg-columns: 12;
$lg-unit: 75px;
$lg-max-container: ($lg-unit + $gutter) * $lg-columns; 

grid를 사용하기 위해 기본적인 변수에 값을 설정하였다.
이제 세부적인 스타일링의 값으로 변수를 사용해보자.

Sass는 CSS에 프로그래밍적 요소를 곁들인 스타일링 언어라고 했다.
프로그래밍 언어에는 반복적인 작업을 처리하는 데 for문을 쓰는데, 다음과 같이 CSS에서도 for문을 쓸 수 있다.

@for $var from <start> through <end> {
  // 변수를 이용한 css 문법 작성
}

for문을 쓰기 위해서는 for 앞에 @를 붙여줌으로써 사용이 가능하다.
여기서 $var는 for문에서 쓰이는 임의 변수로, <start> 부터 <end> 까지 계산된다.
또한 변수 $var를 for문 안에서 선택자로 쓸 때는 #중괄호(#{})로 감싸주어야 사용이 가능하다.

 

.container {
  @for $i from 1 through $sm-columns {
    .col-sm-#{$i} {  // $i를 #{}으로 감싸주어야 변수처럼 사용 가능!
      width: $i / $sm-columns * 100%;
    }
  }
}

$sm-columns은 4이니, $i는 1에서 4까지 for문 루프를 돌게 되며, 해당하는 .col-sm-$i의 값도 for문이 계산해주어 자동으로 값이 설정된다.
이런식으로 하면 계산이 필요한 값을 Sass가 프로그래밍 언어처럼 계산해 줘서 편하다.