개발/CSS, SCSS

SCSS(Sass 상위 호환) 사용하기 2편

duknock 2022. 9. 14. 11:24
반응형

1편을 안보신 분은 이거부터...

 

SCSS(Sass 상위 호환) 사용하기

Sass는 Syntatically Awesome Style Sheets 의 약어로, 해석하면 "문법적으로 간지나는 스타일 시트" 정도가 된다. SCSS는 Sass의 상위 호환이라고 보면 되는데, Sass 출시 이후에 문제점을 더 보완해서 나온 언.

duknock.tistory.com

 

1편에 이어서 2편에서는 SCSS의 다양한 기능을 알아보려고 한다.

 

mixin, extend 등 편한(?) 기능들이 있으니 한번 보자.

 

 

믹스인(mixin)과 include

 

@mixin은 함수 비스무리한거다.

 

반복적으로 사용할 CSS 문을 그룹으로 묶어서 하나로 정의해놓은거 라고 보면된다.

(함수 선언식이랑 비슷함)

 

@include 는 @mixin과 함께 항상 붙어다니는 놈이다.

 

@mixin으로 선언한 함수(?)를 불러오는 역할을 한다.

 

이 mixin과 include는 아마 SCSS를 작성하면서 가장 많이 사용할 기능 중 하나이니 꼭 숙지하는 것이 좋다.

 

@mixin myText {
    color: #ff0000;
    position: relative;
    &:hover{
        color: #00ffff;
    }
    &::after{
        content: '';
        display: block;
        width: 10px;
        height: 2px;
        position: absolute;
        bottom: -2px;
        left: 0;
    }
}

h3{
    @include myText;
}

 

이런식으로 CSS 문을 @mixin을 활용하여 하나의 그룹으로 묶고, 원하는 곳에 @include로 불러와서 사용할 수 있다.

 

내가 mixin을 주로 사용하는 곳은 바로 @keyframes(애니메이션), @media(미디어 쿼리) 등을 사용할 때이다.

 

SCSS에는 @keyframes, @media 를 바로 사용할 수 없다. 이유는 까먹음.ㅎㅎ

 

그래서 mixin으로 keyframes 혹은 media 함수를 만들어서 사용한다.

 

@mixin keyframes ($animation_name) {
    @keyframes #{$animation_name} {
        @content;
    }
}

 

keyframes라는 믹스인에 animation_name을 인수로 주면, @keyframes(animation_name){} 이 CSS파일에 작성되는 구조이다.

 

여기서 #{ } 이게 좀 생소할텐데, 별거 아니고 괄호 안에 들어간 인수를 그대로 문자열로 변환시키는 기능이다.

 

그리고 중괄호 안의 @content 부분은 나중에 CSS에 작성될 keyframe 에서 { } 안에 있는 지시사항을 그대로 받는 부분이다.

 

이렇게 믹스인을 선언한 후에 사용할 때에는,

 

@include keyframes (glow) {
    0% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(120%);
    }

    100% {
        filter: brightness(100%);
    }
}

 

위 코드처럼 사용하면 된다. 딱 보면 감이 올 것이다.

 

@mixin media_screen ($breakpoint){
    @media screen and (max-width: #{$breakpoint}) {
        @content;
    }
}

@include media_screen (1800px){
    html {
        font-size: 15px;
    }
}

 

미디어 쿼리는 이렇게 사용하면 됨

 

 

 

extend

 

미리 말하지만 @extend는 사용 안하는게 좋다.

 

@extend 문법은 여러 요소가 거의 같은 스타일을 공유하지만 일부 스타일만 다를 경우 유용하게 쓸 수 있다.

 

자바스크립트의 prototype 같은 개념이라고 보면 된다.

 

하지만 @extend는 미디어쿼리 내에서는 실행되지 않는다.

 

그래서 반응형 웹을 만들때 @extend 를 사용하면 CSS가 제대로 적용되지 않는 문제가 발생할 수 있다.

 

Sass Guideline 에서도 @extend는 사용을 권장하지 않는다.

쓰지말라면 쓰지말자. 다른 좋은거 많다.

 

.box {
    padding: 10px;
    color: $fff;
    cursor: pointer;
}

.surprise{
    @extend .box;
    background-color : #ff0000;
}

 

이런식으로 다른 요소의 스타일을 불러와서 다른 요소에 적용할 수 있다.

 

근데 개인적으로 찾기도 힘들고 계층구조가 이상해지는거 같아서 난 안쓴다.

 

차라리 아까 위에서 설명한 mixin을 쓰자.

 

 

 

@import

 

