쓸만한 SASS 기본 기능들

1. 주석

css에서는 // 이 주석을 사용할 수 없지만

sass에서는 가능하다.

 

2. Nesting

아래처럼 중첩해서 사용할 수 있어 보기도 좋고 코드량도 줄어든다.

 

div {

    font-size: 20px;

    div {

        font-size: 10px;

    }

}

 

3. 변수

손쉽게 변수를 사용할 수 있다.

 

$login-color: rgb(215, 215, 215);

div {

    background-color: $login-color;

}

 

4. 상위 선택자

.block {

    &__element {

    }

}

 

위와 아래는 동일하다.

 

.block {

}

.block__element {

}

 

5. Import

다른 scss 파일을 가져온다.

 

@import "variables"; // variables.scss 파일의 내용을 가져온다.

 

6. Mixins

@mixin red {

    color: red;

}

p {

    @include red;

}

 

위와 아래는 동일하다.

 

p {

    color: red;

}

 

함수 형태로도 쓸 수 있으니 아래 링크를 참고하자.

 

참고 : https://heropy.blog/2018/01/31/sass/