CSS는 매우 원초적인 언어이다.

회사 또는 큰 프로젝트에서 코드가 길어지면 CSS도 길어지기 때문에 관리 자체가 어렵기 때문인데,

이러한 여러 가지 문제를 해결할 수 있는 Preprocessor (전처리 언어) 하는 게 탄생하게 되었다

그중 하나인 Sass는 CSS를 조금 더 프로그래밍 언어스럽게 작성할 수 있는 문법들을 제공하고 프로그래밍스러운 변수, 함수, import, 상속 등의 기능을 CSS에서 이용 가능한데 몇천 줄의 코드에서는 매우 유용하다.

Setting🎵

웹브라우저는 CSS 파일밖에 모르기 때문에 SASS로 코드를 작성했다면 그걸 CSS 파일로 변환해 주는 변환기를 돌려서 변환된 CSS 파일을 HTML 파일과 사용해야 한다

터미널상에서 npm init 또는 install을 사용하기에는 용량이 크기 때문에

VScode 에디터를 이용하는 게 좋습니다

Sass를 사용하기에 앞서 개발 환경부터 세팅해 주어야 한다

VScode 좌측에 extension 메뉴를 클릭하여

Live sass Compiler의 최신 버전을 설치하시면 됩니다.

💡5.0.0버전 이상으로 설치해 주세요💡

제대로 설치가 되었다면 맨 밑 부분에 Watch Sass 버튼이 생성됩니다.

Watch Sass 버튼이란? 현재 작성한 Sass 파일을 자동으로 CSS 파일로 변환해 줍니다

하단 바가 보이시지 않으면 View Appearance Status bar 키시면 됩니다

새로운 폴더를 생성하셔서 파일을 만들어 봅시다.

index.html / index.css / index.js처럼 SCSS도 똑같이 사용하시면 됩니다

test.scss

// scss 생성한 파일 안에 css 처럼 작성을 해보세요
.box {
    width: 100%;
}

그리고 Watch Sass를 누르시면 새롭게 CSS파일이 생성 되시는걸 보실 수 있습니다.

그리고 html 안에서 Link를 걸어놓을 때는 생성된 css 파일을 연결해주셔야합니다

그렇다면 test.css.map 이란?

크롬은 css 파일밖에 인식하지 못하지만 map 파일이 있다면 scss 파일로도 분석이 가능하게 해줍니다.

즉 크롬 개발자도구 디버깅용 으로 생각하시면 될 거 같습니다.

Sass 사용하는 이유

1. 어려운 단어를 기억하거나 / 자주 사용할 때

웹 페이지를 만들 때 자주 사용하는 색상 컬러가 있을 겁니다.
색깔 중에 #2a4cb2라는 컬러가 있을 때

변수에 저장을 하여 사용할 수 있습니다.

$maincolor : #2a4cb2 이렇게 maincolor라는 변수를 생성 가능합니다

이렇게 변수를 사용해도 적용되는 걸 보실 수 있습니다

하지만 이게 전부는 아니죠

더 대단한 게 남아있답니다..

와우..😦

px 단위 또는 % 단위끼리 사칙연산을 해주셔야합니다