들어가며

오늘도 SCSS를 공부했다. 확실히 CSS만 사용하는 것보다 훨씬 간편한 것 같다.

@extend

특정한 선택자로 이미 만들어진 스타일을 가져와서 사용할 수 있다.

1  
2  .btn {
3      width: 100px;
4      height: 100px;
5      background-color: gray;
6  }
7  
8   
9  
10  .btn-primary {
11      background-color: blue;
12  }

위와 같이 스타일이 정의되어 있다고 하자. .btn 선택자에 스타일이 정의되어 있고, .btn-primary 선택자에 .btn 에 정의된 스타일을 상속(또는 확장) 받고 싶다. 이 때 .btn-primary 내부에 @extend 규칙을 통해 스타일을 상속 받을 수 있다.

1  /* SCSS */
2  .btn {
3      width: 100px;
4      height: 100px;
5      background-color: gray;
6  }
7   
8  .btn-primary {
9      @extend .btn;
10      background-color: blue;
11  }

1  /* 컴파일 된 CSS */
2  .btn, .btn-primary {
3      width: 100px;
4      height: 100px;
5      background-color: gray;
6  }
7   
8  .btn-primary {
9      background-color: blue;
10  }

.btn 선택자와 .btn-primary 선택자에 같은 속성이 적용되는 것을 볼 수 있다.

주의할 점: 전혀 의도하지 않은 선택자가 만들어지는 선택자 폭발이라는 부작용이 발생할 수 있다. 중첩을 사용할 때에는 @extend 규칙을 사용하지 않는 것이 좋다. 꼭 필요한 경우가 아니라면 @mixin 규칙을 사용하는 것이 좋다.

placeholder 선택자

% 기호를 사용한다. 기존에 클래스 선택자나 id 선택자를 사용하기 위해서 . 이나 # 을 사용했는데, %도 사용할 수 있다. @extend 규칙을 사용하는 확장을 위해서만 사용하는 선택자이다.

1  %btn {
2      width: 100px;
3      height: 100px;
4      background-color: gray;
5  }
6   
7  .btn-primary {
8      @extend %btn;
9      background-color: blue;
10  }

@media 규칙을 사용할 때 외부에서 선언한 placeholder 선택자를 사용하려고 하면 오류가 발생한다. 이때에도 @extend 대신 @mixin 규칙을 사용하면 해결할 수 있다.

함수

자바스크립트에서 사용하는 함수의 개념과 동일하다. @mixin 규칙과도 비슷하게 사용할 수 있다. @function 키워드를 사용해 함수를 선언할 수 있다. 값 반환을 위해서 @return 을 사용한다.

1  @function grid() {
2      @return 123;
3  }
4   
5  .box1 {
6      width: grid();
7  }

@function 키워드는 믹스인에서 사용한 것처럼 매개변수를 받을 수 있고, 매개변수의 기본값을 지정하거나 전개 연산자를 사용할 수 있고, 키워드 인자를 전달할 수도 있다.

주의할 점

SCSS에는 내장 함수들이 있다. 함수를 정의할 때 내장함수의 이름과 중복될 수 있기 때문에 함수 이름을 두 개 이상의 단어로 정의하고 단어와 단어사이를 붙임표로 연결해 작성하면 중복을 피할 수 있다.

조건과 반복

@if 키워드를 사용해 조건문을 사용한다. 자바스크립트에서는 조건문을 작성할 때 소괄호 안에 조건을 작성했는데, SCSS의 경우 소괄호를 생략해서 사용할 수 있다.

1  @function test($condition:true) {
2      @if $condition {
3          background-color: green;
4      }
5  }

자바스크립트와 마찬가지로 else, else if 를 사용할 수 있는데 if를 사용한 것과 같이 앞에 @ 기호를 붙여서 사용하면 된다.

1  @if $condition == cond1 {
2      ...
3  } @else if $condition == cond2 {
4      ...
5  } @else {
6      ...
7  }

@each ... in 키워드를 사용해 반복문을 사용할 수 있다. List 데이터와 Map 데이터를 순회할 수 있다.

1  /* SCSS */
2  $sizes: 20px, 40px, 80px;
3  $fruits: (apple: 'A', banana: 'B', cherry: 'C');
4  
5  //List
6  @each $size in $sizes {
7      .box-size-#{$size} {
8          width: $size;
9          height: $size;
10      }
11  }
12   
13  // Map
14  @each $key, $value in $fruits {
15      .fruit-#{$key}::after {
16          content: $value;
17      }
18  }

