코딩ㆍ개발 정보/HTML 연습

[SCSS] node.js 및 Sass 사용 방법

RioRex 2024. 7. 29.

Sass 또는 Less와 같은 CSS 프리프로세서를 사용하면 코드를 모듈화하고 중첩 구조를 사용할 수 있어 코드 관리가 용이합니다

CSS 프리프로세서 중 하나인 Sass를 예시로 사용 방법

1. Sass 설치

Sass는 Node.js 기반으로 설치할 수 있습니다. Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 설치 방법은 다음과 같습니다:

1. Node.js 설치:

Node.js 공식 웹사이트에서 설치 파일을 다운로드하고 설치합니다.

2. Sass 설치:

터미널을 열고 다음 명령어를 입력하여 Sass를 전역(global)으로 설치합니다.

npm install -g sass

2. 프로젝트 구조 설정

Sass 파일을 저장할 디렉토리 구조를 설정합니다. 예시로 다음과 같은 디렉토리 구조를 사용합니다

project/
│
├── scss/
│   ├── main.scss
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _base.scss
│   ├── _layout.scss
│   └── _components.scss
│
└── css/
    └── main.css

3. Sass 파일 작성

각각의 .scss 파일을 작성합니다.

_variables.scss:

$primary-color: #3498db;
$font-stack: 'Helvetica Neue', sans-serif;

_mixins.scss:

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

_base.scss:

body {
    font-family: $font-stack;
    color: $primary-color;
}

_layout.scss:

header {
    @include flex-center;
    background-color: $primary-color;
    height: 60px;
    color: white;
}

_components.scss:

.button {
    background-color: $primary-color;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

main.scss:

@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';

4. Sass 파일 컴파일

Sass 파일을 CSS 파일로 컴파일해야 합니다. 터미널에서 다음 명령어를 실행합니다:

sass scss/main.scss css/main.css

위 명령어는 scss/main.scss 파일을 css/main.css 파일로 컴파일합니다.

참고로 아래 명령어는, 실시간으로 변경 확인해서 업데이트 해준다.

실행 종료는 CMD창을 끄거나 ^D 주면 된다.

sass --watch scss/main.scss:css/main.css

5. HTML 파일에서 CSS 파일 링크

컴파일된 CSS 파일을 HTML 파일에서 링크합니다.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Example</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <header>Header</header>
    <button class="button">Click Me</button>
</body>
</html>

저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[ASP, MSSQL] 쿼리 결과 분기 방법 (0)	2024.08.02
[CSS] Position: Relative - Absolute 다중 구성 처리 방법 (0)	2024.07.31
[CSS] DPR의 이해 (0)	2024.07.26
[HTML] 브라우저 최소 폭 (0)	2024.07.26
[CSS] grid-template-columns의 repeat를 포함한 속성 설명 (0)	2024.07.26