Written by JJoo
on May 18, 2023

scss 주요 문법-2

scss의 주요 문법을 정리해봅니다.

이번 글에서는 scss에서 @를 붙여 사용하는 주요 문법들을 살펴볼 계획입니다.

1. @mixin, @include

scss에서 가장 많이 쓰이고 가장 중요한 기능이라고 생각되는 mixin 입니다.

mixin은 스타일 시트에서 반복적으로 사용되는 기능들을 한데 모아 선언해놓고 필요한 부분에서 간편하게 include 해서 사용하는 기능입니다.

찍어내기 틀이라고도 부르더라구요.

@mixin은 @include와 짝꿍을 이뤄서 사용됩니다.

사용예시 )

@mixin 믹스인1 {
  // 스타일 선언 
}
// 사용할 부분에서 선언 
.blabla {
  @include 믹스인1
}

javascript에서 공통 함수로 정의해 사용하는 방식과 비슷합니다.

공통으로 정의되야 하는 속성들을 한군데에 모아 선언해서 사용하니 수정사항 발생시에도 믹스인 부분만 수정하면 되니 수정이 용이합니다.

개인적으로 font, media query, $map함수 관련 등을 선언해서 사용하니 아주 편하더라구요.

이 mixin은 단순히 선언 -> @include로 호출만 하는 것이 아니라 js의 함수처럼 인자를 넘겨줄 수도 있습니다.

즉 함수처럼 사용처에서 인자를 넘겨주면서 사용처마다 값을 다르게 설정할 수도 있다는 이야기입니다.

ex)

@mixin font-scale($scale, $size){
  .font-size-#{$scale}{
    font-size: #{$scale};
  }
}

$scale과 $size를 인자로 받아 사용처마다 다르게 font-size를 다르게 설정합니다.

보간법으로 class명도 동적으로 설정해서 class명마다 size가 설정되도록 한 코드입니다.

보간법이나 $map 함수를 잘 활용하면 보다 더 간편하게 모듈화를 시켜 스타일을 정의할 수 있습니다.

인자의 갯수를 유동적으로 지정해야 할 경우에는 javascript처럼 …로 가변인자를 넘겨줄 수도 있습니다.

@mixin blabla($args...) {
 ... 
}

2 @content

@mixin을 @include해서 사용할 때 @content를 사용해서 사용처에서 내용을 추가해줄 수 있습니다.

react에서 element안에 {children}으로 컨텐츠를 넘겨주는 것과 같은 개념.

개인적으로 madia query에서 사용하기 매우 유용하다 생각합니다.

ex.

@mixin media-desktop-l {
  @media only screen and (min-width: #{$--breakpoint-desktop-l}px){
    @content;
  }
}

.title {
  @include media-desktop-l {
    color: red;
  }
}

3. @extend

include와 비슷하게 동일하게 공통적으로 사용되는 속성을 가져와 사용할 수 있습니다.

정의된 클래스나 선택자를 가져와 확장시켜줍니다.

사용방법은 아래와 같습니다.

.button {
  width: 80px;
  height: 32px;
  background-color: blue;
}

.button-error {
  @extend .button;
  backgorund-color: red;
}
.button-success {
  @extend .button;
  backgorund-color: green;
}

extend는 확장시킬 기본 스타일 선언이 필요하기 때문에 위 예시에서는 class로 extend 시켜주었는데요.

굳이 class를 뽑아서 정의하지 않아도 되는 상황이 있을 거에요.

그럴때는 %로 extend 시킬 속성들을 선언해줄 수 있습니다.

ex.

%button {
  width: 80px;
  height: 32px;
  background-color: blue;
}

.button-error {
  @extend .button;
  backgorund-color: red;
}
.button-success {
  @extend .button;
  backgorund-color: green;
}

위 코드처럼 사용하면 %button은 컴파일되지 않고 .button-error와 .button-success로 확장되기만 합니다.

주의할 점

@extend는 media query내에서 실행되지 않습니다.

그래서 반응형 작업을 할 때 사용하면 안됩니다.

scss 가이드에서도 @extend의 사용을 권장하고 있지 않는 다고 합니다.

@extend와 @include는 흡사해보이지만 큰 차이가 있는 데요. 아래에서 살펴봅시다.

@mixin & @include vs @extend

@mixin & @include과 @extend는 비슷해보이지만 큰 차이가 있습니다.

컴파일 되는 방식에 큰 차이가 있는 데요

mixin 예시입니다.

@mixin set-border{
  border: 1px solid gray;
}
.title_01 {
  @include set-border;
  color: red;
}
.box_01 {
  @include set-border;
  color: blue;
}

이 코드가 컴파일 되면 아래처럼 출력됩니다.

.title_01 {
  border: 1px solid gray;
  color: red;
}
.box_01 {
  border: 1px solid gray;
  color: blue;
}

extend 예시입니다.

.border{
  border: 1px solid gray;
}
.title_01 {
  @include set-border;
  color: red;
}
.box_01 {
  @include set-border;
  color: blue;
}

이 코드가 컴파일 되면 아래처럼 출력됩니다.

.border, .title_01, .box_01{
  border: 1px solid gray;
}
.title_01 {
  color : red;
}
.box_01 {
  color : blue;
}

차이가 보이시나요?

include로 넣은 속성은 속한 클래스, 선택자 내부에서 정의 되어집니다.

extend로 확장한 속성은 extend가 들어간 해당 선택자들이 한군데 취업되어 상단에서 정의되어집니다.

그렇기때문에 extend를 사용할 때는 연관성있는 한 그룹의 선택자들안에서 사용하는 것이 컴파일 된 css 파일의 가독성을 해치지 않을 거에요.

button 속성은 button 선택자들 안에서만 extend 시키는 걸로 !

referance

Discussion and feedback

← → Top