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 |
