시작하기 앞서 모든 내용은 Sass 공식 가이드라인을 참고하여 작성했습니다.
개인적인 정리이니 오타, 생략한 내용이 있습니다.
정확한 정보를 위해 공식 가이드라인을 보시는 것을 추천드립니다. 🤗

🙋🏼‍♀️ Sass에 대해서

📌 Sass 공식 문서에서 묘사하는 Sass란?

사스는 기초 언어에 힘과 우아함을 더해주는 css의 확장이다.

Sass의 궁극적인 목적은 css의 결함을 보정하는 것. 단, Sass는 css에게서 부족한 부분만을 돕길 원한다.
즉, css에 몇 가지의 추가 기능을 더해준다.

Ruby Sass , LibSass가 있지만 나는 node-sass를 사용할 것이다.

Ruby Sass와 LibSass에 대해서 궁금하다면 아래 링크를 참조하자.
http://sassbreak.com/ruby-sass-libsass-differences/

📌 Sass 와 SCSS

처음에 들여쓰기의 감지를 그 핵심 특성으로 갖는 구문을 가리켰다.
얼마 지나지 않아 Sassy CSS를 의미하는 SCSS라는 CSS 친화적 구문을 제공했다.
둘 중 어떤것을 사용할지는 사용자에게 달렸다. 미관상의 문제일 뿐이다.

-Sass

Sass에서 공백에 반응하는 구문은 중괄호, 세미콜론 다른 구두점 기호들을 없애기 위해 들여쓰기에 의존한다.
간결하고 짧은 구문을 만들어낸다.

Variable
!primary-color= hotpink

// Mixin
=border-radius(!radius)
  -webkit-border-radius= !radius
  -moz-border-radius= !radius
  border-radius= !radius

.my-element
  color= !primary-color
  width= 100%
  overflow= hidden

.my-other-element
  +border-radius(5px)

-SCSS

SCSS에서는 Sass와 다르게 CSS와 비슷한 구문 방식을 지원한다.

// Variable
$primary-color: hotpink;

// Mixin
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.my-element {
  color: $primary-color;
  width: 100%;
  overflow: hidden;
}

.my-other-element {
  @include border-radius(5px);
}

둘 중에 입맛에 맞는 걸 사용하면 된다. 👌
참고 : https://www.sitepoint.com/whats-difference-sass-scss/

📌 Sass의 핵심 원칙

Sass는 가능한 한 간단하게 유지되어야 한다.
보통의 CSS보다 더 복잡해서는 안 된다. KISS(Keep it Simple Stupid)이 핵심이다.
너무 코드를 줄이는 것에 집중하지 말자! 너무 복잡한 시스템은 유지관리가 오히려 어려워지는 문제점이 발생한다.

☠️ 코드는 목적이 아니라 수단에 불과하다.

📌 문자열

인코딩

메인 스타일 시트에서 @charset 'utf-8' 인코딩을 꼭 강제하라.

@charset 'utf-8';

따옴표

CSS에서 문자열을 따옴표로 둘러쌀 필요가 없다. ex)font-family 하지만 Sass에서는 이러한 소수의 예외사항을 제외하고 문자열은 언제나 single quote (' ') 로 감싸져야 한다.

// Yep
$direction: 'left';

// Nope
$direction: left;

// Yep
$font-type: sans-serif;

// Nope
$font-type: 'sans-serif';

// Okay I guess
$font-type: unquote('sans-serif');

따옴표를 포함한 문자열에서는 문자 이스케이프를 사용하거나 double quote("")를 사용하여 문자열을 감싼다.

// Okay
@warn 'You can\'t do that.';

// Okay
@warn "You can't do that.";

📌 숫자

0

1보다 작은 소수는 0을 표시해야 한다.

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}

단위

0값은 절대로 단위를 표시하지 않는다.
단위를 숫자에 붙이기 위해서 숫자에 1단위를 곱해준다. 반대로 제거 할 경우 1단위로 나누어준다.

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

// Yep
$value: $length / 1px;

// Nope
$value: str-slice($length + unquote(''), 1, 2);

📌 색

색과 변수

색을 여러 번 사용할 경우 변수에 저장해서 사용하자.

$sass-black:rgba(0, 0, 0, 1)

테마와 관련이 있는 변수라면 변수를 그대로 사용하지 않는 것을 권장한다. 그 변수의 용도를 설명하는 다른 변수에 다시 저장한다.

$main-theme-color: $sass-black;