[scss/sass] scss 사용법 익히기 (변수, nesting, @mixin, @extend)

1. 변수사용하기

 - 자주 쓰는 색상, 사이즈 등을 변수에 저장해서 불러오는 방법

/* 변수 지정하기 */

$mainColor: pink;
$subColor: skyblue;
$basicSize: 16px; 

/* 변수 불러오기 */
#header {background-color: $mainColor; font-size: $basicSize + 6px;}

지정한 변수는 연산도 가능하다. 단, 연산하려는 단위가 같아야 한다. px는 px와, %는 %와.... em은 em 과 연산 가능.

 

css로 컴파일 된 모습 

#header {
  background-color: pink;
  font-size: 22px;
}

 

2. Nesting 문법

- 자식 요소를 부모요소의 중괄호 안에 넣어서 표기하는 방식

  /* ul과 ul 안에 있는 li에 css 입히기 */
  
  ul { 
    background-color: $subColor;
    li {padding: 10px 5px; border-bottom: 1px solid reset.$resetColor;}
  }

 

css로 컴파일 된 모습

ul {
  background-color: skyblue;
}

ul li {
  padding: 10px 5px;
  border-bottom: 1px solid #da6f6f;
}

단, 3중 이상의 중괄호는 지양해야 한다고 한다. (하지만 나는 3중까지는 쓴다.)

 

3. @mixin and @include

- @mixin 은 함수 안에 css 코드 덩어리를 저장하는 것이다. 이 코드 덩어리는 @include로 불러와서 사용 한다.

- 함수 형태이니까 파라미터도 사용할 수 있다. 

 

** 파라미터 없는 mixin

/* mixin 함수 선언하기 */

@mixin mix() {
  padding: 10px 10px;
  border: 1px solid #ededed;
  overflow: hidden;
}


/* mixin 함수 사용하기 */

div {
  @include mix();
}

p {
  @include mix();
}

 

css 로 컴파일 된 모습 보기

div {
  padding: 10px 10px;
  border: 1px solid #ededed;
  overflow: hidden;
}

p {
  padding: 10px 10px;
  border: 1px solid #ededed;
  overflow: hidden;
}

같은 코드 덩어리가 들어가 있는 것을 볼 수 있다.

 

** 파라미터 있는 mixin

/* 함수 안에 파라미터 넣기 */

@mixin mix($fontSize) {
  padding: 10px 10px;
  border: 1px solid #ededed;
  overflow: hidden;
  font-size: $fontSize;
}

/* 파라미터 불러오기 */

div {
  @include mix(16px);
}

p {
  @include mix(28px);
}

js 함수를 사용하는 방식과 똑같다. 선언하는 함수 안에서 파라미터 값을 정해주고,

함수를 불러올 때 파라미터에 적용할 값을 넣어주면 된다. 

 

css로 컴파일 된 모습

div {
  padding: 10px 10px;
  border: 1px solid #ededed;
  overflow: hidden;
  font-size: 16px;
}

p {
  padding: 10px 10px;
  border: 1px solid #ededed;
  overflow: hidden;
  font-size: 28px;
}

파라미터는 여러개 쓸 수 있다. 또 파라미터 값안 에서 calc와 같은 연산도 가능하다. 

 

4. @extend and Inheritance

- @mixin의 파라미터 없는 방식이라고 생각하면 된다.

- class 안에 모듈처럼 작성해놓은 코드를 그대로 불러오는 방식이다.

- .btn 으로 모듈을 만들었으면 @extend .btn; 으로 불러오면 된다.

- #btn 으로 만들었으면 @extend #btn; 으로 불러옴

/* 코드 덩어리 만들기 - 일반적인 코드 형태로 작성하면 됨 */

.btn {margin: 10px; padding: 8px 12px; border: none; border-radius: 5px; font-size: $basicSize;}

/* 불러오기 */
.btn_yellow {@extend .btn; background-color: yellow;}

 

 

** 다른 방식으로 사용하기

-  모듈 이름 앞에 %를 붙여준다.

- .btn or #btn 처럼 html 태그 내에서 선언한 class나 id를 불러와서 사용하는 것이 아니라, extend에 사용할 모듈을 css내에서 선언하는 방식.... (ex. %btn)

- 불러오는 방식은 동일하다. %btn 으로 선언했으니 @extend %btn; 으로 불러온다. 

/* %btn으로 모듈화 */

 %btn {margin: 10px; padding: 8px 12px; border: none; border-radius: 5px; font-size: $basicSize;}

/* @extend %btn 으로 불러오기 */
.btn_blue {@extend %btn; background-color: blue; color: #ffffff;}
.btn_green {@extend %btn; background-color: green; color: #ffffff;}
.btn_yellow {@extend %btn; background-color: yellow;}

 

 

css로 컴파일 된 모습 보기(어떤 방식으로 선언해도 동일한 결과가 나옴)

.btn, .btn_yellow, .btn_green, .btn_blue {
  margin: 10px;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.btn_blue {
  background-color: blue;
  color: #ffffff;
}

.btn_green {
  background-color: green;
  color: #ffffff;
}

.btn_yellow {
  background-color: yellow;
}

 

 

** scss/sass 공식 문서

https://sass-lang.com/

Sass: Syntactically Awesome Style Sheets

** w3school 튜토리얼

https://www.w3schools.com/sass/default.php

Sass Tutorial