SASS/SCSS (css전처리기)

 

 

CSS의 간결한 문법은 배우기 쉬우면서도 명확하다. 프로젝트 초기에는 큰 문제 없다. 하지만 프로젝트 규모가 커지면서 수정이 지속적으로 발생하면 코드 가 복잡해지면서 유지보수가 어려워 지는 단점이 있다. 이러한 CSS 한계를 보완 하기 위해 사용 할수 있는 CSS 전처리기(Preprocessor)를 사용한다.

SASS, LESS, Stylus와 같은 도구들이 이있는데 각각 비슷하면서도 다른 구문과 기능들을 포함하고 있다. 연산, 중첩, 상속과 같은 기능들의 사용 할수 있어 CSS 구조를 가독성 있게 만들어주고 유지보수가 편리하도록 만들어 준다. 전처리기의 종류 및 사용 선택의 여부는 상황과 여건에 맞춰 진행하면 되겠다.

---

 

SASS(SCSS)

SCSS는 SASS 세번째 버전에서 추가되었는데 SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌다.

SASS vs SCSS

// SASS
.wrapper
  width: 100px
  height: 200px
  .content
    color: white
    float: left

// SCSS
.wrapper{
    width: 100px;
    height: 200px;
    .content{
        color: white;
        float: left;
    }
}

 

SASS와 SCSS는 위와 같이 중괄호, 세미콜론 등과 같은 차이가 있는데 SCSS 구문이 익숙하면서도 코드를 작성하고 읽기에도 편하다.

 

Nesting

SASS의 유용한 기능으로 부모요소를 반복적으로 기술하지 않고 사용 할수 있다.

// CSS
.wrapper{
    width: 100%;
    height: 100%;
}
.wrapper div{
    width: 500px;
    height: 200px;
}
.wrapper div span{
    background-color: blue;
}

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

 

$ 변수

‘$’변수를 사용해서 공통된 속성을 재활용 할수 있다.

$font-color: red;
.content{
    color: $font-color;
    float:left;
    .title{
        color: $font-color;
        font-size: 18px;
    }
}

 

@ mixin

믹스인을 사용하면 공통된 속성의 묶음을 재활용 할수 있다.

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

 

@ import

하나의 파일로 모든 CSS를 관리하는 것은 가독성을 해치면서 유지보수에도 어려움이 있다. 임포트 기능을 활용하면 코드의 재활용, 유지보수에 도움이 된다.

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

나름의 룰을 정하고 관리 하면 되겠다.

// style.scss
@import 'header'
@import 'aside'
@import 'footer'
...

 

@ if

조건 분기가 가능하다.

// .scss
$num: two;
div {
  @if $num == one {
    color: blue;
  } @else if $num == two {
    color: red;
  } @else {
    color: black;
  }
}

// .css (..compile)
div{
    color: red;
}

 

@ for

반복문 사용이 가능하다.

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

 

…

 

이외에도 다양한 기능들이 있는데 글 하단 레퍼런스를 참고 하자.

SASS(SCSS)를 사용하면 CSS보다 간략한 표기법으로 CSS를 구조화하여 표현할 수 있고, 협업시 시 발생할 수 있는 멤버간의 코드 작성 방식을 평준화 할수 있으며, CSS에 없는 기능을 활용하여 CSS 유지보수 편의를 향상시킬 수 있다.

---

 

Referance

www.sass-lang.com

www.sassmeister.com

 

 

 

 

출처 : medium.com/@jinminkim_50502/css-preprocessor-sass-scss-25dc8329f867