Sass(Scss) 정리

Sass(Scss)는 css preprocessor(전처리기) 중 하나입니다.

css를 편하게 쓸 수 있는 여러 기능들(nesting, mixins, inheritance 등)을 가진다는 점이 특징입니다.

Sass와 Scss는 그 내용은 같지만 문법적인 구조에서 약간의 차이를 가집니다.

가장 큰 차이는 Sass는 들여쓰기로 구분하고 ;을 사용하지 않는 반면, Scss는 {}를 사용하고 ;를 사용한다는 점이 특징입니다.

이 글에서는 Scss를 기준으로 글을 작성해보도록 하겠습니다.

1. 변수 선언

$변수 이름: 값

$w: 100px;
$my-color: #ffffff;

.container{
      $h: 200px !global;
      height: $h;
    width: $w;
      color: $my-color;
}

.button{
    height: $h;
}

!global을 이용하면 범위 내에서 선언된 변수를 전역으로 사용할 수 있습니다.

2. Nesting

scss는 중첩 선택자를 이용해 상위 선택자가 있는 경우에만 해당되는 선택자의 속성을 적용합니다.

이는 css의 자손 결합자(descendant combinator)와 같은 기능을 합니다.

.container{
    width: 100px;
    background-color: #ffffff;
    .item{
        color: red;
    }
}

1) &

$는 부모 선택자를 가리키는 역할을 합니다.

.button{
    &.pressed{
        color:red;
    }
}

/* 
    button.pressed{
          color:red;
      }
*/

.icon{
    &-small{
        width: 12px;
        height: 12px;
    }
    &-large{
        width: 24px;
        height: 24px;
    }
    @at-root .box{
        width:15px;
        height:15px;
    }
}

/* 
    icon-small{
        width: 12px;
        height: 12px;
    }
    icon-large{
        width: 24px;
        height: 24px;
    }
  .box{
        width:15px;
        height: 15px;
    }
*/

@at-root 키워드를 이용하면 중첩에서 벗어나서 사용할 수 있습니다.

2) 중첩된 속성

font-, margin-, padding과 같이 같은 네임스페이스를 가지는 속성들은 겹치는 이름을 생략해서 아래와 같이 사용할 수도 있습니다.

.container{
  margin:{
      top:10px;
    left:12px;
  }
}

/*
.container{
    margin-top:10px;
    margin-left:12px;
}
*/

3. Modules

다른 sass(scss) 파일을 참조해서 값을 가져올 수도 있습니다.

/* _variables.scss*/

$max-content-width: 720px;

/* styles.scss*/
@use variables
.container{
    max-width: variables.$max-content-width;
}

4. Mixins

mixin은 sass(scss)를 정의하고 정의된 스타일 가져와서 다른 스타일에 적용할 수 있습니다.

매개변수를 받아서 함수처럼 사용이 가능하고, 매개변수가 적용이 된 스타일을 사용할 수 있습니다.

@mixin button($bgColor: blue){
    background-color: $bgColor;
}

.signInBtn{
    @include button;
}

/*
.signInBtn{
    background-color: blue;
}
*/

.signUpBtn{
    @include button(red);
}

/*
.signUpBtn{
    background-color: red;
}
*/

5. Operator

operator를 이용하면서 사칙연산을 비롯한 수학 연산들을 사용할 수 있습니다.

@use "sass:math";

.container{
    width: math.div(600px, 960px)*100%;
}

/*
.container{
    width: 62.5%;
}
*/

Sass(Scss)는 extend 기능도 가지고 있지만 extend는 권장되지 않는다고 합니다. 이에 관련된 자세한 얘기는 여기서 확인하실 수 있습니다.

참고

https://sass-lang.com/guide

Sass: Sass Basics

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

Sass(SCSS) 완전 정복!