최근 수정 시각 : 2024-06-18 00:35:44

Sass

SCSS에서 넘어옴
<colcolor=#FFF> Sass
Syntactically Awesome Style Sheets
파일:Sass 로고.svg
<colbgcolor=#D0469D> 종류 스타일시트 언어
출시 2006년 11월 28일
라이선스 MIT 라이선스
링크 파일:Sass 로고.svg 파일:GitHub 아이콘.svg 파일:GitHub 아이콘 화이트.svg
1. 개요
1.1. SCSS
2. 개발 환경3. 기능
3.1. 일반 기능3.2. SassScript
4. 참조

[clearfix]

1. 개요

CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, Sass는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. Sass에는 Sass와 SCSS가 있다.

또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어도 정상적으로 작동한다. 다만 SASS 자체는 개발자용 언어이기 때문에 웹브라우저가 읽을 수 없다. 따라서 중간에 컴파일러를 거쳐서 CSS로 변환하여 HTML에 연결한다.

비슷한 CSS 전처리기 언어로는 LESS, Stylus 등이 있다.

이 형식을 사용한 파일의 확장자는 .sass, .scss이다. Sass는 SCSS에서 중괄호를 없애서 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 뜰 확률이 꽤 크다. 따라서 일반적인 교육 사이트에서는 SCSS를 기준으로 설명한다.

1.1. SCSS

Sassy CSS

말그대로 Sass한 CSS라는 뜻이다. 실제 뜻을 생각해보면 CSS한 Sass가 더 맞는 것 같다.

가장 큰 특징은 기존 Sass의 문법에서, CSS의 원래 문법에서 사용되는 중괄호를 사용하여 CSS만 알던 사람들이 처음 접해도 직관적으로 의미를 이해할 수가 있다.

단순히 가독성만이 아니라 Sass의 기존문법이 들여쓰기 및 줄바꿈에 의존하는 문법임에 비해, SCSS는 중괄호가 있기에 공백에 의해 컴파일에러가 발생할 확률히 현저히 적다. 따라서 대부분의 사용자들이 SCSS 문법을 사용하여 Sass의 공식 문법으로 사용되고 있다.

2. 개발 환경

여러 편집기와 여기에 명시된 컴파일러를 통해 사용이 가능하다. 본래 컴파일러가 Ruby로 되어 있어서 Ruby 인터프리터도 설치해야 했지만, 이후 C++로 제작된 libsass 컴파일러가 나오면서 한때는 메이저한 컴파일러 자리를 차지했다. npm에서도 libsass 컴파일러를 패키지 형태로 설치할 수 있는 node-sass가 있어서 한때 CUI 환경에서는 이 방법이 가장 많이 사용되었다. 그러다가 libsass가 2018년 11월 이후 제대로 개발이 되지 않자 libsass를 비권장(deprecate)하고 대신 Dart Sass를 밀고 있다.

많은 웹 관련 툴에서 Sass를 CSS로 컴파일해주는 기능을 제공한다. 주로 설정 화면에서 Sass 컴파일러와 작업 폴더를 지정해 주면 저장할 때마다 컴파일 해 주는 방식이다. JetBrains의 WebStorm이나 PHPStorm이 이 기능을 지원하고, 어도비 드림위버도 지원한다. Visual Studio Code에서는 Live Sass Compiler라는 확장 기능을 사용하여 편집기에서 편집하고 저장만 하면 자동으로 CSS로 컴파일해주는 기능도 있다.

React에서는 터미널에서 프로젝트 디렉터리로 들어가 npm install sass 를 입력하면 SCSS 파일을 프로젝트에서 직접 불러올 수 있게 된다.

컴파일을 하면 보통 css 파일과 함께 map 파일을 같이 생성하는데[1], map 파일이 css 파일과 같은 폴더에 들어 있으면 웹 브라우저 디버그 모드에서 이 map 파일을 인식, 해당 부분이 scss 소스 어디에 있다는 것을 명시해준다.

3. 기능

3.1. 일반 기능

  • 네스팅 - 계층적으로 상속되는 CSS를 더욱 계층적으로 보이게 만드는 기능이다. 선택자에서 상위 계층을 적던 것을 정리하고 관련 요소들을 그룹으로 묶을 수 있게 되어 더욱 깔끔해진다.

    CSS
    {{{#!syntax css
ul {
list-style:none;
width:1000px;
margin:0 auto
}
ul li {
float:left;
}
ul li a {
color:black;
padding:20px;
display:block;}
}}} SCSS
{{{#!syntax css
ul {
list-style:none;
width:1000px;
margin:0 auto;
li {
float:left;
a {
color:black;
padding:20px;
display:block;
}
}
}
}}}