1  /* 컴파일 된 CSS */
2  .box-size-20px {
3    width: 20px;
4    height: 20px;
5  }
6   
7  .box-size-40px {
8    width: 40px;
9    height: 40px;
10  }
11   
12  .box-size-80px {
13    width: 80px;
14    height: 80px;
15  }
16   
17  .fruit-apple::after {
18    content: "A";
19  }
20   
21  .fruit-banana::after {
22    content: "B";
23  }
24   
25  .fruit-cherry::after {
26    content: "C";
27  }

@for 키워드를 사용해 자바스크립트의 for문 처럼 사용할 수 있다. 단 from과 through 키워드를 사용한다.

1  .list {
2      position: relative;
3      top: 0;
4      @for $i from 1 through 3 {
5          .item {
6              width: 100px * $i;
7          }
8      }
9  }

through 키워드 대신 to 키워드를 사용할 수 있는데, through는 <=, to는 <를 의미한다.

@while 을 사용할 수도 있다. 자바스크립트의 while문과 동일하다. 소괄호는 생략할 수 있다.

1  .list {
2      position: relative;
3      .item {
4          $i: 1;
5          $n: 8;
6          @while ($n > 0) {
7              &:nth-child(#{$i}) {
8                  width: 100px * $n;
9                  height: 100px * $i;
10              }
11              $i: $i + 1;
12              $n: $n - 2;
13          }
14      }
15  }

@import

CSS에서 사용하는 @import 키워드와 동일하다. 다른 파일을 가져와서 사용할 수 있다.

1  // variables.scss
2  $primary: blue;
3  $error: red;
4  $success: green;

1  // main.scss
2  @import "./variables.scss";
3   
4  .main {
5      background-color: $success;
6  }

위와 같이 사용한다. 그런데 만약 위와 같이 main.scss와 variables.scss 파일을 만들어서 CSS로 컴파일을 하게 되면 variables.scss 파일은 변수 선언만 하기 때문에 CSS로 변환하면 해당 CSS 파일에는 아무 내용도 들어가있지 않다. 이 때 variables.scss 파일명 앞에 언더바를 붙이면 컴파일 과정에서 별도의 CSS 파일로 컴파일 하지 않는다.

@use를 사용해 네임스페이스를 사용할 수 있다.

1  @use "./variables"

위와 같은 방법으로 파일을 불러올 수 있고 해당 파일 내의 변수는 아래와 같이 사용할 수 있다.

1  background-color: variables.$primary;

기본적으로 네임스페이스는 파일명으로 지정되는데 다른 값으로 사용하고 싶다면 파일명 뒤에 as 키워드를 사용해 정의할 수 있다.

@forward

현재 파일에서 사용하는 모듈을 파일 외부로 전달하기 위해 사용한다. @use 키워드와 마찬가지로 as를 사용해 이름을 정의할 수 있지만 앞에 접두사를 적용해서 사용해야한다.

1  @forward "./variables" as var-*;

컴파일

SCSS는 컴파일을 통해 CSS 파일을 생성한다. 컴파일을 위해서 sass 패키지를 설치한다.

1  npm install -g sass

내장 모듈

Sass에는 이미 만들어진 내장 모듈이 존재한다. 내장 모듈을 불러오기 위해서는 잠깐 위에서 살펴봤던 @use 키워드를 사용한다.

1  @use "sass:color";

@use 를 사용하고 sass: 와 함께 내장 모듈의 이름을 붙여 가져올 수 있다. 다양한 내장 모듈이 있는데 공식 문서에 설명이 자세히 나와 있는 것 같다. sass 내장 모듈 바로가기

디버그

자바스크립트에서 console.log() 를 사용해 디버그 하는 것처럼 SCSS에서도 디버그를 진행할 수 있다.

1  .box {
2      width: 100px;
3      height: 200px;
4      @debug "Hello SCSS!";
5  }

위와 같이 작성한 후에 CSS로 컴파일 하면, 컴파일 과정에서 콘솔에 디버그에 작성한 메시지를 출력해준다.

@debug 이외에도 @warn, @error 가 있다. @error 를 사용해 메시지를 작성하면 컴파일이 정상적으로 이뤄지지 않는다.

정리

사실 과제 마감 기한이 얼마 안남아서 과제에 집중하느라 공부한 내용을 엄청 대충 정리했다. 과제할 때 SCSS 사용하면서 복습해보고 과제 제출하면 다시 한번 정리해봐야겠다.