# 一、环境搭建
# 1、Scss 和 Sass
Sass 是一种动态样式语言,由Ruby开发者
设计和开发,采用缩排语法,相较于 css 多出了许多功能(如:变量、嵌套、运算、混入、继承、指令、颜色处理、函数等)。
由于 Sass 采用的是缩排语法,对于 css 前端
的 web 开发者很不友好,所以 sass 从第三代放弃了缩进风格,兼容了 css 代码,使用花括号和分号,即 Sass 3 变成了 Scss(sassy css)
# 2、输出风格
Sass 输出样式的风格有四种风格,默认为 nested 风格。
nested | (嵌套) | 默认 |
compact | (紧凑) | |
expanded | (扩展) | |
compressed | (压缩) | |
常规的 web 前端 css 风格为
expanded
(扩展)风格。但使用 sass 时,为了减少文件体积,建议使用compressed
(压缩)风格
# 3、Scss 注释
// 单行注释
/* 多行注释 */
scss 编译成 css 文件时,单行注释不会保留,但多行注释会保留
# 二、环境搭建
# 3、本地环境
要将 sass 文件转为 css 文件,可以在 vscode 中安装Live Sass Compiler
注意:以前的该插件已经弃用,但原作者标明了新插件地址(貌似作者换了 🤔)
![](https://blog-cloudbed.oss-cn-chengdu.aliyuncs.com/note-taking/20221006154831.png)
- 配置
// setting.json
{
/* 压缩设置 */
"liveSassCompile.settings.formats": [
// This is Default.
{
"format": "compressed", // nested, expanded, compact, compressed
"extensionName": ".min.css",
"savePath": "~/../css" // 为 null 表示当前目录
}
],
/* 排除目录 */
"liveSassCompile.settings.excludeList": ["/**/node_modules/**", "/.vscode/**"],
/* 是否生成对应的map */
"liveSassCompile.settings.generateMap": false,
/* 是否添加兼容前缀 如: -webkit- , -moz- ... */
"liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"]
}
# 3、项目 sass 包 ✨
以前主流的是 node-sass,但现在存在包安装与 node 环境的问题;sass 官方推荐使用 dart-sass,最新的特性都会在这个上面先实现。
重点:查看 npm 平台发现,dart-sass 包已经更换名字为 sass 包
- 安装
# 环境(原dart-sass包)
npm i sass -D
# sass编译
npm i style-loader css-loader sass-loader -D
- 配置
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
}
]
}
}
# 三、CSS 预处理器
Sass、Less 和 Stylus 都是 CSS 预处理器,它们在原生 CSS 的基础上提供了一些额外的功能,如变量、嵌套、混入(Mixin)、函数等,以便更方便、灵活地编写和维护样式。
提示
Sass 的原始版本(也称为"Ruby Sass")是用 Ruby 编写的,因此在使用 Sass 之前需要安装 Ruby 环境。
后来出现了一个基于 JavaScrip 语言的版本,称为"Dart Sass",是目前推荐的版本。因为它性能更好,也不再需要依赖于 Ruby。
- Sass: 提供两种语法,一种是缩进式的,类似于 Python 的风格,另一种是 SCSS(Sassy CSS),更接近原生 CSS,使用花括号和分号。
- Less: 使用类似原生 CSS 的语法,但添加了一些额外的功能。
- Stylus: 使用非常简洁的语法,省略了大括号和分号,依赖于缩进。
/* Css */
:root {
--color: #f00;
}
/* Sass */
$color: #00c;
/* Less */
@color: #00c;
/* Stylus */
mainColor = #00c;
← 【Bootstrap4】 基础语法 →