SCSS (SASS) 코딩 컨벤션

폴더 구조

• Root/src/ 외에는 자유롭게 관리
• 아래 예시는 7-1 패턴 (상황에 맞게 파일들을 나누고 폴더를 쪼개 하나의 css로 컴파일하여 사용

/* 공식 문서에서의 이상적인 구조 */
scss/
|
|– **abstracts/**
|   |– _variables.scss    # Sass 변수
|   |– _functions.scss    # Sass 함수
|   |– _mixins.scss       # Sass 믹스인
|   |– _placeholders.scss # Sass 플레이스홀더
|
|– **base/**
|   |– _reset.scss       # 리셋/정규화
|   |– _typography.scss  # 타이포그래피 규칙
|   …                    # 기타.
|
|– **components/**
|   |– _buttons.scss     # 버튼
|   |– _carousel.scss    # 캐러셀
|   |– _cover.scss       # 커버
|   |– _dropdown.scss    # 드롭다운
|   …                    # 기타.
|
|– **layout/**
|   |– _navigation.scss  # 네비게이션
|   |– _grid.scss        # 그리드 시스템
|   |– _header.scss      # 헤더
|   |– _footer.scss      # 푸터
|   |– _sidebar.scss     # 사이드바
|   |– _forms.scss       # 폼
|   …                    # 기타.
|
|– **pages/**
|   |– _home.scss        # 홈 한정 스타일
|   |– _contact.scss     # 연락처 한정 스타일
|   …                    # 기타.
|
|– **themes/**
|   |– _theme.scss       # 디폴트 테마
|   |– _admin.scss       # 관리자 테마
|   …                    # 기타.
|
|– **vendors/**
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   …                    # 기타.
|
`– main.scss             # 메인 Sass 파일

파일 구조

common

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

lib

• 외부 라이브러리 모음

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

인코딩

@charset "UTF-8";

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

중첩

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

들여쓰기 및 선언 순서

• 중첩마다 들여쓰기
• 하위 선택자가 시작될 때마다 빈 줄 추가
• extend / include 를 최상단에 모아 쓰고 빈 줄 추가
• 재선언이 필요한 경우 뒤에 추가 가능

.class {
	// @extend, include는 상단에 모아쓰고 그 뒤 빈 줄을 추가
	@extend %a,
	@extend %b;
	@include abc(n);

	// 속성 별 문단 작성
	display: block;
	margin: 0px
	padding: 40px
	border: 1px solid red;
}

띄어쓰기

• scss를 사용하는 이유 → 가독성과 코드 생산성 향상 “띄어쓰기 권장”
• 연산자와 연결자는 띄어쓰기해 작성

.element > .child:after {
	padding: 12px 0;
}

주석

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

네이밍 규칙

• CSS에서 변수 네이밍 규칙은 앞에 하이픈(-) 2개를 붙여 선언해주는 것

:root {
  --main-color: #111111;
  --default-color: #111111;
  --hover-color: #595c60;
  --active-color: #2d2d2d;
  --disabled-color: #a0a0a0;
  --background-color: #f1f3f6;
}

//placeholder
$text_color

//mixin
@mixin buttonRadius() {
}

// Local Variables
$btn-color: #e7e7e7;

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

mixin

• 인자 값을 필요로 할 때 mixin을 사용

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-mox-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

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

---

레퍼런스

https://13akstjq.github.io/sass/2020/03/10/sass-코딩-컨벤션.html

https://viaeoo.tistory.com/7

https://heewon26.tistory.com/360

https://poiemaweb.com/sass-basics

https://velog.io/@roong-ra/CSS에서의-변수-사용

https://velog.io/@jch9537/CSS-SCSS-SASS#2-sass와-scss-차이가-뭐냐