SASS - 7장 Toast UI의 Sass 컨벤션

Toast UI의 Sass 컨벤션

.scss 문법을 사용한다.

들여쓰기 기반 .sass문법 대신 CSS에서 사용하는 모든 문법과 기능이 완전히 호환되도록 만든 .scss 문법을 사용하도록 한다.

/* .sass 문법 */
.black-div
  background: black
  border: 1px solid #ccc
  span 
    padding: 10px;

/* .scss 문법 */
.black-div {
  background: black;
  border: 1px solid #ccc;
  span {
    padding: 10px;
  }
}

1. 선언 순서

속성, @include, 중첩 선택자 순으로 선언한다. @include 선언 이후에는 개행을 한다.

.black-div {
  background: black;
  border: 1px solid #ccc;
  @include transition(background 0.5s ease)
    
  .icon {
    padding: 10px;
  }
}

변수명은 케밥 케이스를 사용한다.
변수명은 카멜 케이스(camelCase), 스네이크 케이스(snakecase) 방식보다 -를 사용하는 케밥 케이스(kebab-case)를 사용한다. 해당 파일에서만 쓰이는 경우 변수에 underscore(``)를 추가해서 사용할 수 있다.

/* Bad */
$mainColor: blue;
$main_color: blue;

/* Good */
$main-color: blue;

2. 믹스인

믹스인은 중복되는 스타일을 분리하거나 복잡한 스타일을 추상화하는 역할 등을 위해 마치 함수처럼 사용해야 한다. 특히 인자가 없는 믹스인은, Gzip과 같은 압축 과정 없이는 불필요한 중복 코드를 만들어낼 수 있으므로 주의한다.

@mixin button($color) {
  background-color: $color;
  border-radius: 5px;
  padding: .25em .5em;
  &:hover {
    cursor: pointer;
	background-color: $color;
	border-color: $color;
  }
}
.button-a {
  @include button(#b4d455);
}
.button-b {
  @include button(#c0ffee);
}

.button-a {
  background-color: #b4d455;
  border-radius: 5px;
  padding: .25em .5em;
}
.button-a:hover {
  cursor: pointer;
  background-color: #b4d455;
  border-color: #b4d455;
}

.button-b {
  background-color: #c0ffee;
  border-radius: 5px;
  padding: .25em .5em;
}
.button-b:hover {
  cursor: pointer;
  background-color: #c0ffee;
  border-color: #c0ffee;
}

3. Extend 지시자는 사용하지 않는다.

@extend는 직관적이지 않고 중첩 선택자와 함께 사용하게 될 때 문제가 발생할 수 있기 때문에 사용하지 않는다. Gzip과 믹스인을 사용하면 @extend 지시자 장점을 충분히 얻을 수 있다.

4. 선택자 중첩은 최대 3단계까지만 사용한다.

3단계를 넘으면 HTML과 너무 밀접하게 엮여있거나 재사용할 수 없는 CSS를 작성하고 있을 가능성이 크다.

.wrapper {
  .container {
    .content {
      ...
    }
  }
}

참고 : TOAST UI : FE-GUIDE
출처 : 인프런 - [초급] 40분만에 훑어보는 Sass