널리 사용되는 sass코딩 컨벤션을 토대로 정리한 내용입니다.

1. 폴더 구조

root 
  ㄴ src
      ㄴ scss
          ㄴ common
          ㄴ import
              ㄴ * (선택)
          ㄴ lib (선택)
       ㄴ css
       ㄴ img
       ㄴ *.html
  • Root/src/ 외에는 자유롭게 관리한다.

2. 파일 구조

scss
ㄴ 서비스명.scss
ㄴ common 
    ㄴ _base.scss 
    ㄴ _variables.scss
    ㄴ _mixins.scss
    ㄴ _placeholders.scss
ㄴ import
    ㄴ _*.scss
    ㄴ * (선택)
ㄴ lib (선택)
    ㄴ _*.scss

common

  • _base.scss : resetCSS 모음
  • _vaiables.scss : 변수 모음
  • _mixins.scss
  • _placeholder.scss : extend 모음

lib

  • 외부 라이브러리 모음

3. 인코딩

@charset "UTF-8";
  • 모든 scss 파일에 charset 를 선언한다.
  • 컴파일 후에 charset 선언은 하나만 남게 되므로 여러 파일에서 작성해도 문제 없음.
  • 공백 없이 최 상단에 작성한다.
  • 쌍따옴표를 사용한다.

4. 중첩

  • 최대 3뎁스 중첩까지 사용하는 것 권장

5. 들여쓰기 및 선언 순서

  • 중첩마다 들여쓰기
  • 하위 선택자가 시작될 때마다 빈 줄 추가
  • extend/include 를 최 상단에 모아 쓰고 빈 줄 추가
  • 재선언이 필요한 경우 뒤에 추가할 수 있다.
.foo {
    //@extend, @include는 상단에 모아쓰고 그 뒤 빈 줄을 추가한다.
    @extend %a;
    @extend %b;
    @include abc(n);

    //속성 별 개행.
    display: block;
    overflow: hidden;
    position: relative;
    z-index: 10;
    width: 100px;
    margin: 0;
    padding: 0;
    border: 1px solid red;
    background: red;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: underline;

    //상황에 따라 하단에 위치할수도 있음.
    @include bcd(n);

    //하위 선택자가 시작될 때 빈 줄 추가.
    .bar {
        ...
    }
}

6. 띄어 쓰기

scss를 사용하는 이유는 가독성과 코드생산성을 높이기 위함이기 때문에 띄어쓰기를 권장합니다.

연산자와 연결자는 띄어쓰기해서 작성한다.

$height - ($width * 2)
.test > .child:after

7. 주석

  • CSS에 컴파일되어야하는 주석은 /* */로 표기
  • 그 외의 주석은 //으로 작성

8. 네이밍 규칙

// placeholer 
$text_color

// mixin
@mixin testBox() { 
}

// local Variables
$btn-color : #fff;

// Global Variables
$G-body-color : #fff;

9. mixin

  • 인자 값을 필요로 할 때 mixin 사용
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

10 .extend

  • 축약형 지양

    %sp_enter { 
 background-image: url($path-img + "sp_enter_10.png");
 background-repeat: no-repeat;
 background-position: -999px -999px; 
}