SCSS: 정적 웹사이트로 시작

8324 단어 csswebdevscsssass

SASS: 무엇을, 왜, 어떻게?



SASS는 독립 실행형 전처리기로 사용하거나 Compass이라는 프레임워크의 일부로 사용하도록 설계된 CSS 전처리기입니다.
CSS용 SASS는 기존 CSS 파일보다 더 쉽게 읽고 유지 관리할 수 있는 CSS 파일을 생성한다는 점에서 CSS와 매우 유사합니다.
다음 장에서는 SASS를 사용하여 간단한 CSS 파일을 만드는 방법을 배웁니다.

설정 프로젝트



npm init -y

당신은 나를 따라 디렉토리 구조를 만들 수 있습니다

.
├─ node_modules/
├─ public/
│  ├─ styles/
│  ├─ index.html
├─ src/
│  ├─ scss/
package.json


모든 파일을 하나의 폴더에 넣지 않는 이유는 무엇입니까? src/의 소스 코드 파일이 컴파일되어 public/ 폴더에 자동으로 배치되기 때문입니다. 이러한 폴더 분리를 유지할 때 애플리케이션을 웹 서버의 프로덕션으로 가져가는 데 필요한 모든 것이 public/ 폴더에 있고 애플리케이션을 구현하는 데 필요한 모든 것이 src/ 폴더에 있는지 확인할 수 있습니다.

SCSS 설치



먼저 .sass 및 .scss 파일을 .css 파일로 컴파일하기 위한 라이브러리 실행 파일인 sass 을 설치합니다.

npm install -D sass

package.json 파일에 SCSS를 컴파일하는 스크립트를 추가합니다.

"scripts": {
  ...
  "sass": "sass src/scss:public"
  ...
}


The format of the script is sass <inputPath>:<outputPath>, so we’re telling sass to compile whatever .scss files that it finds (except for ones starting with underscores) in src/scss and write the output to public/.



개발



이제 SCSS를 설치했으므로 애플리케이션 작업을 시작할 수 있습니다. .scss에 src/scss 파일을 생성하여 시작하겠습니다._base.scss에 src/scss 파일을 만들고 src/scss/main.scss에 추가합니다.

// main.scss
@import '_base';

h1 {
    color: tomato;
    font-family: system-ui, -apple-system, Roboto, sans-serif;
}


_base.scss is a file that contains all the base styles for the application. It’s a good place to put global styles like colors, fonts, and other styles that are used throughout the application.



일부 기본 스타일은 다음과 같습니다.

// _base.scss
*, *:before, *:after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

html, body, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}


SCSS를 HTML에 추가



브라우저가 SCSS를 이해할 수 없습니다. 따라서 HTML에 SCSS 컴파일 파일(CSS)을 추가해야 합니다. <style> 태그에 <head> 태그를 추가하면 됩니다.

<!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="styles/main.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>


이제 npm run sass를 실행하여 SCSS를 CSS로 컴파일할 수 있습니다.

개발 및 생산



개발 및 생산을 위한 몇 가지 다른 스타일이 있습니다. 개발의 경우 실제 코드를 유지하고 디버깅을 위한 소스 맵이 필요하며 무엇이 잘못되었는지, 어디에서 잘못되었는지 쉽게 찾을 수 있습니다. 프로덕션을 사용하려면 웹 성능을 위해 코드를 축소하고 소스 맵을 제거해야 합니다.

이제 CSS를 빌드하기 위한 작업 스크립트가 있으므로 이를 개발 및 프로덕션 빌드 프로세스에 통합하겠습니다.
우리는 아마도 개발 빌드와 프로덕션 빌드를 다르게 취급하고 싶을 것입니다. 빌드 프로세스를 향상시키기 위한 몇 가지 옵션을 만들어 보겠습니다.

"scripts": {
    ...
    "sass:dev": "sass --watch --embed-source-map src/scss:public/styles",
    "sass:prod": "sass --no-source-map --style compressed src/scss:public/styles"
    ...
}


개발 스크립트에서: --watch는 sass에게 src/scss 디렉토리의 변경 사항을 감시하고 변경 사항이 감지될 때마다 다시 컴파일하도록 지시합니다. --embed-source-map는 sass에게 컴파일된 CSS에 소스 맵을 포함하도록 지시합니다.

프로덕션 스크립트에서: --no-source-map는 sass에게 소스 맵을 생성하지 않도록 지시합니다. --style compressed는 컴파일된 CSS에서 불필요한 공백을 압축하고 제거하도록 sass에 지시합니다. 이 두 가지 옵션 모두 파일 크기를 줄이고 성능을 향상시킵니다.

결론


  • SCSS는 프로그램 구성에서 깨끗하고 쉽고 적은 CSS를 작성할 수 있도록 도와줍니다.
  • 브라우저가 SCSS를 이해할 수 없습니다. 그래서 우리는 SCSS를 CSS로 옮겨야 합니다.
  • 개발 시 브라우저용 소스 맵을 사용하면 원본 소스가 재구성되고 재구성된 원본이 디버거에 표시됩니다.
  • 프로덕션 환경에서는 소스 맵을 제거하고 파일 크기를 최소화하여 더 빠르고 더 나은 성능을 로드합니다.

    • 여기에서 코드 예제를 확인하십시오.
    Code Sandbox
    요청 및 응답 스트림 - 관찰
    좋아하는 에디터로 일보를 쓰는 구조(zsh)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage