티스토리 뷰

HTML·CSS

Sass(Scss) 컴파일 방법과 기본 문법

da.som 2019. 2. 4. 02:17

오랜만에 Sass를 다시 보면서 간략하게나마 정리해보려 한다.
Sass는 CSS 전처리기(CSS Preprocessor) 이기 때문에 컴파일 과정이 필요하긴 하지만 다양한 기능을 조합해 많은 UI를 손쉽게, 재사용성있게 만들 수 있기 때문에 많이 사용된다.
Sass는 Scss문법으로 주로 사용이 되며, CSS가 지원하는 모든 문법과 기능을 지원한다.
Scss는 { } 중괄호와 ; 세미콜론을 사용하기 때문에 CSS 문법과 비슷해 비교적 쉽게 느껴지기도 한다.
그래서 이 포스팅에서도 편의상 Sass 라고 명명하는 부분이 있겠지만, Scss 문법을 사용해 설명할 예정이다.

컴파일 방법

앞에서도 말했지만, Sass는 웹에서 직접 동작할 수 없기 때문에 컴파일 과정이 필요하다.

컴파일 방법은 여러가지가 있지만 간단한 테스트나 공부 목적이라면 SassMeister 사이트를 추천한다. Sass 코드를 작성하면 바로 CSS로 변환해 준다. 이 포스팅에서 작성된 예제 코드도 이 서비스를 이용해 테스트했다.

위와 같은 상황이 아니라면 Sass 환경을 설치해줘야하는데 아래 방법 중 본인의 개발환경에 적합한 방법을 선택하면 된다.

  1. 오리지널 Ruby Sass 사용하기 : Ruby 환경

    Ruby 설치 후 sass을 install 한다.
    (Mac의 경우 Ruby가 기본적으로 설치되어 있으므로 바로 sass를 설치하면 된다.)

    gem install sass

    scss 파일을 CSS로 컴파일

    sass style.scss style.css

  2. LibSass 사용하기 : Node.js 환경을 포함한 다양한 환경에서 사용 가능

    npm 을 통하여 node-sass 글로벌 설치

    $ npm install -g node-sass

    컴파일

    # 특정 파일을 특정 파일 이름으로 컴파일
$ node-sass style.scss > style.css

# 폴더 내의 모든 파일 컴파일
$ node-sass src/sass --output dist/css

# 파일 변경을 감지하여 변경될 때마다 컴파일

## 파일 단위 모니터링
$ node-sass src/sass/style.scss --watch --output dist/css

## 폴더 단위 모니터링
$ node-sass src/sass --watch --output dist/css

  3. Koala, Hammer, Compass 등 의 GUI 어플리케이션 사용

개인적으로는 현재 개발 환경에 npm과 node.js가 설치되어 있기 때문에 LibSass를 사용하기로 했다. 빠른 컴파일 속도도 큰 장점이다.

기본 문법

Sass는 많은 기능을 제공하기 때문에 여기서 모든 문법을 다 다루기엔 무리가 있고 당장 필요없는 기능도 많기 때문에 Sass를 당장 시작하기 위한 몇 가지 기본 문법에 대해서만 설명해보려고 한다.

주석

Scss

/* 
    여러 줄 주석은 
    CSS 와 똑같이 사용한다.
*/

// 한 줄 주석이 가능하지만 css로 컴파일하면 보이지 않는다.

CSS

/* 
    여러 줄 주석은 
    CSS 와 똑같이 사용한다.
*/

Variables (변수)

변수 선언 시에는 $ 를 사용하며, 변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, lists, maps 가 있다.
변수를 특정 selector 안에서 선언하면 해당 selector 에서만 접근이 가능하고, 이것을 전역 변수로 사용하고 싶으면 !global 플래그를 사용한다.

Scss

$main_color: #000;

body {
  color: $main_color;
}

.local_var {
  $main_color: #333;
  color: $main_color;
}

.global_var {
  $main_color: #666 !global;
  color: $main_color;
}

.global_flag {
  color: $main_color;
}

CSS

body {
  color: #000;
}

.local_var {
  color: #333;
}

.global_var {
  color: #666;
}

.global_flag {
  color: #666;
}

Arithmetic Operators (산술 연산자)

산술 연산자 사용이 가능하다. ( +, -, /, %, ==, != )
주의할 점은 +, - 연산자 사용 시에는 단위를 통일시켜야 한다는 것이다.

Scss

.box {
  width: 200px / 600px * 100%;
}

CSS

.box {
  width: 33.3333333333%;
}

Built-in Functions (내장함수)

다양한 내장함수를 지원하기 때문에 필요한 기능을 아주 간단하게 처리할 수 있다.
전체 내장함수 목록을 참고하여 사용하면 되기 때문에 길게 설명하지 않도록 하겠다.

Nesting (중첩)

중첩 기능은 CSS를 마치 HTML의 트리 구조 처럼 계층이 있는 모양으로 사용할 수 있게 해준다. 하지만 코드 중첩이 너무 깊게 되면 유지 보수가 어려워지므로 코드 중첩 시 4레벨보다 깊게 들어가지 않도록 유의해야한다.
& 를 사용해 부모 선택자를 레퍼런스 할 수 있으며, @at-root를 사용하면 중첩에서 벗어날 수 있다.

