SCSS에서 변수 사용하는 방법

저번에는 CSS에서 변수를 사용하는 방법을 알아보았다.

그렇다면 당연히 SCSS 또한 변수를 사용하는 것 같아 개인 프로젝트에 투입하면서 찾아보게 되었다.

그리고 그 방법이 있고, 몇 가지는 정리하고 싶어서 적게 되었다.

 

 

 

1. Variables

1-1. 변수를 사용하는 방법

SCSS 변수는 다음과 같다.

$large-font: 3rem;
$small-font: 0.5rem;
$main-color: purple;

 

1-2. 변수를 실제 사용

변수를 실제 SCSS에 적용시 예시는 다음과 같다.

body{
    font-size: #{$large-font};
    color: #{$main-color};
}

 

 

2. Mixins

2-1. 믹스인 사용 방법

믹스인은 CSS를 여러개 묶어 재사용을 할 수 있는 모듈을 만들어 주는 기능이다.

다음은 믹스인의 예시이다.

@mixin button-design {
    border: 1px solid gray;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #000;
}

위 예시는 내가 버튼을 주로 쓰는 CSS를 묶어 예시로 만들었다.

이렇게 만든 경우 className을 남용하기보다는 이 모듈로도 간소화를 할 수 있다.

 

2-2. 믹스인 실제 사용 예시

믹스인을 위와 같이 만든 후 사용할 때, 예시는 다음과 같다.

button {
    @include button-design;
}

믹스인을 사용할 때는 @include 를 사용하여 된다.

 

믹스인을 컴파일을 하게 된다면 아래처럼 코드가 바뀐다.

button {
    border: 1px solid gray;
    border-radius: 50%;
    font-size: 1.5rem;
    color: #000;
}

 

 

 

이 사용법은 여러 방볍으로 다양하게 쓰일 수 있을 것 같다.

이전에는 button 디자인을 따로 scss 파일을 만들어서 사용하거나 className을 이용하여 넣었는데,

이런 방법을 이번에 찾으면서 처음 알았고 이번에 개인 프로젝트에 현재 적용 중에 있다.

적용 후에 다시 다른 이야기를 적어보려 한다.