Sass

Sass란?

CSS Preprocessor로서 CSS전처리기. 브라우저에서는 CSS만 작동하기 때문에 직접Sass를 동작 시킬 수는 없다. Sass는 CSS의 문법과 유사하지만 중첩이나 조건문 반복문 단위연산등이 가능한 프로그래밍 언어. 단, 웹에서는 직접 작동하지 않으므로 CSS로 컴파일 후에 사용가능

Sass와 SCSS의 차이점

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) .즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원.

차이는 Sass는 {}(중괄호)와 ;(세미콜론)을 생략하여 사용하며, SCSS는 {}(중괄호)와 ;(세미콜론)을 CSS그대로 사용.

Sass 컴파일 방법

Sass의 문법을 CSS로 변환해주는 작업. node js, SassMeister, Gulp등으로 컴파일이 가능.

SassMeister

SassMeister 웹사이트에서 Sass/SCSS의 문법을 실시간으로 CSS문법으로 변환

Parcel

웹 어플리케이션 번들러 Parcel은 단순하게 컴파일이 가능

변수

반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $를 붙인다

$변수이름: 속성값;

SCSS

$color-code: #000;
$url: "/common/images/";
$w: 200px;

.wrap {
    color: $color-code;
    background-image: $url;
    width: $w;
}

Compiled to

.wrap {
  color: #000;
  background-image: "/common/images/";
  width: 200px;
}

중첩

SASS는 중첩기능을 사용할 수 있다. 상위 선택자의 반복을 피할수 있어 좀 더 편리하게 복잡한 구조를 작성할 수 있다.

SCSS

.wrap {
    width: 100%;
    .list {
        padding: 20px;
        li {
            color: red;
        }
    }
}

Compiled to

.wrap {
  width: 100%;
}
.wrap .list {
  padding: 20px;
}
.wrap .list li {
  color: red;
}

가져오기

CSS에는 현재 파일에 다른 CSS를 불러오는 @import라는 속성이 있다. 이 속성을 사용하면 의도에 따라 코드를 잘게 쪼개어 효율적으로 유지 보수할 수 있지만, @import로 선언되어 있는 CSS마다 http 요청을 발생하므로 웹페이지 성능 저하의 원인이 된다 하여 사용을 지양하고 있다. SASS에서도 다른 파일을 불러올 수 있는 @import가 있다. CSS의 @import와 다른 점은 여러개의 SASS파일은 @import해도 최종적으로 하나의 CSS로 컴파일해주기 때문에 성능에 영향을 주지 않고 코드를 여러 파일로 나누어 관리할 수 있다. 물론 @import된 파일에서 정의된 내용은 부모 SASS 파일에서도 사용할 수 있다.

// 작성 방법 : @import "파일명.scss" 또는 @import "파일명";
@import "reset";
@import "reset.scss";

연산

SASS는 기본적인 연산 기능을 지원한다. 레이아웃 작업시 상황에 맞게 크기를 계산하거나 정해진 값을 나눠서 작성할 경우 유용하다.

산술 연산자

비교 연산자

논리 연산자

@mixin

mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능. @mixin은 재사용할 내용을 선언하는 부분이며 @include는 @mixin에서 정의된 내용을 삽입,적용되는 부분이다

@mixin예제

// SCSS문법
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

// Sass문법
=large-text
  font-size: 22px
  font-weight: bold
  font-family: sans-serif
  color: orange

@include

@mixin에서 선언된 내용이 적용되는 부분입니다.

@include사용법

// SCSS문법
@include 믹스인이름;

// Sass문법
+믹스인이름

@include예제

// SCSS문법
h1 {
  @include large-text;
}
div {
  @include large-text;
}
// Sass문법
h1
  +large-text
div
  +large-text

@content

선언된 Mixin에 @content이 포함되어 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있다. 이 방식을 사용하여 기존의 mixin이 가지고있는 기능에 선택자나 속성 등을 추가할 수 있다.

SCSS예제

@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}

CSS컴파일후

  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

@extend

특정 선택자가 다른 선택자의 모든 스타일을 가져야 하는 경우가 있다. 이경우 @extend를 활용하여 객체지향의 상속처럼 활용할 수 있다

@extend 활용법

@extend 선택자;

SCSS예제

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

CSS컴파일후

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}