CSS 전처리기 - Sass (SCSS)

CSS 전처리기란?

웹 페이지가 점점 커지면 정의하는 스타일도 많아지게 되고, 선택자를 불필요하게 과다 사용하게 되는 등 코드가 지저분해질 수 있다. 유지보수 측면에서도 까다로워진다. 이 때문에 나타난 것이 CSS 전처리기다. CSS 전처리기는 전처리기 자신만의 특별한 syntax를 갖고 CSS를 생성하도록 하는 프로그램이다. 주요 CSS 전처리기로 다음의 프레임워크들이 있다.

• Sass
• LESS
• Stylus
• PostCSS

이 프레임워크들은 각각 비슷하면서도 다른 구문과 기능들을 포함하고 있따. 연산, 중첩, 상속과 같은 기능 들을 사용할 수 있어 CSS 구조의 가독성을 높이고, 유지보수가 편리해지도록 한다.

 

Sass (Syntatically Awesome Style Sheets)

Sass는 2006년에 등장하여 현재 가장 대표적인 CSS 전처리기로 자리잡았다. Sass는 코드를 작성할 때 중괄호( {} )가 아닌 들여쓰기로 구문을 감지하며, 세미콜론( ; )도 사용하지 않는다. 이후 Sass를 개발하는 사람들은 Sassy CSS를 의미하는 SCSS를 SASS 세번째 버전에서 추가하게 된다. 즉, CSS와 거의 비슷한 문법으로 Sass를 지원한다는 것이다. SCSS는 CSS와 동일하게 중괄호나 세미콜론을 사용한다. SCSS는 SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들었다.

// Sass - 중괄호와 세미콜론을 쓰지 않음.
.wrapper
  width: 100px
  height: 200px
  .content
    color: white
    float: left
    
// SCSS
.wrapper {
    width: 100px;
    height: 200px;
    .content {
        color: white;
        float: left;
    }
}

 

Nesting 구조

부모 요소를 반복적으로 기술하지 않고 nesting 구조로 작성할 수 있다. 유지보수하기 간편해진다.

// CSS
.wrapper div span {
	background-color: red;
}

// SCSS
.wrapper {
	width: 100%;
	div {
   		height: 200px;
        	span {
            	background-color: red;
        }
    }
}

 

$ 변수

$변수를 사용하여 공통된 속성을 재활용 할 수 있다.

$color--red: red;
.content{
    color: $color--red;
    
    .title{
        color: $color--red
		width: 12px;
    }
}

 

@mixin

@mixin은 공통된 속성을 그룹으로 묶어 통째로 재사용할 수 있다.

@mixin box-style{
    width: 100px;
    height: 50px;
    background-color: red;
}
.section{
    position: absolute;
    top: 0;
    .box{
        @include box-style;
    }
}

 

@import 

다른 scss 파일을 호출하여 재사용할 수 있다.

@import 'footer.scss'
@import 'footer' // 확장자 생략 가능

 

@if

분기 처리가 가능하다.

$num: two;  // %변수 사용

// 분기 처리 - @if @else if @else
div {
  @if $num == one {
    color: blue;
  } @else if $num == two {
    color: red;
  } @else {
    color: black;
  }
}

div {
    color: red;
}

 

@for

반복문.

@for $i from 1 through 3 {
  .item-#{$i} { 
    width: 2em * $i; 
  }
}

 

 

Sass 공식 웹 사이트

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets