Sass 시작하기

---

Sass Official site : Sass

Install Sass

npm

npm install -g sass

brew

brew install sass/sass/sass

Sass의 특징

컴파일이 필요하다

1. Sass는 웹에서 바로 동작할 수 없다.
2. Sass가 CSS가 되기 위한 컴파일이 필요한 것이다.
3. 따라서 Sass는 CSS를 더 효율적으로 구축하기 위한 'CSS 전처리 라이브러리'라고 할 수 있다.

변수

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

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

1. $변수를 통해 변수를 선언할 수 있다.
2. 변수에 담은 디자인을 재사용할 수 있는 강점이다.

중첩

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

1. html을 구축할 때 부모 DOM과 자식 DOM이 있다.
2. 부모 DOM에서 공통적인 디자인을 처리하고 그 안에 중첩되는 자식의 DOM에서 개별적인 디자인을 처리하면 어떨까?
3. 이렇게 되면 가독성도 좋을 뿐더러 재사용 또한 가능해진다.
4. !주의점 : 대신에 재사용이 자유로워서 세부적인 디자인을 하면 할수록 동일한 class가 생겨 사용하고 싶은 디자인을 찾기가 어려울 수 있다.

모듈 사용

// styles.scss
@use 'base';

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

1. @use를 통해서 모듈을 불러올 수 있다.
2. 이렇게 되면 style.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);
}

1. @mixin을 선언함으로써 디자인을 그룹화하고 디자인 컴포넌트를 만들 수 있다.
2. @mixin으로 선언 후 @include를 통해서 컴포넌트를 사용한다.
3. $theme 또한 변수이며 이를 background 필드에 사용했다.
4. 따라서 매개변수에 background를 받아서 재사용할 수 있는 셈이다.