Sass - 컨벤션

# 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;
  }
}

$ 선언 순서

• 속성, @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;

믹스인

• 믹스인은 중복되는 스타일을 분리하거나 복잡한 스타일을 추상화하는 역할 등을 위해 마치 함수처럼 사용해야 한다.
• 특히 인자가 없는 믹스인은, 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);
}

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

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

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

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

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

추가

mixin 을 처음 부터 만들기가 쉽지 않을 수 있다.

깃허브 검색해서, 잘 만들어진 파일을 참고해보자!