LHJ

I'm a FE developer.

sass 공부전 세팅

01 Nov 2020 » sass

sass 공부전 세팅

$fs: 16px;

body {
  font-size: $fs;
}
$fc: #f00;

body {
  color: $fc;
}

확장 파일

  1. sass
  2. Live sass Compiler - 설치하면 live server 확장프로그램도 같이 설치된다.
  3. 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 파일이 있는 위치를 뜻한다.
~/ 혹여 나중에 이런 표시를 보더라도 헷갈리지 말자.
/ 이 표시만 있으면 프로젝트 루트 폴더 기준이다.