来源:moonKing_yue
https://juejin.im/post/6863375462882934791
虽然已经在多个项目中使用过sass,但在研究element sass搭建UI框架的源码中,发现很多自己没用过的高级用法,借着这次总结对sass的知识体系进行详细的梳理。
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
1安装编译
1.1 安装
安装ruby(mac下自带Ruby无需在安装Ruby!)
官网rubyinstaller.org/downloads/中… 安装包,傻瓜式安装安装完成运行CMD ,输入命令ruby -v,安装成功会打印版本号
删除替换原gem源
//删除替换原gem源
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//查看gem源
gem sources -l
//查看gem安装的内容
gem list安装sass与compass
gem install sass
gem install compass
//安装指定版本
gem install sass --version=3.3
//查看安装版本
sass -v
compass -v
1.2 编译
- 命令行编译
//单文件编译;进入scss目录
sass demo.scss demo.css
//监听文件下的scss文件;进入scssTest目录
sass --watch scss:css //将scss目录中的文件编译为css,存放至css目录
- 命令行指令
--watch 监听文件变化并执行编译
--no-catch 不生成.sass-cache 文件
--sourcemap 添加调试map
--style 选择编译格式 (nested``expanded``compact``compressed)
//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap
软件方式编译
koala&codekit,它们是优秀的编译器;支持Less、Sass、Compass、CoffeeScript,不做过多说明
Live Sass编译器
VSCode扩展,可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。
- webpack 配置
npm install -D sass-loader node-sass style-loader css-loader
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader'],
exclude: /node_modules/
}
]
}
1.3 输出格式
nested 格式
选择器与属性等单独占用一行,缩进量与 Sass 文件中一致,每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时,这种样式可以很容易地分析文件的主要结构。
expanded 格式
Expanded 输出更像是手写的样式,选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进。
compact 格式
每条 CSS 规则只占一行,包含其下的所有属性。嵌套过的选择器在输出时没有空行,不嵌套的选择器会输出空白行作为分隔符。
compressed 格式
Compressed 输出方式删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。
2 语法格式
2.1 语法格式
- Sass 语法格式,被称为缩进格式 (Indented Sass) ,是一种简化格式;以严格的缩进式语法规则来书写,不带大括号({})和分号
- SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能;和我们的 CSS 语法书写方式非常类似。
- 一般推荐使用scss,语法要求没那么严格
2.2 编码格式
一般使用使用 @charset声明编码格式,没有检测到,默认使用 UTF-8 编码。
2.3 注释
Sass 支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会
3 sass Script
3.1 变量
3.1.1 变量写法
- 变量以美元符号开头
- scss认为中划线和下划线是完全相等的
$primary : #DABE8D !default;
3.1.2 变量作用域
- 局部变量:定义在选择器之内的变量,使用范围是该选择器与子选择器
- 全局变量:定义在选择器之外的变量,子选择器中也定义了同名变量,则会覆盖全局变量
// 编译前
$width : 200px;
.block{
$width: 100px;
#{&}-item{
width: $width;
}
}
.block-other{
width: $width;
}
//编译后 ( .variable采用嵌套作于域内的变量,.variable1使用的外层全局变量)
.block .block-item {
width: 100px;
}
.block-other {
width: 200px;
}
- 局部变量转换为全局变量可以添加 !global
// 编译前
.block{
$width: 100px !global;
#{&}-item{
width: $width;
}
}
.block-other{
width: $width;
}
// 编译后
.block .block-item {
width: 100px;
}
.block-other {
width: 100px;
}
3.1.3 变量定义,设置变量的默认值 !default
变量的结尾添加 !default可指定默认值,此时,如果变量已经被赋值,不会再被重新赋值,如果变量未被赋值,则会被赋予新的值。
- 变量已赋值
// 编译前
$primary-dark : pink;
$primary-dark : red !default;
.block{
color: $primary-dark;
}
// 编译后 (变量值还是前面声明的值)
.block {
color: pink;
}
- 变量未被赋值
// 编译前
$primary-dark : null;
$primary-dark : red !default;
.block{
color: $primary-dark;
}
// 编译后 (变量值为后面新赋予的值)
.block {
color: red;
}
3.2 数据类型
- 数值(1, 2, 13, 10px)
- 字符串,有引号字符串与无引号字符串("foo", 'bar', baz)
- 颜色(blue, #04a3f9, rgba(255,0,0,0.5))<