15일차 - SCSS 설치

유용한 사이트

• CSS 배경색 그라디언트 https://cssgradient.io/
• 배경이미지 svg파일로 변환 https://yoksel.github.io/url-encoder/
  SVG 장점 - path fill에서 색상을 변경할 수 있다.

1. vscode 마켓플레이스에서 sass 설치

• Sass v1.8.22 Syler
• Live Sass Compiler Glenn Marks

2. Live sass compiler 설정 > setting.json에서 편집

3. setting.json

vscode-live-sass-compiler 구글링해서 소스 붙여주기

    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": null
        }        
    ],

소스 붙여넣는 방법 : json. 형식을 맞춰라!

"값" : [
	설정
]
, // 끝낼 때 쉼표

4. Watch Sass 클릭

저장할 때마다 컴파일을 반복 반복한다

+) Watching 중에는 .scss파일 수정하면 .css과 min.css 파일이 함께 바뀜(컴파일)

5. scss를 컴파일한 min.css 생성

컴파일창 정신없다면 확장설정에서 none

6. 3개의 CSS 파일 관리

내가 작업하는 영역 <-이제부터 SCSS 에 작업한다!

• .scss

웹에 올리는 파일

• .min.css : HTML에는 이 파일을 연결한다!
• .css : 원본파일. 대비용으로 올리곤 함. 근데 원본파일 걍 안올려도 됨