【SASS】安装SASS和配置自动编译

最新推荐文章于 2024-05-18 09:58:31 发布

笑拥平凡

最新推荐文章于 2024-05-18 09:58:31 发布

阅读量450

点赞数 1

分类专栏： SASS 文章标签： sass 前端 css

本文链接：https://blog.csdn.net/weixin_62258865/article/details/128249397

版权

SASS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

SASS简介
SASS安装和实现自动编译(使用gulp)
- 通过例子演示
SASS的安装和配置到这就结束了😊
结语🧡🧡

SASS简介

SASS官网

Sass(Syntactically Awesome StyleSheets)是一种CSS预处理器(preprocessor)，是一款强化 CSS 的辅助工具。可以高效的编写样式，同时实现变量、嵌套、组合、继承等编程语言功能。

SASS安装和实现自动编译(使用gulp)

gulp官网

通过例子演示

新建项目[sass-demo]

初始化

npm init -y

添加文件 index.html 和 index.scss
index.html

<!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">
  <link rel="stylesheet" href="./css/index.css">
  <title>Complete SASS</title>
</head>
<body>
  <h1>
    <a href="/">点我</a>
  </h1>
</body>
</html>

index.scss

/* 嵌套语法
	相当于css中的:
	h1 a {
		color: red;
	}
*/
h1 {
  a {
    color: red;
  }
}

项目目录
```
index.html
index.scss
package.json
```

安装sass
```
npm install sass -D
```

安装gulp

全局安装gulp-cli
```
npm install gulp-cli -g
```
检查是否安装成功
```
gulp --verson
```
安装其他依赖
```
npm install gulp gulp-sass -D
```

配置gulpfile

在项目根目录新建gulpfile.js
gulpfile.js

const { src, dest, watch, series } = require("gulp");
const sass = require("gulp-sass")(require("sass"));

// 编译 sass -> css
function buildStyles() {
  // src中输入需要编译的文件路径  dest()中输入存放输出的css文件的目录
  return src("index.scss").pipe(sass()).pipe(dest("css"));
}

// 监听 实时编译
function watchTask() {
  // 实时监听所添加的文件, 并编译输出对应的css文件
  watch(['index.scss'], buildStyles)
}

exports.default = series(buildStyles, watchTask);