/ CSS

Sass - CSS 전처리기

CSS는 다음과 같이 구성되어 있습니다.




오늘은 Sass가 뭔지 정리해보겠습니다.

CSS는 스타일을 넣어주는 역할을 합니다. 개발을 하다보면 코드가 길어지게되고 그만큼 CSS코드도 많아집니다. 또한 스타일지정이 반복되는 경우도 많고 관리하기도 힘들어집니다.

이런 문제들을 해결할 수 있는 CSS Preprocessor(전처리기)라는 것이 있습니다. 그중에 하나가 Sass입니다. Sass는 CSS와 동일하게 코드를 작성할 수 있는데 추가적으로 프로그래밍적인 문법이 추가된 것입니다. 예를 들어서 조건문이나 반복문, 변수 같은 것을 쓸 수 있는 것입니다.

환경세팅


VSCode 기준으로 익스텐션에서 “Live Sass Compiler”를 검색해서 설치해주시면 됩니다. image
이후에는 일반 css사용하는 것과 똑같은데 .css확장자가 아니라 .scss라는 확장자로 파일을 만들어서 코드를 작성합니다. 물론 브라우저는 이 css파일만 읽을 수 있습니다. 그래서 scss파일을 css로 바꿔줘야하기 때문에 “Live Sass Compiler” 익스텐션을 설치한 것입니다.

참고로 .sass라는 확장자로 파일을 만들 수도 있는데 .sass파일은 css를 작성할 때 중괄호를 쓰지 않는다는 점이 다르고 거의 차이가 없습니다. 개인적으로는 중괄호를 쓰는게 더 편하기 때문에 .scss확장자를 사용하는게 편하다고 봅니다.

image

scss파일에 코드를 작성했다면 vscode 하단에 다음과 같이 “Watch Sass” 버튼을 눌러주시면 됩니다. 그러면 알아서 변환된 css파일이 생성이 될 것이고, 그 변환된 css파일을 가져다 사용하면 됩니다.

Sass에서 변수사용하기


$big-size : 20px;
$middle-size : 15px;
$small-size : 10px;

.content {
    font-size: $middle-size + 3px;
}

이렇게 size를 $기호와 함께 변수로 저장해두고 그 값을 가져다 쓸 수 있습니다. 또한 사칙연산도 가능합니다.

물론 sass를 쓰지 않아도 var()를 사용해서 변수를 만들 수 있고, 사칙연산도 calc()를 사용하면 연산이 가능하지만, 개인적으로는 sass를 쓰는 게 더 편한 것 같습니다.

Nesting


.content p {
  font-size: 14px;
}
.content .btn {
  border-radius: 2px;
  background-color: black;
  color: white;
}

.content 안에 p태그와 “btn” 클래스를 가진 버튼이 있다고 가정해보겠습니다. p와 버튼태그에 접근하려면 위의 코드처럼 접근해야합니다. 위의 코드는 간단한 코드이기 때문에 상관없을 수 있지만, 코드가 길어지면 복잡해보일 수 있습니다.

.content {
    p { 
        font-size: 14px;
    }
    .btn {
        border-radius: 2px;
        background-color: black;
        color: white;
    }
}

그래서 sass를 사용해서 네스팅을 할 수 있습니다. 이전 코드보다 눈으로 보기에도 훨씬 좋아졌고 관리하기도 쉬워집니다.

@extend로 확장하기


%button {
    width: 50px;
    height: 30px;
    border-radius: 5px;
    font-size: 14px;
}

.yellow-button {
    @extend %button;
    background-color: yellow;
}

.black-button {
    @extend %button;
    background-color: black;
    color: white;
}

노란색버튼과 검은색버튼을 만들고 싶다고 가정해보면, 중복되는 코드를 “%”를 사용해서 위처럼 임시클래스로 정의해두고 각 버튼에 “@extend”를 사용하여 불러올 수 있습니다. 이렇게 하면 귀찮은 반복을 줄일 수 있는 장점이 있습니다.
참고로 %를 사용해서 정의한 임시클래스만 정의해놓으면 그 임시클래스는 컴파일되지 않습니다.

@Mixin & @include


위의 @extend와 유사하게 사용할 수 있는게 있습니다.

@mixin buttonDesign($bgColor, $color) {
    width: 50px;
    height: 30px;
    border-radius: 5px;
    font-size: 14px;
    background-color: $bgColor;
    color: $color;
} 

.yellow-button {
    @include buttonDesign(yellow, black); 
    // 함수처럼 사용이 가능함
    // 인자로 배경색은 노란색, 글자색은 검은색을 줌.
}

함수를 정의하고 호출하듯이 사용할 수 있는 것이 @Mixin 입니다.
“@extend”에서 만든 것처럼 노란색 버튼을 위처럼 만들 수 있습니다.
“@mixin”을 붙인후 함수처럼 위와 같이 정의해준 후, 그 함수를 불러오듯이 “@include”로 가져오면 됩니다. “@extend”와의 차이는 위처럼 매개변수를 넣을 수 있다는 것입니다.

@use

외부 css코드를 가져오고 싶을 때 @use를 사용할 수 있습니다.

@use '_init.scss";

일반적으로 import하는 것과 같다고 볼 수 있습니다.
“@use”와 함께 경로를 써주면 됩니다. 확장자는 생략가능합니다.

외부에서 불러온 css파일에서 정의된 변수를 사용하고 싶다면 “파일이름.$변수이름”으로 접근할 수 있습니다.

추가로, 종속되는 파일과 같이 단독으로는 컴파일할 필요가 없는 파일들은 파일명 앞에 “_“를 붙여서 컴파일을 하지 않도록 할 수 있습니다.




End.