Sass & SCSS 개요

HTML & CSS / Sass & SCSS

CSS Preprocessor

CSS가 동작하기 전에 사용할 수 있는 기능. Sass, Less, Stylus 등이 있다. CSS 문법과 흡사하지만 선택자의 중첩, 조건문, 반복문, 단위의 연산등 표준 CSS보다 훨씬 많은 기능을 사용 하여 편하게 작성할 수 있다.

Sass와 SCSS의 차이점

SCSS는 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장했다. CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만들어졌다. SCSS 는 CSS와 거의 같은 문법이며 Sass의 모든 기능을 지원하는 CSS의 상위집합 이다.

간단한 차이 비교

  • Sass
    • { } 및 ; 사용하지 않는다.
    • 선택자의 유효범위는 들여쓰기
    • =와 + 기호로 Mixns 기능을 사용
    • 좀더 간결하고 작성시에 편리하다.
  • SCSS
    • { } 및 ; 사용한다.
    • 선택자의 유효범위는 중괄호
    • @mixin과 @include로 Mixns 기능 사용
    • 인라인 코드(한줄 작성) 작성 가능
    • CSS와 유사한 문법이라 통합하기 쉬움

Mixins(‘믹스인’): 재사용 가능한 기능을 만드는 방식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Sass
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

// SCSS
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

컴파일 방법

  1. SassMeister: 설치하지 않고 컴파일할 수 있는 사이트
  2. node-sass: Node.js를 컴파일러인 LibSass에 바인딩한 라이브러리
  3. Gulp: 빌드 자동화 도구(JavaScript Task Runner)
  4. Webpack: JavaScript 모듈화 도구
  5. Parcel: 웹 애플리케이션 번들러

주석

Sass

1
2
3
4
5
/* 컴파일되는
 * 여러 줄
 * 주석 */

// Error

SCSS

1
2
3
4
/*
컴파일되는
여러 줄 주석
*/

데이터 종류(Data Types)

데이터 설명 예시
Numbers 숫자.
단위가 있거나 없을 수 있음.		 1, .85, 20px, 2em…
Strings 문자.
문자가 있거나 없을 수 있음.		 bold, relative, “dotum”…
Colors 색상 표현 red, #FFFF00, rgba(255,0,0,.5)
Booleans 논리 true, false
Nulls 아무 것도 없음.
속성값으로 사용되면 컴파일하지 않는다.		 null
Lists 공백이나 , (쉼표)로 구분된 값의 목록.
( ) 소괄호를 붙이거나 붙이지 않는다.		 (bunny, kitten, puppy), bunny rabbit
Maps Lists와 유사하나 값이 Key: Value 형태.
( ) 소괄호를 꼭 붙여야 한다.		 (bunny: b, kitten: k, puppy: p)

중첩(Nesting)

상위 선택자의 반복을 피하고 좀 더 편리하게 작성할 수 있다.

SCSS

1
2
3
4
5
6
7
8
9
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

Compiled to CSS

1
2
3
4
5
6
7
8
9
.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

상위 선택자 참조 (Ampersand)

중첩 안에서 & 키워드는 부모 선택자를 참조하여 치환한다.

SCSS

1
2
3
4
5
6
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

Compiled to CSS

1
2
3
4
5
6
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

@at-root (중첩 벗어나기)

중첩을 벗어나고 싶을 때 @at-root 사용. 중첩 안에서 생성하되 중첩 밖에서 사용해야 할 때 주로 쓰인다.

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

Compiled to CSS

1
2
3
4
5
6
7
8
.list li {
  width: 100px;
  height: 50px;
}
.box {
  width: 100px;
  height: 50px;
}

중첩된 속성

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있다.

SCSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box {
  font: {
    weight: bold;
    size: 10px;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

Compiled to CSS

1
2
3
4
5
6
7
8
.box {
  font-weight: bold;
  font-size: 10px;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

변수(Variables)

반복적으로 사용되는 값을 변수로 지정할 수 있으며 변수 이름 앞에는 반드시 $ (달러 기호)를 붙여야 한다.

1
$변수이름: 속성값;

SCSS

1
2
3
4
5
6
7
8
$color-primary: #eee;
$url-images: "/assets/images/";
$w: 500px;

.box {
  width: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

Compiled to CSS

1
2
3
4
.box {
  width: 500px;
  background: #eee url("/assets/images/bg.jpg");
}

변수 유효범위(Variable Scope)

변수는 선언된 블록({ }) 내에서만 사용할 수 있다.

SCSS

1
2
3
4
5
6
7
8
.box1 {
  $color: #000;
  background: $color;
}
// Error
.box2 {
  background: $color;
}

변수 재할당(Variable Reassignment)

변수에 변수를 할당할 수 있다.

1
2
3
4
5
6
$yelloworange: #ffa800;
$color-primary: $yelloworange;

.box {
  color: $color-primary;
}

Compiled to CSS

1
2
3
.box {
  color: #ffa800;
}

!global (전역 설정)

!global 플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정한다. 기존에 같은 이름으로 사용하던 변수가 있다면 값이 덮어질 수 있다.

SCSS

1
2
3
4
5
6
7
.box1 {
  $color: #000 !global;
  background: $color;
}
.box2 {
  background: $color;
}

Compiled to CSS

1
2
3
4
5
6
.box1 {
  background: #000;
}
.box2 {
  background: #000;
}

!default (초깃값 설정)

!default 플래그는 할당되지 않은 변수의 초깃값을 설정하며 할당되어 있는 변수가 있다면 변수가 기존 할당값을 사용한다. ‘변수와 값을 설정하겠지만, 혹시 기존 변수가 있을 경우는 현재 설정하는 변수의 값은 사용하지 않겠다’ 는 의미. Overwrite하지 않는다.

SCSS

1
2
3
4
5
6
$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;
}

Compiled to CSS

1
2
3
.box {
  background: red;
}

#{ } (문자 보간)

#{}를 이용해서 코드의 어디든지 변수 값을 넣을 수 있다.

SCSS

1
2
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

Compiled to CSS

1
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

가져오기 (Import)

@import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다. 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다.

Sass @import가 CSS @import 규칙으로 컴파일되는 상황

  1. 파일 확장자가 .css일 때
  2. 파일 이름이 http://로 시작하는 경우
  3. url()이 붙어있을 경우
  4. 미디어쿼리가 있는 경우

SCSS

1
2
3
4
@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

여러 파일 가져오기

하나의 @import로 여러 파일을 가져올 수 있다. , (쉼표)로 구분.

SCSS

1
@import "header", "footer";

파일 분할(Particals)

파일을 나눠서 프로젝트를 진행할 경우, 파일이 많아질수록 관리가 어렵기 때문에 Partials 기능을 지원한다. 파일 이름 앞에 _를 붙여 @import로 가져오면 컴파일 시 ~.css 파일로 컴파일하지 않는다. Webpack이나 Parcel, Gulp 같은 일반적인 빌드툴에서는 Partials 기능을 사용할 필요 없이, 설정된 값에 따라 빌드된다. 되도록 _를 사용 할 것을 권장.

REFERENCE
https://heropy.blog/2018/01/31/sass/

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer