[ CSS ] SCSS - variables, nesting, mixins, extends

 

 

 

Scss /   Sass  

 

css preprossesor로 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공한다.

 

Scss와 Sass는 서로 다른 syntax를 가지고 있으나  Scss가 Sass를 위한 공식적인 syntax를 릴리즈하고 있다.

Scss는 업계 표준이 되어가며 css를 programming language처럼 만들고 있다.

 

[ Scss와 Sass의 차이점  ] 

Scss = 선택자의 유효범위를 {}로 구분

Sass = 선택자의 유효범위를 들여쓰기로 구분

 

 

 

---

1. variables

 

• 반복적으로 사용되거나 관리가 필요한 css 값들을 변수로 지정

 

1 ) _variables.scss 파일 만들어 [$변수명:값; ] 형식으로 작성 ( _가 파일명에 포함되면 css로 변하지 않음)

2) styles.scss 파일에 __variables.scss파일 import 하여 사용

 

 

 

---

 

 

2. nesting

 

• nesting을 통해 상위 선택자 반복을 줄일 수 있다.
• nesting 내부에서 &는 상위 선택자로 치환 -> nav:hover이 아닌 &:hover로 작성

 

요소들이 부모 - 자식관계를 갖는 경우 아래와 같이 작성 가능

  nav {
    font-size: 13px;
    width: 80%;
    ul {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      li {
        border-bottom: 1.5px solid $gray_font_color;
      }
    }
  }

변환되는 css 코드

nav {
    font-size: 13px;
    width: 80%;
}
  
nav > ul {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
 }
 
 nav > ul > li {
       border-bottom: 1.5px solid $gray_font_color;
 }

 

 

---

3.mixins

 

• 동일한 디자인에 상황에 따라 일부가 다른 디자인을 원할 때 사용

 

1) __mixins.scss에 scss코드를 작성  [ @mixin fuctionName(variables이 들어가는 자리$){ scss 코드 } ] 

2) __mixins.scss파일 import
3) @include name();를 원하는 곳에 삽입

 

 

아래의 코드를 보면 styles.scss의 button은 동일한 디자인(font-size, border-radius)을 갖지만

홀수번째인지 짝수번째인지에 따라 다른 color를 갖는다. ( 상황에 따른 디자인 변화 )

 

//mixins.scss
 
 @mixin link($color) {
  font-size:15px;
  border-radius:20px;
  color: $color;
}


//styles.scss
@import "mixins.scss"
button {
  &:nth-child(odd) {
    @include btn(red);
   }
   &:nth-child(even){
   @include btn(pink);
   }
  }

 

 

 

 

+ @if @else문 사용가능

 

//mixins.scss
@mixin btn($position) {
    font-size:15px;
    border-radius:20px;
    @if $position == "odd"{background-color:red;}
    @else if $position == "even" {background-color:orange;}
    @else if $position == "first" {background-color:yellow;}
}

//styles.scss
@import "mixins.scss";
  button {
    &:nth-child(odd) {
      @include btn("odd");
     }
     &:nth-child(even){
     @include btn("even");
     }
     &:first-child{
     @include btn("first");
     }
}

 

+ @content 사용 

 

다른 scss파일에서 작성한 scss코드가 mixins.scss @content로 들어가진다.

 

 

아래의 코드의 경우 content에 color:orange;가 들어가기에 h1의 글자색은 orange이다.

//mixins.scss
@mixin changeColor($device){
    @if $device == "iphone"{
       @content
    }
}


//styles.scss
@import "__mixins";

h1{
   color : red;
   @include changeColor("iphone"){
       color : orange;
     }
}

 

 

@content를 사용하는 이유
  :  코드의 중복을 줄이기 위해 사용한다. -> 코드 재사용

 

아래의 코드를 보며 이해해 보자.

( page1.scss는 page1.html에 대한 코드, page2.scss는 page2.html에 대한 코드이다. )

 

@content를 사용한 경우 서로 다른 페이지에 대한 scss여도 하나의 mixin을 재사용해

페이지마다 디자인이 다른 버튼 css 코드를 작성할 수 있다.

@content사용

 

 

그러나 @content를 사용하지 않는 경우 mixin을 페이지마다, 요소마다 개별적으로 만들어줘야 한다.

btn = page1의 button을 위한 mixin

btn2 = page2의 button을 위한 mixin

@content 미사용

 

 

즉 구조가 비슷한 mixin을 또 만들어야 하기에 코드 재사용의 의미가 사라져 버리기에 content를 사용한다.

 

 

---

4.extends

요소들이 동일한 디자인을 가져야 할 때

동일한 css를 여러 번 작성하는 것이 아닌 작성해 놓은 scss를 상속받아 사용 -> 코드 재사용을 높임

1) __extneds.scss파일에 %name{} 로 css 코드 작성
2) __extends.scss파일 import

3) @extend %name으로 사용

 

아래의 코드를 보면 동일한 버튼 디자인(%btn)을 상속받아 사용하고 

다르게 하고 싶은 디자인(border-radius)은 각자의 파일에서 변경한다.

 

//extends파일
%btn{
  font-size: 12px;
  padding: 5px 10px;
  background-color: peru;
  color: pink;
  font-weight: 500;
}

//styles.scss파일
@import "__extends.scss";
button{
  @extned %btn;
  border-radius:7px;
}

//또 다른 scss파일
@import "__extends.scss"
button:nth-child(1){
  @extend %btn;
  border-radius:50%;
}

 

 

---

 

mixin과 extends의 차이

extend를 사용하면 컴파일 시 css 파일에서 해당 속성을 가진 값들이 한 곳에 묶이게 된다.
ex) btn1, btn2, btn_3 { color: blue}

mixins를 사용하면 개별로 적용이 된다.
ex)

btn_1 { color: blue}
btn_2 { color: blue}
btn_3 { color: blue}