Sass Style Guide

Sass

문법

• 항상 .sass가 아닌 .scss 문법을 사용해주세요.
• 일반적인 CSS와 @include 선언은 논리적으로 순서를 정리해주세요. (아래 예시를 참조)

속성 선언 순서

1. 속성 선언

   우선 표준 속성 선언을 먼저 작성합니다. @include 혹은 중첩 선택자는 아직 적지 않습니다.

   .btn-green {
     background: green;
     font-weight: bold;
     // ...
   }

2. @include 선언

   @include를 마지막에 모아놓으면 전체 선택자를 쉽게 독해할 수 있습니다.

   .btn-green {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
     // ...
   }

3. 중첩 선택자

   중첩 선택자는 마지막에 위치합니다. 그리고 그 다음으로는 아무것도 적지 않습니다. 규칙 선언부와 중첩 선택자 사이에는 여백을 추가하며, 중첩 선택자 사이에도 마찬가치입니다. 중첩 선택자 내부 속성들 또한 위의 규칙을 따릅니다.

   .btn {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
   
     .icon {
       margin-right: 10px;
     }
   }

변수

변수 이름을 정할 때는 -를 사용하는 것을 권장합니다. 같은 파일 내에서만 사용될 변수에 한해서는 접두어를 추가해도 괜찮습니다. (예- $_my-variable).

믹스인-Mixins

Mixin은 코드를 DRY하게 하고 명료하게 하며, 복잡성을 줄이기 위해 사용해야 합니다. 인자를 받지 않는 Mixin은 이럴 때 유용합니다. 하지만 만약 당신이 payload를 압축하지 않는다면(예- gzip), 불필요한 코드 중복이 발생하게 됩니다.

Extend 지시자

@extend는 직관적이지 않고 특히 중첩 선택자와 함께 사용할 때 위험성이 있기 때문에 사용하지 않는 것을 권장합니다. 심지어 최상위 placeholder 선택자를 extend해도 선택자들의 순서가 바뀌게 되면 문제가 발생할 수 있습니다. @extend를 사용함으로써 얻을 수 있는 이점은 Gzip을 사용하면 해결될 뿐더러, 스타일시트를 DRY하게 만들기 위해서는 mixin을 사용하면 됩니다.

중첩 선택자

중첩은 최대 3번까지!

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

만약 선택자가 이렇게 길어진다면, 당신은 다음과 같은 CSS를 작성하고 있을 가능성이 높습니다:

• HTML과 밀접하게 엮여있다.(망가지기 쉬움)
• 너무 구체적이다.
• 재사용할 수 없다.

강조: 절대로 ID 선택자는 중첩하지 마세요!

어쩔 수 없이 ID 선택자를 사용해야한다면(사용하지 않는 것이 가장 좋습니다.), 절대로 중첩되지 않도록 유의하세요. 만약 중첩시키게 된다면, 왜 그렇게 특수한 케이스가 발생하는지 먼저 고민해보는 것이 좋습니다. 만약 당신이 잘 구성된 HTML과 CSS를 사용한다면 절대로 이렇게 할 필요가 없습니다.