@import 는 CSS에서도 파일 불러올 때 많이 사용해 보았을 것이다.

 

SCSS에서도 @import로 다른 SCSS파일을 불러와 사용할 수 있다.

 

심지어 다른 SCSS에서 선언한 변수나 믹스인도 가져와서 사용 가능하다.

 

SCSS의 @import와 CSS의 @import가 다른점은

 

CSS는 @import로 파일을 불러올 때마다 http 호출을 하기때문에 속도 저하를 가져올 수 있지만,

(페이지가 로드될때 개발자도구-네트워크 탭을 들어가서 보면 CSS파일을 일일히 호출하는걸 볼 수 있다.)

 

SCSS @import는 컴파일 과정에서 @import로 불러오는 파일들을 다 가져오기 때문에 http 호출이 필요없어 속도저하가 발생하지 않는다.

 

@import "./reset.scss";

@import "./reset";
/* scss 확장자는 생략 가능하다. */

@import "./reset", "./color", "./animation";
/* 중간에 , 를 찍어서 여러개를 불러올 수 있다. */

 

@import 를 유용하게 쓰는 개꿀팁

변수와 @mixin은 따로 모듈화하여 SCSS 파일로 만들어서 @import 하는것이 관리하기 편하다.

 

이때 파일명 앞에 '_' 를 붙이면 CSS로 컴파일될 때 '_' 로 시작하는 파일명의 파일은 컴파일되지 않는다.

ex) '_reset.scss' 는 CSS로 컴파일되지 않고 SCSS파일로만 남아있는다.

 

예를 들어 _mixin.scss, _color.scss 파일을 만들고, 메인 SCSS파일에서 @import 하면 2개(_mixin.scss, _color.scss)의 파일 내용은 메인 SCSS 파일에 적용되지만 _mixin.scss, _color.scss 파일은 css로 컴파일 되지 않기 때문에 관리하기가 편리하다.

 

 

 

 

 

 

@function 은 진짜 그냥 함수다. 자바스크립트의 함수와 똑같다.

 

설명할 것도 없음. 그냥 함수임.

 

@function hello($name){
    @return "Hello, My name is #{$name}!";
}

div{
    content: hello("John"); /* "Hello, My name is John!" */
}

 

ㅇㅋ? 너무 쉽죠? 넘어갑시다.

 

 

 

 

조건문 (@if, @else if, @else)

 

 

우리가 흔히 아는 그 조건문이다.

 

다만 자바스크립트의 조건문과 다른점은, 거짓된 값을 표현할때 null 이나 false 를 사용하지 않고, not 을 사용한다는 점이다. 당연히 !== 도 사용할 수 없다.

 

@if($bool == true){
    /* .... */
}
@if not ($bool2 == true){
    /* .... */
}

 

@else if 와 @else 도 사용방법은 똑같다.

 

@if($num == 1){
    /* .... */
}
@else if($num == 2){
    /* .... */
}
@else{
    /* .... */
}

 

만약 조건에 따라 return 값을 주고 싶다면 @return 을 사용하면 된다.

(이쯤 되면 자바스크립트랑 매우 비슷하다. 스크립트언어라 그런가)

 

@function test($class_name){
    @if(#{$class_name} == 'success'){
        @return #00ff00;
    }
    @return #ff0000;
}

p{
    color: test('success'); /* #00ff00 */
}

 

 

 

반복문(@for)

 

@for 문도 자바스크립트와 비슷하다.

 

from과 to 로 얼마나 반복할건지 설정해주면 된다.

 

to 대신 through 를 사용할 수 있는데

 

to 는 해당 반복횟수 이전까지만 반복하고, through 는 해당 반복횟수까지 포함해서 반복한다.

(to 5일경우 4까지만 반복, through 5일경우 5까지 반복)

 

/* SCSS */

div{
    @for $i from 1 to 5 {
         &:nth-child(#{$i}){
            width: $i * 100px;
        }
    }
}

/* CSS */

div:nth-child(1) {
  width: 100px;
}
div:nth-child(2) {
  width: 200px;
}
div:nth-child(3) {
  width: 300px;
}
div:nth-child(4) {
  width: 400px;
}

 

 

 

 

이렇게 1편과 2편으로 SCSS에 관한 기본적인 것을 알아보았다.

 

SCSS는 한번 익숙해지면 정말 다시는 CSS파일을 건들기 싫을 정도로 편하고 생산성도 높아지기 때문에, 꼭 익히자.

(스타일시트 수정 같은건 SCSS로 빠르게 끝내버리고, 회사에서 유튜브 보면서 월급루팡하자!)

반응형
저작자표시 (새창열림)