[Sass] Sass 작성 규칙

Sass 작성 규칙을 익히려면 아무래도 따로 정리가 필요할 것 같아서 정리해보는 글

 

인코딩

• windows 환경에서 컴파일할 때 오류가 발생할 수 있으므로 모든 scss 파일에 charset을 선언한다.
• 컴파일 후, charset 선언은 하나만 남게 되므로 여러 파일에서 작성해도 문제없다.
• @charset 선언 전에 공백에 없도록 주의한다.

@charset "UTF-8"

header { background-color: #000; }

 

중첩

• 최대 3뎁스 중첩까지 사용을 권장한다. (셀렉터의 갯수가 아닌 scss 코드 상의 중첩)
• 3뎁스가 넘어갈 경우 하위연결자나 별도의 모듈로 뽑아낸다.
• 미디어 쿼리의 중괄호는 중첩 수에 포함시키지 않는다.

header {
	h1 {
    	a {}
    }
    .gnb {}
}

 

들여쓰기

• 중첩마다 들여쓰기 한다.
• 하위 선택자가 시작되면 빈 줄을 추가한다.
• @extend, @include를 상단에 모아쓰고 그 뒤에 빈 줄을 추가한다.
• 재선언이 필요한 경우 @include를 하단에 사용할 수 있다.

.gnb {
	@extend %a;
    @include position-center;
	
    overflow: hidden;
    background: #000;
    
    ul {
    	...
    }
}

 

주석

sass에선 주석 //는 컴파일 되지 않고 /**/는 컴파일이 된다.

• CSS 주석표현인 /* 주석 */으로 import되는 파일 상단에 파일명 표기 > 개발자도구로 디버깅 시 선언위치 파악에 도움됨.
• 그 외 주석은 컴파일되지 않도록 //으로 표기 (기능,변수 등에 대한 설명, UIO)
• CSS에 반드시 컴파일 되어야하는 주석이 있다면 /* 주석 */ 으로 표기

 

네이밍 규칙

(1) Mixin

• 문자 및 연결자 : 카멜 케이스

class명 (_name), css 속성명(-name)과 다르게 눈에 들어올 수 있는 네이밍이 필요하여 Camel Casing Notation 권장.

@mixin textCenter($height) {
	....
}

@mixin positionCenter {
	....
}

 

(2) 변수

• 지역변수: 소문자
• 전역변수: G-소문자
• 상수: 대문자
• 연결자: - (Hyphen)
• 네이밍 조합: $(요소이름)-(속성이름)-(용도 및 역할)

용도 및 역할은 축약형 지양

네이밍 조합 케이스	예시
$요소이름 - 속성이름	$G-body-color,  $body-background-color
$요소이름 - 용도 및 역할	$body-horizental
$요소이름 - 속성이름 - 용도 및 역할	$body-color-point,  $body-background-color-point
$요소(class)이름 - 속성이름 - 용도 및 역할	$btn-border-color-hover
$용도 및 역할	$count, $max-count

 

//변수선언
$G-body-color: #000;

body {
	//변수사용
	background: $G-body-color;
}