Sass(Scss) Basics

LOSSS·2021년 1월 19일

CSS Sass

sass

Sass 란?

Sass 는 CSS Preprocessor 이다.
CSS 에 존재하지 않는 여러 기능 ㅡ 변수, 네스팅, mixins 등 ㅡ 을 제공하여 CSS 를 좀 더 편리하게 쓸 수 있게 한다.

Sass 자체로는 웹에서 사용할 수 없기 때문에 CSS 로 컴파일 하는 과정이 필요하다. 가장 직접적인 방법으로는 터미널에서 sass input.scss output.css 를 실행시키는 것이다.

Sass 의 장점

스타일시트를 쪼개서 관리할 수 있음
코드의 중복을 피할 수 있음
유지보수가 쉬움
기타 등등

Sass 의 단점

컴파일이 필요함
디버깅이 어렵다
기타 등등

Sass Basic Concepts

Variables

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

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

어떤 CSS 값이든 변수로 저장해서 사용할 수 있다.

Nesting

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

  li { display: inline-block; }

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

HTML 과 동일한 시각적 계층 구조를 가지도록 할 수 있다.

Partials

다른 Sass 파일에 포함할 수 있는 부분 Sass 파일을 만들 수 있다. 언더스코어로 파일 이름이 시작해야 CSS 파일로 컴파일되지 않는다. ( ex. '_style.scss') @use rule 과 함께 사용된다.

Modules

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

한 파일에 모든 Sass 를 적을 필요는 없다. @use rule 을 통해서 원하는만큼 파일을 나눌 수 있다. @use rule 은 다른 Sass 파일을 모듈로써 로드한다.

Mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

CSS 선언 그룹을 만들어 계속해서 재사용할 수 있다. @mixin 을 통해 mixin 을 만들고 @include 를 통해 이를 사용할 수 있다.

Extend/Inheritance

/* 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 를 통해 한 선택자가 다른 선택자를 이어 받을 수 있다.

Operators

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}