[ CSS ] SCSS를 사용한 프로젝트

SCSS를 사용한 프로젝트

CSS 전 처리 도구 , css를 좀더 쉽게 사용하기 위한 도구이다.

문법을 두가지 지원을 한다. SCSS , SASS

( ※ SASS는 기존 CSS문법과 호환이 잘 되지 않는 문제점이 있다.)

실제로 웹에서 동작하기 위해서는 작성한 문법을 CSS로 변환( 컴파일 )해야한다.

1. 사용이유

중첩기능 / 변수 ( CSS에서도 변수 현제 사용 가능 ) / 등 유용한 기능 사용

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

sass-lang.com

2. 프로젝트 생성

2-1.프로젝트 Setting

npm init -y 
npm i parcel-bundler

2-2. SCSS 생성 및 연결

1) 확장자명 ' .scss ' 파일 생성 html 파일에 연결.

2) parcel-bundler 패키지가 scss 파일이 연결된것을 확인하여 자동으로 필요한 모듈을 연결한다.

📑 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
        <ul>
        	<li class="name">Jimin</li>
            <li class="age">1</li>
        </ul>
    </div>
</body>
</html>

📑 main.scss

$color : royalblue;

.container{
    h1 {
        color: $color;
    }
}

📑 package.json

{
  "name": "scss-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "devDependencies": {
    "sass": "^1.65.1"
  }
}

저작자표시

'FrontEnd > CSS' 카테고리의 다른 글

[ CSS ] Tailwind CSS (0)	2023.11.30
[ CSS ] SCSS 문법 (0)	2023.08.15