Scss

.container {
  a {
    color: #666;
    &:hover {
      text-decoration: underline;
      color: #000;
    }
    &:visited {
      color: #eee;
    }
  }

  @at-root div {
    background-color: #eee;
  }
}

CSS

.container a {
  color: #666;
}
.container a:hover {
  text-decoration: underline;
  color: #000;
}
.container a:visited {
  color: #eee;
}

div {
  background-color: #eee;
}

Import (불러오기)

Scss 파일 내에서 @import 지시자를 사용해 특정 .scss 파일을 불러올 수 있다.
파일명을 작성할 때에는 확장자를 붙이지 않아도 된다.
참고로, import 기능만 사용하기 위한 scss 파일은 _(underscore) 으로 시작하는 파일명을 붙이면 css로 컴파일되지 않는다. 이것을 partial 기능 이라고 한다. 주로 컴파일 되지 않는 변수나 믹스인 등을 모아놓는 용도로 사용되는 것 같다.

Scss

@import layout

Extend (상속)

CSS를 작성하다보면 중복되는 코드를 작성하게 되는 경우가 많다. 상속은 이런 번거로움을 덜어주는 기능으로 특정 선택자를 @extend 지시자를 통해 상속받을 수 있다.
또한, 선택자가 상속에만 필요할 경우 Placeholder 선택자 % 를 사용하면 해당 선택자는 상속은 가능하지만 컴파일되지 않는다.

Scss

 .box {
  border: 1px solid #eee;
  padding: 10px;
  display: block;
}

.alert_box {
  @extend .box;
  background-color: #666;
  color: #fff;
}

%notice_box {
  color: #999;
  font-weight: bold;
}

.success_box {
  @extend .box;
  @extend %notice_box;
  background-color: green;
}

.error_box {
  @extend .box;
  @extend %notice_box;
  background-color: red;
}

CSS

.box, .error_box, .success_box, .alert_box {
  border: 1px solid #eee;
  padding: 10px;
  display: block;
}

.alert_box {
  background-color: #666;
  color: #fff;
}

.error_box, .success_box {
  color: #999;
  font-weight: bold;
}

.success_box {
  background-color: green;
}

.error_box {
  background-color: red;
}

Mixin (믹스인)

mixin은 상속과 비슷하지만 argument(인수)를 받을 수 있다는 점에서 차이가 있다.
mixin을 선언할 때는 @mixin 지시자를 사용하며, mixin을 사용할 때는 @include 지시자를 사용한다.
mixin의 인수에는 : 을 사용하여 기본값을 지정할 수 있고, 문자열을 그대로 출력해주는 #{ } 표현을 이용해 손쉽게 미디어 쿼리를 작성할 수도 있다.
또한 mixin 안에 @content 지시자를 사용하면 해당 부분에 @include 지시자의 스타일 블럭을 복제할 수 있다.

Scss

@mixin highlight($color, $size: 14px) {
  color: $color;
  font-size: $size;
}

.heading_one {
  @include highlight(red, 20px);
}

.heading_two {
  @include highlight(blue);
}

@mixin button($queryString){
    @media #{$queryString} {
      width: 100%;
      &:hover,
      &:active,
      &:focus {
        @content;
      }
    }
}

.button {
    width: 300px;
    color: blue;

    @include button("(max-width: 767px)") {
      color: red;
    }
}

CSS

.heading_one {
  color: red;
  font-size: 20px;
}

.heading_two {
  color: blue;
  font-size: 14px;
}

.button {
  width: 300px;
  color: blue;
}
@media (max-width: 767px) {
  .button {
    width: 100%;
  }
  .button:hover, .button:active, .button:focus {
    color: red;
  }
}

Function (함수)

내장 함수 외에 @function 을 사용하여 임의로 함수를 만들어 쓸 수도 있다.
mixin과 다른 점은 mixin이 style markup 을 반환하지만, function은 @return 지시자를 사용하여 값 을 반환한다는 것이다.

Scss

@function card-width($col_num, $container_width) {
  @return ($container_width / $col_num)
}

@function calc-width($col_num, $margin) {
  @return calc((100% / #{$col_num}) - #{$margin});
}

.card {
  width: card-width(4, 1000px);
}

.calc_card {
  width: calc-width(6, 10px);
}

CSS

.card {
  width: 250px;
}

.calc_card {
  width: calc((100% / 6) - 10px);
}

Sass의 사용법 중 컴파일 방법과 기본 문법만 살펴봤는데, 여기서 소개한 문법 이외에도 많은 기능이 있고 여러 속성을 조합하면 훨씬 다양하고 간편한 구조로 CSS를 작성할 수 있다고 한다.
아직 Sass를 본격적으로 사용해보지않아 이번에는 이정도로만 정리하고 앞으로 Sass를 직접 프로젝트에 사용해보면서 좋은 팁이 있다면 새로운 포스팅으로 작성해보려한다.

Reference

댓글