SCSS 컨벤션

현업에서 Toast UI기준으로 많이 쓴다하길래 참고해서 정리해보았다.

1. sass보다는 scss 문법을 사용

2. 선언 순서는 속성, @include, 중첩 선택자 순으로 선언

.wrapper{
	display:flex;
    @include flex-center;
    
    .icon{
    	width:20px;
        aspect-ratio: 1 / 1;
    }
}

3. 변수명은 케밥 케이스를 사용

$mainColor: blue; // 카멜케이스 x
$main_color: blue; // 스네이크케이스 x

$main-color: blue; // 케밥케이스 o

4. extend보다는 mixin을 사용한다.

extend의 사용을 지양한다.
mixin은 중복되는 스타일을 분리하거나 복잡한 스타일을 추상화하는 역할 등을 위해 마치 함수처럼 사용해야 한다.

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

.container{
	.wrapper{
    	.box{
        
        }
    }
}