Sass(SCSS) 문법

🤔 SCSS의 핵심...이라고 생각하는 것

3 중첩은 개인적인 기준입니다.
저는 SCSS의 핵심은 중첩이라고 생각합니다. 보통 3 중첩 기준으로, MAX 4중첩으로 작성합니다.

3중첩을3 중첩을 기준으로 하는 이유는 3 중첩을 지키지 않고 작성하다 보면 코드 길이가 엄청 늘어나고, 컴파일된 CSS에도 엄청나게 많이 중첩된 클래스를 볼 수 있습니다.

4 중첩 이상 필요할 경우 아래와 같이 작성합니다.

#wrap {
  .A .B {
    color: red;
  }
}

📄 SCSS 문법

이번 글에서는 SCSS를 작성할 때, 기본적으로 많이 사용되는 문법을 위주로 써보겠습니다.

UTF-8 설정

코드 내에서 한글을 사용하려면 설정해야 합니다.

@charset "UTF-8";

상위 선택자

&을 사용하면 부모 선택자를 참조(치환)할 수 있습니다.
쉽게 말하자면, "부모 선택자를 가져와서 쓴다."라고 생각하시면 될 것 같습니다.

// SCSS

#wrap {
  color: black;

  &:hover {color: red;}
}

// CSS

#wrap {color: black;}
#wrap:hover {color: red;}

처럼 CSS 보면 #wrap:hover로 바뀐 것을 볼 수 있습니다.
또한, 클래스명에서도 사용이 가능합니다.

//SCSS

.web {
  font-size: 16px;

  &-font {
    font-size: 20px;

    &-content {font-size: 60px;}
  }
}

// CSS

.web { font-size: 16px; }
.web-font { font-size: 20px; }
.web-font-content { font-size: 60px; }

@import

@import는 외부 .scss, .css 파일을 불러와서 같이 컴파일됩니다.
또한, 불러온 파일의 Mixin, Extend 등을 사용할 수 있습니다.

@import "A.scss";

파일 분리

각 파일 앞에 _ 를 붙이면 .확장자를 안 붙이고 불러올 수 있다.
파일명: _header.scss

@import "A.scss";

@import "header";

 

 

@mixin

Mixin이 SCSS의 핵심기능이죠!
사용법:

@mixin 이름 {
  스타일
}

만약 Font CSS가 여러 곳에 똑같이 필요하다면 이렇게 작성할 수 있습니다.

@mixin CommonFont {
    font-weight: bold;
    font-size: 16px;
    font-family: "Noto";
}

@include

이제 만든 Mixin을 호출하려면 @include를 이용하면 됩니다.

@include 이름

또한, Mixin은 인수를 넣을 수 있습니다.

@mixin 이름() {
  스타일
}

저는 이 기능을 이용해서 주로 크로스 브라우징 할 때 사용합니다.

크로스 브라우징 이란?

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

또한, 기본 값이 필요할 경우

@mixin 이름($변수: 기본 값){
  스타일
}

@mixin border-radius($radius: 1px) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

#wrap{@include border-radius;}

이렇게 작성하면 border-radius: 1px로 컴파일됩니다.

참고로 @include를 호출할 때에는 꼭 맨 위에 작성해주세요.

// X
#wrap {
  color: red;

  @include border-radius;
}

// O
#wrap {
  @include border-radius;

  color: red;
}

@content

@content는 스타일 내용을 전달할 수 있습니다.

@mixin 믹스인이름 {
  스타일;
  @content;
}

@include 믹스인이름 {
  // 스타일 블록
  스타일;
}

예를 들면,

// SCSS
@mixin 이름 {
  color: red;
  @content;
}

.wrap {
  @include 이름;
}

.container {
  @include 이름 {
    font-size: 10px;
  }
}

// CSS

.wrap { color: #aa33aa; }
.container { color: #aa33aa; font-size: 10px; }

이렇게 @include안에 있던 내용까지 포함하여 컴파일됩니다.

또한, @content를 이용하여 @keyframes, @media 랑도 같이 쓸 수 있습니다.

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
      @content;
    }

    @-moz-keyframes #{$name} {
      @content;
    }

    @keyframes #{$name} {
      @content;
    }
}

@include keyfranes("animation") {
  from {color: black;}
  to {color: red;}
}

이런 식으로도 사용 가능합니다.

📰 참고 자료

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