3.2. SassScript

  • 변수 - $를 사용하여 변수를 지정한다. 중복된 단어를 변수로 치환하여 유지 보수가 쉬워진다.


    CSS
    {{{#!syntax css
.dv1 {width:1000px;margin:0 auto;border:1px solid black}
.dv2 {width:200px;border:1px solid black}
.dv3 {width:500px;float:left;border:1px solid black}
.dv4 {width:700px;position:relative;border:1px solid black}
.dv5 {width:100px;position:absolute;border:1px solid black}
}}} SCSS
{{{#!syntax css
$bLine:1px solid black; /* 여기만 바꾸면 5개의 클래스 값을 전부 바꿀 수 있다. */
.dv1 {width:1000px;margin:0 auto;border:$bLine}
.dv2 {width:200px;border:$bLine}
.dv3 {width:500px;float:left;border:$bLine}
.dv4 {width:700px;position:relative;border:$bLine}
.dv5 {width:100px;position:absolute;border:$bLine}
}}}

  • 연산 - 값 대신 표현식을 지정할 수 있다. 값의 맥락을 명시할 때에 사용할 수 있다. 다만 상대값(% - px, vh - px 등)을 연산할 수는 없으므로 CSS에서 지원하는 calc() 함수를 써야 하며, 나눗셈의 / 기호 역시 CSS에서 grid-area 속성 등에서 사용하고 있기 때문에 나눗셈을 할 때에도 calc() 함수를 써야 한다. 다만 나눗셈에 쓰이는 calc()는 CSS가 아닌 SASS에서 따로 사용하는 함수이다.


    CSS
    {{{#!syntax css
.dv1 {float:left;width:101.11111px;margin-right:10px}
}}} SCSS
{{{#!syntax css
.dv1 {float:left;width:calc(1000px / 9) - 10;margin-right:10px}
}}}

  • 함수 - 동일한 기능을 가진 코드를 그룹화하여 중복을 제거하거나 기능을 명시하여 유지관리에 도움을 준다. mixin과 function이 있는데, 하는 일이 좀 다르다.
    • @mixin: 함수 안에 들어 있는 구문으로 대체해 준다. 어떻게 보면 문자열 변수와 비슷한 기능을 한다고 볼 수 있다. 불러 쓸 때는 앞에 @include를 붙인다.
    • @function: 함수 안에 있는 구문으로 계산을 한 뒤, @return 명령어로 특정한 값을 내보낸다. 프로그래밍 언어의 function과 같은 기능을 한다. 불러 쓸 때는 함수명만 쓰면 된다.

    CSS
    {{{#!syntax css
.dv1 {width:1000px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv2 {width:200px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv3 {width:500px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv4 {width:700px;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.dv5 {width:100px;position:absolute;border:1px solid black;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}}} SCSS
{{{#!syntax css
@mixin centering(){
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

.dv1 {width:1000px;@include centering()}
.dv2 {width:200px;@include centering()}
.dv3 {width:500px;@include centering()}
.dv4 {width:700px;@include centering()}
.dv5 {width:100px;@include centering()}
}}}
CSS
{{{#!syntax css
.dv1 {width:225px}
.dv2 {width:525px}
.dv3 {width:150px}
}}} SCSS
{{{#!syntax css
@function width-cal($a, $b){
@return $a * $b;
}

.dv1 {width:width-cal(900px, 3/12)}
.dv2 {width:width-cal(900px, 7/12)}
.dv3 {width:width-cal(900px, 2/12)}
}}}

  • 반복문 - 비슷한 구문의 반복 작성을 편하게 할 수 있다.


    CSS
    {{{#!syntax css
div:nth-child(1) {
top: 10px;
}
div:nth-child(2) {
top: 20px;
}
div:nth-child(3) {
top: 30px;
}

…

div:nth-child(60) {
top: 600px;
}
}}} SCSS
{{{#!syntax css
@for $i from 1 through 60 {
div:nth-child(#{$i}){
top:10px * $i;
}
}
}}}

  • 조건문 - 조건에 따라 속성의 값을 다르게 할 수 있다.


    CSS
    {{{#!syntax css
.container *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: 1/1;
}

.container *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: 1/2;
}

.container *:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: 1/3;
}

.container *:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column: 4;
grid-area: 1/4;
}

.container *:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: 2/1;
}

…

.container *:nth-child(60) {
-ms-grid-row: 15;
-ms-grid-column: 4;
grid-area: 15/4;
}
}}} SCSS
{{{#!syntax css
.container{
*{
@for $i from 1 through 60 {
&:nth-child(#{$i}){ /* #{}는 숫자를 문자로 변환해준다. 또한 &는 부모를 선택하게 하는 선택자이다. */
@if ($i%4 == 0) {
grid-area:#{calc($i / 4)} / 4;
}
@else {
grid-area:#{floor(calc($i / 4)) + 1} / #{$i % 4};
}
}
}
}
}
}}}

li:nth-child(1) {
background-color: red;
transform: rotateY(0deg);
}

li:nth-child(2) {
background-color: yellow;
transform: rotateY(-90deg);
}

li:nth-child(3) {
background-color: green;
transform: rotateY(-180deg);
}

li:nth-child(4) {
background-color: blue;
transform: rotateY(-270deg);
}
}}} SCSS
{{{#!syntax css
$bgs : red, yellow, green, blue;

@each $it in $bgs {
$i: index($bgs, $it);
li:nth-child(#{$i}) {
background-color: $it;
transform: rotateY(($i - 1) * -90deg);
}
}
}}}

  • Vendor Prefix - webkit 코드나 ms 코드를 일일이 적지 않아도 webkit이나 IE 등에서 인식할 수 있게 해 준다.


    CSS
    {{{#!syntax css
.dv1 {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(255,245,0,.9)));
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9));
display: -ms-grid;
display: grid;
}
}}} SCSS
{{{#!syntax css
.dv1 {
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(255,245,0,.9));
display: grid;
}
}}}

4. 참조


[1] 컴파일 할 때 생성하지 않도록 설정할 수 있다.

분류