이번 주 공부 내용 중에서 'Sass'를 정리하고자 한다.

Sass는 무엇인가?

Sass(syntactically awesome stylesheets)는 css의 전처리 언어로, css의 확장 언어라고 생각하면 좋을 듯하다.

처음 정의를 들었을 때는 "css 전처리? 그건 무슨 말이람?" 싶었는데, 공부하다보니 기본적인 내용이지만(?) 엄청 유용하게 쓰일 것 같은 개념인 것 같다는 생각이 들었다.

Sass가 어썸한 이유!

css는 HTML이나 XML로 작성된 문서의 요소를 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어로, 폰트, 색상 등의 스타일링하는 디자인적인 느낌이다.

이것저것 하다보면 재미는 있지만, 재미있는 만큼 쉽게 꼬이는 것이 css.
문서 내 요소들이 많아지면 많아질 수록 꼬이는 것도 꼬이는 거지만, 가독성도...🤦‍♀️

Sass는 css 문서 내에서 반복되는 내용으로 인한 불편함을 줄여주는 역할을 한다는 점에서
Awesome하다는 것이다!

먼저, Sass, Scss 그리고 CSS의 차이는?

Sass에는 두 가지 구문(.scss와 .sass)이 있다. 두 구문은 큰 차이는 없다.
먼저 Scss구문은 가장 일반적으로 사용되는데, 그 이유는 대괄호와 세미콜론 등 기존의 css 작성 방식과 유사하기 때문인 듯하다. Sass 구문은 대괄호 대신 들여쓰기를, 세미콜론 대신 줄바꿈으로 작성하는 식이다.

예시 코드이다. 참고로 sass 공식 홈페이지 가이드라인의 코드이다.

**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;
}



**Sass 구문**

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

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

.scss와 .sass 모두 사용 가능하니 각자의 스타일에 따라 사용하면 될 것 같다.
Sass, Scss라는 각각의 이름이 있지만, Sass가 곧 Scss인 느낌...!

변수 설정

Sass를 어썸하게 만드는 데에 가장 큰 기여를 한 개념이 '변수'라고 생각한다. (이래놓고 아래에서 또 어썸한 포인트 또 말 할 예정이다.)

변수에 대해 짧게 이야기하자면, 프로그래밍에서 변수는 값을 저장할 수 있는 공간을 가리킨다. 변수의 어떤 점이 어썸하냐면, 일단 아주 큰 값이 있고 문서 내에서 해당 값을 여러 번 작성해야 할 때 느낄 수 있다. 'a' 같은 짧은 이름의 변수에 저장해두면 길고 복잡한 값을 매번 타이핑하지 않아도 되기 때문이다.

개인적으로 여름에 우당탕탕 했던 팀 프로젝트 피그마 속 '$primary-color'를 이제야 제대로 알게 된 것 같다. (그땐... 피그마고 뭐고 그냥 일정 따라 얼레벌레 어떻게 했었다... 그냥 피그마의 '태그' 그런 느낌인 줄로만 생각하고 rgb 따로 찾아서 작성했던 과거의 나... 🫣)

아래 코드는 역시 Sass 공식 홈페이지 가이드라인 코드를 참고했다.

**SCSS**

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

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

**CSS**

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

예시의 $primary-color의 value는 #333으로 비교적 간단한 컬러코드라서 변수명 생각하고, 작성하고 그러느니 매번 '#333' 타이핑하는 것도 나쁘지 않다고 생각할 수 있을 것 같다. 항상 #333 같은 짧고 간단한 코드만 사용하면 그렇게 하는 것도 불편함 없이 작성할 것 같다.

만약 메인 테마 컬러가 #ef9ad7이고, 버튼 컬러는 #90be1c, 폰트 컬러는 #f82a3c ... 이렇게 사용하는 색상도 다양하고 컬러코드도 복잡하다면...?

그런 점에서
메인 테마 컬러는 $primary-color라는 변수명에 #ef9ad7 값을 저장해두고,
버튼 컬러는 $button-color라는 변수명에 값을,
폰트 컬러는 $font-color라는 변수명에 값을 저장하여
재사용성도, 유지보수에도 어썸함을 줄 수 있는 것

@extend와 @mixin

@extend와 @mixin은 CSS 템플릿으로 역시... 어썸하다.

예시가 적절한지 모르겠으나, 버튼 작성하는 상황을 예로 들어보고자 한다.

@extend의 경우에는

@extend는 말 그래도 '확장'의 의미이다.
상단의 '.btn' 버튼을 기본 버튼 스타일로 생성해두고, '.btn-1', '.btn-2' 같은 기본적인 스타일은 비슷하지만 각각 다른 스타일 요소를 가진 버튼을 만드는 데에 사용할 수 있다.

@extend에는 임시 클래스라는 개념이 있는데, 클래스명 앞에 '%' 기호를 붙여 사용한다. 기본적인 스타일을 만들어두고 여기에서 파생시켜나가는 데에 사용하기 좋을 것 같은 개념이다.

%btn {
	width: 100px;
    border: 1px solid black;
    (...)
    color: black;
    }

이렇게 기본 스타일을 만들고

