sass 공부전 세팅
$fs: 16px;
body {
font-size: $fs;
}
$fc: #f00;
body {
color: $fc;
}
확장 파일
- sass
- Live sass Compiler - 설치하면 live server 확장프로그램도 같이 설치된다.
- sass lint
Sass is
CSS 작성(생성)을 위한 작고 가벼운 언어이고, Sass와 SCSS가 있다.
Sass
SCSS와 작성하는데 있어서 구조적 차이가 있고 작성이 번거롭고 복잡할 수 있다.
SCSS
기존에 알던 CSS와 유사하게 작성할 수 있기 때문에 친근하게 느껴져 배우기가 쉽다.
Live Sass Compiler
$color-blue: #00f;
$color-red: #f00;
$color-yellow: #ff0;
body {
font-size: 14px;
background-color: $color-blue;
}
#box {
color: $color-yellow;
background-color: #f00;
}
Live Sass Compiler more
live sass compiler 확장 프로그램에서 ~/
이 표시가 뜻하는 것은 현재 scss
파일이 있는 위치를 뜻한다.
~/
혹여 나중에 이런 표시를 보더라도 헷갈리지 말자.
/
이 표시만 있으면 프로젝트 루트 폴더 기준이다.