WEB :: SCSS 란?

 

CSS 전처리기 SCSS

SCSS 란?

Sassy CSS 의 줄임말로 (문법적으로) 멋진 CSS 라는 뜻인듯.. 

정확히는 CSS의 메타언어. (= CSS에 대해 기능을 확장한 언어)

 

코드의 재활용성을 올리고, 가독성을 올리는 등의 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념.

전처리기를 위한 도구가 필요함, 컴파일 시간 소요 등의 단점이 있지만 그 외의 장점이 명확한 편이어서 주로 사용됨.

 

SASS 와 SCSS의 차이?

SASS(Syntactically Awesome Style Sheets) 문법은 CSS와 형태가 달라 러닝 커브가 존재.

(기존 CSS와는 달리 콜론이나 괄호 등이 생략된 부분이 많아 처음 접하면 익숙해지는 데에 시간이 소요됨. 기존 CSS 문법을 지원해주는 것도 아님.)

SASS의 문법을 보완하고자 나온 게 SCSS.

CSS의 슈퍼셋(superset)이기 때문에 CSS 문법 그대로 사용해도 적용이 잘 되고, 문법 또한 CSS와 다르지 않음.

 

 

제공하는 기능

변수(Variable) 할당

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

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

자주 사용하는 색이나 폰트 같은 것들을 변수로 지정해서 재사용할 수 있음.

 

중첩(Nesting) 구문

/* CSS */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

/* SCSS */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}

중첩 기능을 사용하여 쉬운 구성과 높은 가독성을 가지고 갈 수 있음.

 

모듈화(Modularity)

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

/* -------------------------------------------------- */

/* _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;
}

@use 문법을 사용하여 파일을 분할하고 모듈화 할 수 있음.

 

믹스인(Mixin)

/* CSS */
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}


/* SCSS */
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

함수처럼 default parameter를 지정할 수 있고, parameter를 받아서 속성을 부여할 수 있음.

(재사용성 확장)

 

확장&상속(Extend&Inheritance)

/* CSS */
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

/* ------------------------------------------------ */

/* SCSS */
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

@extend 사용 시 css 속성 집합을 상속 받을 수 있다.

 

연산자(Operators)

/* CSS */
.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

/* ----------------------------------- */

/* SCSS */
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

math.div(나누기) 외에도 sin, cos, tan, rendom, max, min 등등의 수학적 기능을 사용할 수 있음.