Sass ( SCSS ) 란 뭘까 ?

Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.
-  Sass 공식 홈페이지

 

CSS는 규모가 커질수록 코드가 복잡하고 길어지며 그에 따라 유지보수가 어려워진다. 같은 내용의 코드를 재사용하려면 복사와 붙여넣기를 해야하는 등 불편한 점이 존재한다.

 

Sass는 컴파일 과정을 통해 CSS파일을 생성해주는 확장 언어이자 전처리기(preprocessor)로 다양한 기능을 가졌으며 코드를 작성하는 시간 단축과 유지 관리를 쉽게 도와준다.

 

하지만 Sass는 CSS의 확장 언어이지, CSS를 대체하는 언어가 아니라는 점. Sass는 제공하는 문법으로 코드를 작성하면 이를 컴파일하여 CSS파일을 빌드해 스타일시트를 생성해주는 것이란 점을 알자.

Sass를 사용해야 하는 이유는 뭘까 ? 

위와 같이 공식 홈페이지에서 적은 이유들이다.

모든 버전의 CSS와 완벽하게 호환하며 풍부한 기능 및 뛰어난 성능을 보여준다고한다.

또한 17년 동안 끊임없이 지원을 받으며 관리되는 중이며 업계에서도 인정받은 기술이라고한다.

거대 커뮤니티에서 수 많은 개발자들의 적극적으로 지원하며 개발 중이며 이미 Sass를 기반으로 한 프레임워크 또한 많다고 한다.

SCSS는 뭐야 ?

 Sass는 두 가지의 의미가 있다.

 

1. 코드를 CSS로 해석하는 역할을 하는 전처리기의 의미
2. 문법(구문)으로써의 의미

SCSS는 구문으로 이 문법을 기반으로 코드를 작성하면 Sass 전처리기의 도움으로 컴파일러가 CSS로 빌드해주는 것이다.

둘은 동일한 기능을 가지고 있고 코드의 형태에 미세한 차이가 있기 때문에 선택은 본인의 취향이지만 나는 SCSS 구문을 사용한다.

// SCSS 문법

$brand-color : #e2e2e2

.box {
    width: 100%;
    height: auto;
    color: $brand-color;
}

// Sass 문법

$brand-color : #e2e2e2

.box
    width: 100%
    height: auto
    color: $brand-color

Sass의 기능

중첩(Nesting) 해서 더 편하게 스타일을 지정해줄 수 있다.

기존의 CSS는 드래그 한 부분처럼 .text-box 작성 후 .text-box p를 작성해 스타일을 줘야했지만,

Scss는 부모의 코드 안에서 중첩하여 한 번에 스타일을 지정해줄 수 있다. 

 

또한 & 연산자를 사용하여 가상요소를 선택할 때에도 편하게 스타일을 지정해줄 수 있다.

// CSS

.box {
	background-color:black;
}

.box:hover {
	background-color:blue;
}

// Scss

.box {
	background-color:black;
    
    &:hover {
    background-color:blue;
    }
}

Sass 변수를 이용하여 따로 스타일을 지정 후 중복되는 곳에 사용하여 중복된 코드를 길게 작성하지 않고 편하게 줄일 수도 있다.

$brand-color : #14BCDA;
$important-text : #DC4920;

header {
	background-color : $brand-color;
}

h1 {
	color: $important-text;
}

h2 {
	color: $important-text;
}

.box {
	background-color: white;
    color: $brand-color;
}

또한 %임시 클래스와 @extend로 css 스타일을 확장할 수도 있다.

 

위에 이미지에서 보면 %btn 이라는 실제로는 존재하진 않지만 스타일을 지정해놓을 임시 클래스를 만든 후

btn1 과 btn2 클래스가 @extend %btn 으로 스타일을 확장 받은 후 각자 변경될 부분만 스타일을 지정할 수 있다.

이는 임시 클래스 뿐만 아니라 기존의 .btn1 의 스타일을 .btn2이 확장할 수도 있는 것이다.

 

확장에는 @extend 말고도 @mixin 도 존재한다.

 

@mixin 은 임시 클래스처럼 사용할 스타일을 지정한 후 확장받을 곳에서 @include를 통해 확장받을 수 있다.

@extend 와 차이점이 있다면 변해야할 점이 있다면 위의 이미지 처럼 변수를 지정하여 사용할 수 있다는 것이다.

 

이 외에도  use를 통해 다른 파일을 가져오기, 연산자를 이용하기, 내장 색 관련 함수들 등. 다양한 기능을 가지고 있으므로 기존의 CSS 스타일링 방법에 불편함을 느낀다면 Sass를 학습하고 사용해보는 것도 좋은 지식의 발전이 될 것이다. 🙂