[CSS] Sass와 SCSS

순수 CSS는 프로젝트의 규모가 커질수록 요수보수가 어려워진다는 한계때문에 CSS-In-JS나 SCSS와 같은 기술의 사용이 대세가 되었다. 이 글을 통해 기존 CSS의 문제점을 개선한 SAAS와 SCSS에 대해서 알아보고 그중 더 많이 사용하는 SCSS에 대해 더 자세히 정리해볼 것이다.

 

Sass

Sass란 CSS 전처리기로써, 변수, 상속, 중첩 등의 다양한 기능을 제공한다. Sass로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행된다. 

 

SCSS

SCSS란 Sass의 일종으로 Sass의 모든 기능을 지원하며, 기존 CSS와 비슷한 문법을 사용한다는 점이 특징이다. 이러한 특징때문에 Sass보다 SCSS를 더 많이 선호하는 추세이다.

 

※ Sass와 SCSS 문법 비교

• Sass: 중괄호가 아닌 들여쓰기 사용
• SCSS: CSS처럼 중괄호와 세미콜론 사용

/* Sass */
$font-stack: Helvetica
$primary-color: #333

body
  font: $font-stack
  color: $primary-color
    
    
/* SCSS */
$font-stack: Helvetica;
$primary-color: #333;

body {
  font: $font-stack;
  color: $primary-color;
}

---

SCSS의 문법

1. 변수

SCSS는 다양한 데이터 타입을 정의하고 있어, 이를 변수처럼 활용할 수 있다. 따라서 자주 사용하는 색이나 폰트 등등을 변수로 지정하여 재사용하는 것이 가능하다. 다만 변수 이름 앞에는 항상 $를 붙여야한다.

/* SCSS */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

2. 중첩

중첩을 통해 상위 선택자의 반복을 줄일 수 있다.

/* SCSS */

.section {
  width: 100%;
  
  .list {
    padding: 20px;
    
    li {
      float: left;
    }
  }
}


/* Compile to CSS */

.section {
  width: 100%;
}

.section .list {
  padding: 20px;
}

.section .list li {
  float: left;
}

 

※ & (상위 선택자 참조)

중첩 내부에서 &는 상위(부모) 선택자로 치환되어 다음과 같이 사용할 수도 있다.

/* SCSS */

.btn {
  position: absolute;
  
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}


/* Compile to CSS */

.btn {
  position: absolute;
}

.btn.active {
  color: red;
}

.list li:last-child {
  margin-right: 0;
}

 

또한 치환의 원리이기 때문에 다음과 같이 응용할 수도 있다.

/* SCSS */

.fs {
  &-small {
    font-size: 12px;
  }
  
  &-medium {
    font-size: 14px;
  }
  
  &-large {
    font-size: 16px;
  }
}


/* Compile to CSS */

.fs-small {
  font-size: 12px;
}

.fs-medium {
  font-size: 14px;
}

.fs-large {
  font-size: 16px;
}

 

3. 모듈화

@use를 사용하여 파일을 분할하고 모듈화 할 수 있다.

/* _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


/* styles.scss */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

4. 믹스인(Mixin)

Mixin은 재사용할 CSS 스타일을 정의할 수 있는 기능이다.

@mixin을 통해 스타일을 정의하고 @include를 통해 사용한다.

/* 선언 - @mixin */

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

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}


/* 사용 - @include */

h1 {
  @include large-text;
}

div {
  @include large-text;
}

 

5. 함수

함수를 정의하여 특정한 리턴값을 사용할 수 있다.

/* SCSS */

$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns);
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns(); // 1
  }
  
  .box2 {
    width: columns(8);
  }
  
  .box3 {
    width: columns(3);
  }
}

 

6. 조건

/* SCSS */
$width: 555px;

div {
  width: if($width > 300px, $width, null);
}

 

7. 반복

/* SCSS */
/* 1부터 3 직전까지 반복 (2번 반복) */

@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width: 20px * $i;
  }
}

---