.btn-1 {
	@extend %btn;  //width 등 '%btn'의 스타일을 받아온다.
    border: 1px solid blue;  //'%btn'의 스타일에만 적용되는(다른) 요소
    color: blue;  //'%btn'의 스타일에만 적용되는(다른) 요소
    }
    
.btn-2 {
	@extend %btn;   //width 등 '%btn'의 스타일을 받아온다.
    border: 1px solid orange;   //'%btn'의 스타일에만 적용되는(다른) 요소
    color: orange;   //'%btn'의 스타일에만 적용되는(다른) 요소
	}

버튼 넓이와 모양은 같지만, 색상은 다른 '.btn-1', '.btn-2'을 만들 때
넓이, 버튼 폰트, cursor 속성 등등 공통으로 적용할 코드의 중복 작성이 사라져 코드 작성 및 유지보수에도 좋은 기능인 것 같다.

@mixin의 경우에는

세 개의 버튼의 기본 스타일로 둔 '.btn'의 속성을 @mixin으로 지정하여 작성하는 것으로 한다. @extend와 달리 @mixin은 이 자체의 템플릿 명을 갖고, 함수처럼 인자를 가질 수 있다.

// @mixin 템플릿 명을 'btn'으로 했음.
// '$border', '$color'를 인자로 설정함.

@mixin btn ($border, $color) {
	width: 100px;
    border: 1px solid black;
    (...)
    color: black;
    }

'btn'을 이름으로 하는 @mixin을 작성하고,

.btn-1 {
	@include btn(blue, blue);
    }
    
.btn-2 {
	@include btn(orange, orange);
    }
    
// default 인자값 설정은 이렇게 _예: border의 기본 컬러로 black 설정
@mixin btn ($border: black, $color) {
	(...)
    }

각각 테두리와 폰트 컬러가 다르기 때문에 @mixin의 인자 순서에 따라 '.btn-1'과 '.btn-2'만의 속성을 설정할 수 있다.
default 인자값을 설정할 수도 있는데, 이는 여러 개의 인자 중 다른 속성은 동일하게 설정하고 싶으면서도 특정 인자는 고유 속성을 정하고 싶은 경우에 사용할 수 있다.

같은 듯 다른... @extend와 @mixin의 차이는?

정리하면서 구글링 하다가 아무튼 Sass 시리즈 글을 읽게 됐다. 정말 잘 정리된 글인 것 같다. 체감 상 둘의 큰 차이는 모르겠지만,

@extend

• 확장의 느낌 (기본 + a)
• 임시 클래스(%)와 함께 사용 가능
  
  

@ mixin

• '인자'를 넣을 수 있다.
  • 확장의 느낌보다는 '인자'로 인해 특정 선택자의 속성 변경에 용이한 느낌
• 사용 시 @include와 함께!
  
  

공통점

• css의 템플릿화로 재사용성을 높여줌

지금은 이정도로 이해된 상태이다.
참고한 글과 함께 앞으로 실전에서 쓰다보면 더욱 명확하게 이해되겠지!

@use

모듈화한 스타일시트 파일을 불러오는 기능으로, @import와 유사하다.

@use는 불러오는 대상을 전역으로 불러오던 @import의 단점 중 하나인 멤버 충돌 시 해결점을 찾기 어렵다는 점을 개선하고자 나온 문법이다. @import 보다는 @use 사용을 권장한다.

@use와 @import의 차이는

불러오는 대상의 경로 명시 여부에 있다.

지금 불러온 내용이 어느 파일의 내용인지 명시하지 않은 @import의 경우,
아래와 같은 어려움이 발생할 수 있다.

// _mixin.scss

@mixin box($width, $height) {
	width: $width;
    height: $height;
    background-color: yellow;
	}
    
// _box.scss

@mixin box($width, $height) {
	width: $width;
    height: $height;
    background-color: green;
    }

@mixin font($color) {
	color: white;
    font-size: 20px;
    font-weight: bold;
    }
   
   
   
// @import 사용
// import.scss

@import 'mixin';
@import 'box';

.box {
	@include box(200px, 200px);
    background-color: blue;
    }

import.scss 파일에서 사용한 @include box가 'mixin'파일의 내용인지, 'box'파일의 내용인지 정확히 알기 어렵다. 문제가 발생하는 경우엔 어느 곳이 문제점인지 파악하는 데 어려울 수 있다.

@import의 이러한 점을 개선하기 위해 @use는 불러오는 대상의 경로를 명확히 명시하는데, 아래와 같은 방식으로 명시한다.

// use.scss

@use 'mixin';
@use 'box';

.box {
	@include mixin.box(200px, 200px);
    background-color: yellowgreen;
    }

그 외 다른 기능

Sass에도 반복문, 가정문, 연산 등 다른 기능이 있으나, css 작성에 있어서는 '굳이...?' 싶은 개념인 것 같아 더 공부하지 않은 상태이고, 이 글에도 따로 정리하지 않으려 한다.

그냥 이런 개념들도 있다는 정도만 기억해두자고!

참고한 글

• Sass 공식 홈페이지
• 아무튼 Sass 시리즈(3)