이거 먼저 보고오기

https://sass-guidelin.es/ko/

https://webclub.tistory.com/518?category=541910

CSS 아키텍처 중 하나인 7-1패턴 이라고합니다!

프론트 실무에서 사용되며 scss,sass,less(전처리도구 컴파일러라고함)를 사용하지않는다면

스크린샷 2022-05-01 오후 10.15.09.png

이런식으로 분할해서 사용하면됩니다.

하지만 당연하게도 scss가 분할적인 면에서도 훨씬이득이때문에 scss가 진리입니다..

회사마다 사용유무가 다르다.

기초 준비

css, scss 폴더 두 개 만듬 (전처리도구 만드는거)컴펙트방법이다.

Untitled

Untitled

환경설정 ->확장설정

편집에서 "liveSassCompile.settings.generateMap": false, 적힌 기존걸 지우고 밑에껄로 셋팅

{
"diffEditor.wordWrap": "on",
"window.zoomLevel": 1,
"editor.wordWrap": "on",
"editor.fontSize": 12,
"editor.minimap.enabled": false,

"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
    {
		"format": "compact",
    "extensionName": ".css",
    "savePath": "~/../css/"
		}
]
}

https://velog.io/@eyewhy/230104

https://velog.io/@imyoox/SCSS

이거 보고 나중에 추가 작업하기