SCSS 파헤치기

09 August 2021 - 10 mins read time
Tags: CSS SCSS

CSS Preprocessor 란?

CSS 전처리기하고 합니다. CSS 전처리기에는 여러가지가 있는데 대표적으로 SASS, SCSS, LESS, Stylus가 있습니다.

이것은 CSS가 동작하기 전에 사용하는 기능으로, CSS의 불편함을 확장 기능으로 상쇄해줍니다.

SASS(SCSS)

이 둘은 거의 똑같다고 봐도 됩니다.

SCSS는 SASS문법에 단점들을 보완하여 나온 전처리기 입니다.

// SASS
.list
  width: 100px
  float: left
  li
    color: red
    &:last-child
      margin-right: -10px

// SCSS
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    &:last-child {
      margin-right: -10px;
    }
  }
}

위 예시를 보면 이 둘은 거의 똑같지만 {}와 ;의 차이가 있습니다. 기존 SASS의 직관적이지 않고 가시성을 보완하여 SCSS를 만들게 된것입니다.

Sassmeister

[SassMeister The Sass Playground!](https://www.sassmeister.com/)

SCSS문법을 테스트해보기에 좋은 사이트입니다.

Syntax

주석

// 한줄 주석

/*
여러줄 주석
*/

Data Types

제목 없음

중첩

// SCSS
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

Compiled to:

/* CSS */
.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

Ampersand (상위 선택자 참조)

중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환합니다

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

Compiled to:

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

중첩된 속성

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

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

Compiled to:

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

변수(Variables)

반복적으로 사용되는 값을 변수로 지정할 수 있습니다.

변수 이름 앞에는 항상 $를 붙입니다.

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

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

변수 유효범위(Variable Scope)

변수는 사용 가능한 유효범위가 있습니다.선언된 블록({}) 내에서만 유효범위를 가집니다.

변수 $color는 .box1의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서는 사용할 수 없습니다.

.box1 {
  $color: #111;
  background: $color;
}
// Error
.box2 {
  background: $color;
}

#{} (문자 보간)

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

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

가져오기(Import)

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

Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다.

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

재활용(Mixins)

Sass Mixins는 스타일 시트 전체에서 재사용 할 CSS 선언 그룹 을 정의하는 아주 훌륭한 기능입니다.약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다.

우선, Mixin은 두 가지만 기억하면 됩니다.선언하기(@mixin)와 포함하기(@include) 입니다.만들어서(선언), 사용(포함)하는 거죠!

@mixin

// 문법
@mixin 믹스인이름 {
  스타일;
}

// 예시
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

@include

선언된 Mixin을 사용(포함)하기 위해서는 @include가 필요합니다.

// 문법
@include 믹스인이름;

// 예시
h1 {
  @include large-text;
}
div {
  @include large-text;
}

인수(Arguments)

Mixin은 함수(Functions)처럼 인수(Arguments)를 가질 수 있습니다.

// 문법
@mixin 믹스인이름($매개변수) {
  스타일;
}
@include 믹스인이름(인수);

// 예시
@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }

함수(Functions)

자신의 함수를 정의하여 사용할 수 있습니다.함수와 Mixins은 거의 유사하지만 반환되는 내용이 다릅니다.

Mixin은 위에서 살펴본 대로 지정한 스타일(Style)을 반환하는 반면,함수는 보통 연산된(Computed) 특정 값을 @return 지시어를 통해 반환합니다.

// 문법
@function 함수이름($매개변수) {
  @return 값
}
// 사용시
함수이름(인수)

// 예시
$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns();  // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}

조건과 반복(Control Directives / Expressions)

if (함수)

조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환합니다.

조건부 삼항 연산자(conditional ternary operator)와 비슷합니다.

$width: 555px;
div {
  width: if($width > 300px, $width, null);
}

@if (지시어)

@if 지시어는 조건에 따른 분기 처리가 가능하며, if 문(if statements)과 유사합니다.

같이 사용할 수 있는 지시어는 @else, if가 있습니다.

추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있습니다.

// @if
@if (조건) {
  /* 조건이 참일 때 구문 */
}

// @if @else
@if (조건) {
  /* 조건이 참일 때 구문 */
} @else {
  /* 조건이 거짓일 때 구문 */
}

// @if @else if
@if (조건1) {
  /* 조건1이 참일 때 구문 */
} @else if (조건2) {
  /* 조건2가 참일 때 구문 */
} @else {
  /* 모두 거짓일 때 구문 */
}

** 모든 조건에 ()는 생략이 가능합니다.

** 조건에는 논리 연산자 and, or, not을 사용할 수 있습니다.

@for

@for는 스타일을 반복적으로 출력합니다. for 문과 유사합니다.

@for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다.두 형식은 종료 조건이 해석되는 방식이 다릅니다.

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

내장 함수(Built-in Functions)

Sass에서 기본적으로 제공하는 내장 함수에는 많은 종류가 있습니다.모두 소개하지 않고, 주관적 경험에 의거해 필요하거나 필요할 수 있는 함수만 정리했습니다.

Sass Built-in Functions에서 모든 내장 함수를 확인할 수 있습니다.

색상(RGB / HSL / Opacity) 함수

문자(String) 함수

숫자(Number) 함수