SCSS: CSS의 전처리기
SCSS가 컴파일 되면 CSS파일로 변환되어진다.
참고 사이트
Sass: Sass Basics
Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Preprocessing CSS on its own can be fun, but st
sass-lang.com
node.js 시작
1. npm init -y
2. npm i -D parcel-bundler
3. package.json 파일 수정
index.html파일을 생성하고
main.scss파일을 생성하여 연결해 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.scss" />
</head>
<body>
<div class="container">
<h1>Hello SCSS!</h1>
</div>
</body>
</html>
main.scss 파일 작성
// SCSS 변수 선언
$color: royalblue;
// SCSS에서 사용하는 중첩 기능
.container {
h1 {
color: $color;
}
}
scss파일을 생성하면 자동으로 package.json파일에 sass 라인이 생성된다 자동으로 패키지가 설치된다.
npm run dev 명령어를 입력하여 파일을 컴파일하고 실행 한다.
dist 폴더에 컴파일된 css 파일이 생성된다.
'프론트엔드 > SCSS, Sass' 카테고리의 다른 글
| SCSS - 산술 연산 (0) | 2021.06.24 |
|---|---|
| SCSS - 변수 (0) | 2021.06.24 |
| SCSS - 중첩된 속성 (0) | 2021.06.24 |
| SCSS 상위 선택자 참조 (0) | 2021.06.23 |
| SCSS 중첩 기능 (0) | 2021.06.23 |