[모각소] SCSS Naming Convention

이번 프로젝트에서 SCSS를 사용하면서 폰트, 색상과 더불어 반응형을 위한 화면 크기까지 자주 사용하는 요소들을 utils.scss파일을 만들고, 그 안에 변수로써 선언하고, 필요한 모든 파일에서 import를 하여 사용하였다.

이 때, 혹시 scss도 naming convention이 있을까 하며 찾아봤고 역시나 권장하는 컨벤션이 존재하였다. 그 중에서 내가 사용한 몇 가지 컨벤션을 서술하겠다.

• style rules
  - extend, include를 상단에 모아서 작성하고, 하단에 빈 한줄을 추가한다.
  

styles.module.scss

import "/src/utils/utils.scss"

.container {
	@include desktop-body;
    
    display: grid;
    grid-template-columns: 1fr 1fr;
    
    @include mobile {
    	display: flex;
        flex-direction: column;
    }
}

• Naming
  • mixin: 선언 시 class명(_ Underbar), css속성명(- Hyphen)과 다르게 눈에 들어올 수 있는 네이밍이 필요하여 Camel Casing Notation으로 사용하는 것을 권장
  • 변수: 소문자

utils.scss(반응형을 위한 mixin 선언)

@mixin Mobile {
    @media (min-width: 0px) and (max-width: 767px) {
        @content;
    }
}

@mixin Tablet {
    @media (min-width: 768px) and (max-width: 1023px) {
        @content;
    }
}

@mixin Labtop {
    @media (min-width: 1024px) and (max-width: 1279px) {
        @content;
    }
}

@mixin Desktop {
    @media (min-width: 1280px) {
        @content;
    }
}

color.scss(동일한 색상 연속 사용을 위한 변수 선언)

$white: #000000;
$blue: #255bb9;
$gray: #c8c8c8;
...

이 외에도 많은 컨벤션이 있으나, 이번 프로젝트에서는 사용되지 않아서 서술하지 않았다.

참고 - https://webclub.tistory.com/518#__style_rules