SASS란?

CSS 전처리기
CSS를 확장하는 스크립팅 언어로써, 컴파일러를 통해 브라우저에서 사용할 수 있는 일반 CSS문법형태로 변환

변수(Variable)

1. 변수로 사용가능한 형태는 숫자, 문자열, 폰트, 색상, null, lists와 maps가 있음
2. 변수를 사용할 때는 $문자를 사용함

Sass

$primary-color: #333;

body {
    background-color: $primary-color;
}

CSS

body {
    background-color: #333;
}

변수 범위

Sass의 변수에는 변수범위가 있음
변수를 특정 선택자에서 선언하면 해당 선택자에서만 접근이 가능함

Sass

$primary-color: #333;

body {
  $primary-color: #eee;
  background-color: $primary-color;
}

p {
  color: $primary-color;
}

CSS

body {
  background-color: #eee;
}

p {
  color: #333;
}

변수를 선언할 때 global하게 설정하려한다면 !global플래그를 사용함

Sass

$primary-color: #333;

body {
  $primary-color: #eee !global;;
  background-color: $primary-color;
}

p {
  color: $primary-color;
}

CSS

body {
  background-color: #eee;
}

p {
  color: #eee;
}

추가적으로 !default플래그는 해당 변수가 설정되지 않았거나 값이 null일때 값을 설정함
추후 mixin을 작성할 때 유용하게 사용됨

수학 연산자(Math Operators)

주의할점
+, - 연산자를 사용할 때는 단위를 언제나 통일시켜야함

오류 예시
$box-width: 100% - 20px
해당 작업을 해야한다면 calc()함수를 사용하면 됨

Sass

.container { width: 100%; }


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

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

CSS

.container {
  width: 100%;
}

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

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

내장함수(Built-in Functions)

참조사이트

중첩(Nesting)

Sass의 매우 유용한 기능 중 하나는 선언을 중첩시킬 수 있다는 것
부모 선택자를 참조할때는 &문자를 사용함

CSS

/* CSS */
.container {
    width: 100%;
}

.container h1 {
    color: red;
}

Sass

/* Sass */
.container {
    width: 100%;
    h1 {
        color: red;
    }
}

중첩에서 벗어나려면?

@at-root지시자를 사용함

Sass

.container {
  .child {
    color: blue;
  }
  @at-root .sibling {
    color: gray;
  }
}

CSS

.container .child {
  color: blue;
}
.sibling {
  color: gray;
}

인셉션규칙

중첩 시 4레벨보다 깊게 들어가지 말 것

불러오기(Import)

import기능은 스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능

@import 'layout.scss';

or

@import 'layout';

상속(Extend)

Sass에서 특정 선택자를 상속 할때, @extend 지시자를 사용합니다

Sass

.box {
  border: 1px solid gray;
  padding: 10px;
  display: inline-block;
}

.success-box {
  @extend .box;
  border: 1px solid green;
}

CSS

.box, .success-box {
  border: 1px solid gray;
  padding: 10px;
  display: inline-block;
}

.success-box {
  border: 1px solid green;
}

Placeholder 선택자 %를 사용하면 상속은 할 수 있지만 해당 선택자는 컴파일되지 않음

Sass

%box {
  padding: 0.5em;

}

.success-box {
  @extend %box;
  color: green;
}

.error-box {
  @extend %box;
  color: red;
}

CSS

.success-box, .error-box {
  padding: 0.5em;
}

.success-box {
  color: green;
}

.error-box {
  color: red;
}

믹스인(Mixin)

Sass의 핵심기능중 하나
extend와 비슷하지만 argument(인수)를 받을 수 있음
mixin을 선언할 때는 @mixin directive를 사용하며, 이를 사용할 때는 @include directive를 사용함

Sass

@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(green, 12px);
}

CSS

h1 {
    color: green;
    font-size: 12px;
}

응용

#{}표현은 특정 문자열을 다로 처리하지 않고 그대로 출력할 때 사용됨
@content지시자를 사용하면 나중에 @include했을 때, 그 선택자 내부의 내용들이 @contnet부분에 나타나게 됨

Sass

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

CSS

.container {
  width: 900px;
}
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

함수(Function)

mixin과 비슷하지만 차이점은
mixin은 style markup을 반환하지만
function은 @return directive를 통해 값을 반환함
@function지시자 사용

Sass

@function calc-percent($target, $container) {
  @return ($target / $container) * 100%;
}

@function cp($target, $container) {
  @return calc-percent($target, $container);
}

.my-module {
  width: calc-percent(650px, 1000px);
}

CSS

.my-module {
  width: 65%;
}

추가참고자료

• The Sass Way
• Sitepoint Sass Reference