[SCSS, CSS] Format 종류에 관하여

CSS 전처리기인 SCSS를 통하여 작업을 한 후 해당 SCSS 파일을 CSS로 컴파일하게 된다.

이때 컨파일하는 CSS 파일 포맷 종류를 정할 수 있다.

Format의 종류에는 Expanded, Compact, Compressed(minify), Nested가 있다.

 

1. Expanded

하나의 라인에는 하나의 속성이 존재한다. 

가독성이 좋고 유지보수하기 쉽다. 

하지만 코드줄이 많아저 로딩 속도가 느려질 수 있다.

.styled-example {
  width: 100vw;
  heght: 100%;
}

 

2. Compact

하나의 라인에 모든 속성이  존재한다. 

여러 속성이 하나 라인에 존재하기 때문에 유지보수하기 어렵고 가독성이 부족하다.

.styled-example { width: 100vw; heght: 100%; }

 

3. Compressed(minify)

말 그대로 압축 스타일이다. 줄바꿈, 공백, 주석등을 모두 제거하여 minify 파일 형태이다.

로딩 속도가 빠르고 파일 크기가 작다. 하지만 이 자체 파일로 유지보수하기가 어렵다.

.styled-example{width:100vw;heght:100%;}

 

4. Nested

SCSS에서 흔히 사용하는 방식이다. 둥지형태의 스타일로서 선택자들을 중첩시켜 작성하는 방법이다.

코드 중복을 방지할 수 있으며 가독성이 좋고 유지보수하기 좋다. 하지만 파일 크기가 커지고 로딩 속도가 느려질 수 있다.

.styled-example {
  &__inner {
    width: 100vw;
    heght: 100%;
  }
}