Sass 1

Sass

css를 프로그래밍스럽게 사용할 수 있도록 도와주는 전처리언어(컴파일 전의 언어)

📌 세팅

컴파일러 설치

좌측 extension 메뉴 누르기 > Live sass compile 검색, 가장 높은 버전을 설치 (최소 5.0.0 버전 이상)

파일생성

문서명.scss 으로 파일 생성

watch sass 활성화

하단 눈모양 아이콘 (watch sass) 클릭하면 scss파일 저장할 때마다 자동 컴파일 된다.
하단 바가 안보이면 View - Appearance - Status bar 켜기

💡 css.map?
scss > css 매핑하는 파일
크롬 개발자 도구에서 에러 짚어줄 때, 원래는 컴파일 후의 css파일 기준으로 알려주기 때문에 불편함
map파일 있으면 개발자도구가 scss기준으로 보인다. 웬만하면 건들지 X

📌 변수선언

최상단에 아래와 같은 형식으로 작성

$main-color: #8e8720;
$default-size: 50px;

변수 사용

.test-box {
  background-color: $main-color;
  font-size: $default-size - 2px;
}

주의

사이즈 사칙연산 시 피연산자 단위 맞아야 한다
(퍼센트 - 픽셀 이런거 안 됨. 컴파일 시 오류 뜬다. css는 됨)

scss파일 내에서 해당 변수명 사용하면 할당된 값 연결됨
색상, 사이즈 등 미리 정해두면 편리함

$main-color: #8e8720;
$default-size: 50px;
.test-box {
  width: 100%;
  height: 90%;
  background-color: $main-color;
  font-size: $default-size - 2px;
}

📌 CSS내에서 변수 사용

CSS내에서도 변수 사용할 수 있다

선언

:root {
  --main-color: #dc3545;
}

할당

선택자{
  background-color: var(--main-color);
}