[CSS] Pre-Processor (Sass) 에 대한 이해

CSS Pre-Processor (전 처리기)

CSS가 동작하기 전, 사용하는 기능으로

우리가 알고있는 CSS의 한계를 보완하기 위해 확장된 확장팩이라고 이해할 수 있다.

---

이제 Sass(Syntactically Awesome Style Sheets)에 대해 알아보자

어떤 기능들이 추가되었을까?

• 변수 사용
• 조건문 / 반복문
• Import / Nesting(중첩) / Mixin / Extend, Inheritance

기존 CSS와 비교해 보면,

• 깔끔하고 간결한 표기법
• 협업시 발생할 수 있는 다른 팀원들과의 구문 평준화
• CSS 유지보수의 편의성 향상

 

Sass와 SCSS의 차이점

SCSS는 CSS 구문과의 호환성 및 Sass의 모든 기능을 지원하는 CSS의 상위문법

(= SCSS는 CSS와 거의 같은 문법을 통해 Sass의 기능을 지원)

 

 

Sass

.boardTable
   width: 500px
   float: right
   li
      color: blue
      background: url("./background.jpg")
      &:last-child
         margin-right: -20px

 

SCSS

.boardTable {
   width: 500px;
   float: left;
   li {
      color: blue;
      background: url("./background.jpg");
      &:last-child {
         margin-right: -20px;
      }
   }
}

 

위 구문을 살펴 보면 차이점은 중괄호 { 와 세미콜론 ; 에 차이가 존재 합니다.

 

Sass는 선택자의 적용범위를 들여쓰기로 구분합니다.

SCSS는 중괄호 { } 로 적용 범위를 구분합니다.

 

 

Mixin (재사용 가능한 스타일을 만드는 것)

 

Sass  ( =, + 기호로 Mixin 기능 사용 )

=border-radius($radius)
   -webkit-border-radius: $radius
   -moz-border-radius:    $radius
   -ms-border-radius:     $radius
   border-radius:         $radius
   
.box
   +border-radius(10px)

SCSS ( @mixin, @include 로 Mixin 기능 사용 )

@mixin border-radius($radius)
   -webkit-border-raidus: $radius;
   -moz-border-radius:    $radius;
   -ms-border-radius:     $radius;
   border-radius:         $radius;
}

.box {
   @include border-radius(10px); 
}

 

복잡한 문장일 경우에는 Sass와 SCSS의 장단점이 있을 수 있습니다.

Sass는 더 간결하고 작성하기 편리하고, SCSS는 코드통합이 훨씬 쉽습니다.

 

팀에서 원하는 방식을 사용하거나, 개인의 취향에 따라 선택할 수 있습니다.

 

 

How to use Sass Compile

웹에서 직접 동작할 수 없습니다.

최종 프로덕션 레벨은 표준 CSS로 동작해야 하기 때문에

전처리기 작성 후 CSS로 컴파일해야 합니다.

 

컴파일을 도와주는 도구들

 

• SassMeister
• Node-Sass
• Gulp, Gulp-Sass
• Webpack
• Parcel