来源: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))
布尔型(true, false)
空值(null)
数组 (list),用空格或逗号作分隔符(1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
3.3 运算
注意 :
加、减、乘、除都必须是同一单位下运算,不然会报错。
减法左边不留空格,直接做拼接,为了避免相关问题,运算符的两边都预留空格
多个值单位相同时,只需要为一个值提供单位即可。
圆括号可以用来影响运算的顺序
#{} 可以避免 Sass 运行运算表达式,直接编译 CSS
3.3.1 数值运算
加减
加减需要在同单位下进行运算
一个带单位与一个不带单位的计算,以带单位的单位为主
乘法
width: (1 / 24 * 6 * 100) * 1%; }
支持多种单位;但只需给一个计算项带上单位即可,若每一项都带单位则会报错。
.mk-col-6 {
除法
width: $width-c / 2; }
//如果值被圆括号包裹 .block{ width: (100px) / 2; }
//如果值是算数表达式的一部分 .block{ width: (100px) / 2; margin-left: 4px + 8px/2px; }
- 如果需要使用变量,同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中,只需要用 #\{\} 插值语句将变量包裹。
.block{
以下三种情况 / 将被视为除法运算符号:
// 如果值,或值的一部分,是变量或者函数的返回值 $width-c : 200px; .block{
3.3.2 字符串运算
可用于连接字符串
//编译前
.block{
content: "hello " + "world";
}
//编译后
.block {
content: "hello world";
}
最终的运算结果的字符串类型以+号左侧的字符串类型(带引号或不带引号)为主
//编译前
.block{
content: "hello " + world;
}
//编译后
.block {
content: "hello world";
}
3.3.1 颜色运算
颜色的计算用的范围较少,不做过多研究,有兴趣的朋友可以去官网学习,今天着重介绍几个Sass 内置颜色方法
颜色的表示法
HEX 表示法(十六进制)
RGB 表示法
HSL 表示法
HSL 是色相(Hue)、饱和度(Saturation)和亮度(Lightness)这三个颜色属性的简称。色相(Hue)是色彩的基本属性(红、青、黄等);饱和度(Saturation)是指色彩的纯度,越高越浓、越低越淡;亮度(Lightness)指的是色彩的明暗程度,越高色彩越白,越低色彩越黑
Mix 函数 (mix( color2, $weight: 50%))
颜色 color1 与 $color2 混合在一起生成新的颜色;weight决定了颜色在结果里的比重,如果指定的比例是 25% ,这意味着第一个颜色所占比例为 25%,第二个颜色所占比例为 75%。
span{
&:nth-child(2){
background: mix($--color-primary, white, 80%);
}
&:nth-child(3){
background: mix($--color-primary, black, 80%);
}
lighten 函数 (lighten( amount)
将颜色 color变亮,color 变亮,color变亮,mount 是介于 0% 到 100% (含) 之间的值。按照这个值增加 $color HSL 的亮度。
span{
background: lighten( $--color-primary, 10% );
}
darken 函数 (darken( amount)
将颜色 color加深,color 加深,color加深,mount 是介于 0% 到 100% (含) 之间的值。按照这个值减少 $color HSL 的亮度。
span{
background: darken( $--color-primary, 10% );
}
rgba函数 (rgba函数( amount)
改变颜色透明度,$mount 是介于 0 到 1 (含) 之间的值
span{
background: rgba( $--color-primary,0.8);
}
几种颜色函数的效果比较
3.4 函数 @function
SASS中函数的功能是传入参数,经过函数内部的计算判断,然后需要搭配@return输出一个值的。但是必须设定返回值(return)
与混合的区别是混合生成具体样式,函数返回特定值
想要直接输出样式,使用mixin;想执行返回值的运算,使用function
3.4.1 sass内建函数
sass的内建函数可以去看看摄氏零度写的《Sass 内建函数用法一览》,我觉得总结的挺详细的
3.4.2 sass自定义函数
函数可以访问任何全局定义的变量
函数传参,可直接传不定参,按照它们在函数中列出的顺序传递参数;
//编译前
$total : 2;
@function column-width($col, $total) {
@return (1 / $total * $col * 100) * 1%;
}
@for $i from 1 through $total {
.mk-col-#{$i} {
width: column-width($i,$total) //调用column-width,获取返回的宽度
}
}
//编译后
.mk-col-1 {
width: 50%;
}
.mk-col-2 {
width: 100%;
}
使用关键字。可以使用key:value的格式传递键/值对则不必按它们在函数中列出的顺序来排列。
//编译前
$total : 2;
@function column-width($col, $total) {
@return percentage($col/$total); //也可使用percentage($number) ,sass内置函数;将数字化为百分比的表达形式
}
@for $i from 1 through $total {
.mk-col-#{$i} {
width: column-width($total:$total,$col:$i)
}
}
//编译后
.mk-col-1 {
width: 50%;
}
.mk-col-2 {
width: 100%;
}
设置传参默认值
//编译前
@function column-width($col:3, $total:4) {
@return percentage($col/$total);
}
.mk-col-3 {
width: column-width(2)
}
//编译后
.mk-col-3 {
width: 50%;
}
设置可变参数,类似ES6中的解构,但在函数中没什么应用场景,适合在mixins中有用,可以添加多个盒子阴影
//编译前
@function column-width($index, $widths...){
@return nth($widths, $index); //nth($list, $n),获取列表中第 $n 项的值。
}
.mk-col-3 {
width: column-width(3, 25%, 50%, 75%, 100%);
}
//编译后
.mk-col-3 {
width: 75%;
}
4 嵌套
4.1 Sass嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,避免了重复输入父选择器
//编译前
.mk-cell {
display: flex;
width: 100%;
padding: 6px 12px;
overflow: hidden;
.mk-cell__title {
width: 80px;
flex-shrink: 0;
color: #666;
}
.mk-cell__value {
flex-basis: auto;
font-weight: 600;
}
}
//编译后
.mk-cell {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
padding: 6px 12px;
overflow: hidden;
}
.mk-cell .mk-cell__title {
width: 80px;
-ms-flex-negative: 0;
flex-shrink: 0;
color: #666;
}
.mk-cell .mk-cell__value {
-ms-flex-preferred-size: auto;
flex-basis: auto;
font-weight: 600;
}
4.2 父选择器:&的巧用
直接使用嵌套外层的父选择器,设定 hover或者伪类元素是可用
//编译前
.mk-cell {
background: #fff;
&:hover{
background: #eee;
}
}
//编译后
.mk-cell {
background: #fff;
}
.mk-cell:hover {
background: #eee;
}
使用父选择器&构建新的选择器-同级
//编译前
.mk-cell {
background: #fff;
&__title {
width: 80px;
flex-shrink: 0;
color: #666;
}
}
//编译后
.mk-cell {
background: #fff;
}
.mk-cell__title {
width: 80px;
-ms-flex-negative: 0;
flex-shrink: 0;
color: #666;
}
使用父选择器&构建新的子级选择器则需要借用插值#{}
//编译前
.mk-cell {
background: #fff;
#{&}__title {
width: 80px;
flex-shrink: 0;
color: #666;
}
}
//编译后
.mk-cell {
background: #fff;
}
.mk-cell .mk-cell__title {
width: 80px;
-ms-flex-negative: 0;
flex-shrink: 0;
color: #666;
}
4.3 属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中
//编译前
.mk-cell {
background: #fff;
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
//编译后
.mk-cell {
background: #fff;
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
4.4 占位符选择器 %
当占位符选择器单独使用时(未通过 @extend 调用),不会编译到 CSS 文件中;方便定义样式的重复使用
//编译前
.mk-cell {
background: #fff;
%title{ //未调用前不会被编译
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
}
.mk-cell-title{
@extend %title;//通过@extend调用后被编译
}
//编译后
.mk-cell {
background: #fff;
}
.mk-cell .mk-cell-title {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
4.5 与@import的配合使用
导入的scss文件内容会写入到嵌套的选择器下,编译与常规的嵌套编译一样
//编译前
//_tag.scss
@each $color in red, blue, pink {
.tag-#{$color}{
color: $color;
}
}
//demo.scss
.tag-group{
@import "./_tag";
}
//编译后
.tag-group .tag-red {
color: red;
}
.tag-group .tag-blue {
color: blue;
}
.tag-group .tag-pink {
color: pink;
}
5 混合
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的class;混合指令可以包含所有的CSS规则,绝大部分Sass规则,甚至通过参数功能引入变量,输出多样化的样式。
5.1 混合的定义与使用
混合指令的用法是在 @mixin 后添加名称与样式
使用 @include 指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):
@mixin utils-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//如果没有要传递的参数,可直接使用@include utils-ellipsis,
.block{
@include utils-ellipsis
}
5.2 混合的传参
详细说明参考 ==++3.4.2 sass自定义函数++==
普通传参
//有传递的参数时加上括号,在括号中传参
@mixin ellipsis($line) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
.block{
@include ellipsis(2)
}
混合关键词传参
//编译前
@mixin button-variant($color, $background, $border) {
color: $color;
border: 1px solid $border;
background-color: $background;
}
.block{
@include button-variant( $background:#fff,$color:red, $border:red)
}
//编译后
.block {
color: red;
border: 1px solid red;
background-color: #fff;
}
混合参数变量(不定参传参)
//编译前
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
//编译后
.shadowed {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
向混合样式中导入内容 (与@content的结合)
在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content 标志的地方:
//编译前
@mixin res( $max-width:600 ) {
// 循环断点Map,如果存在则返回
@media only screen and (max-width: $max-width) {
@content;
}
}
.block{
@include res(768){
//@content中呈现的样式
display: block;
width: 100%;
}
}
//编译后
@media only screen and (max-width: 768) {
.block {
display: block;
width: 100%;
}
}
混合与其他指令的混用 混合中可以自由的是要@if、@at-root、插值语法#{}、&父元素等指令,与编写常规样式一样
//编译前
@mixin ellipsis_mix($line:1) {
@if $line > 1 { //与@if的使用
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
} @else {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover{ //&父元素的使用
background: #eee;;
}
#{&}-item{//插值语法#{}的使用
display: flex;
}
}
.block_ellipsis{
@include ellipsis_mix(1)
}
//编译后
.block_ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.block_ellipsis:hover {
background: #eee;
}
.block_ellipsis .block_ellipsis-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
6 @-Rules 与指令
6.1 @-Rules使用
6.1.2 sass导入-@import的使用
@import 用于从其他样式表导入样式规则,在这里要先给大家分析一下css的导入和sass导入的区别 :
css的导入,引用的文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道要下载、解析被引用的文件,此时会发起一个HTTP的请求,css文件要被完全解析完才会开始渲染页面,因此css @import引起的css解析延迟会加长页面留白期,不推荐使用,尽量使用link导入
sass的导入@import指令直接将代码包含进目标SCSS文件,不产生额外的http请求
接下来给大家总结下sass导入规则
导入文件拓展名为 .css、或者以http://开头、或者url()、或者@import 包含 media queries 均当做css3引入规则使用
除了以上情况,文件的拓展名是 .scss 或 .sass,则导入成功。没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为 .scss 或 .sass 的文件并将其导入。
可以嵌套导入(参考嵌套章节的导入)
不可在控制指令或者混合指令中直接使用,但可在指令中的嵌套的css规则中使用
//直接使用报错 Import directives may not be used within control directives or mixins
@mixin import_test($line:1) {
@import "tag.css";
}
//在混合中嵌套使用,其他控制指令也是同理的哦
@mixin import_test($line:1) {
.tag-group{
@import "tag.css";
}
}
.block{
@include import_test();
}
//编译结果
.block .tag-group .tag-red {
color: red;
}
.block .tag-group .tag-blue {
color: blue;
}
.block .tag-group .tag-pink {
color: pink;
}
6.1.2 @media 媒体查询的使用
@media在sass中可以用于嵌套中,但编译时会编译到最外层,主要是方便书写,不做过多分析
6.1.3 样式延伸-@extent的使用
样式继承的话就着重说下常用的几个方面
将重复使用的样式继承到使用继承语句的样式中
// 编译前
.pink{
background: pink;
}
.block{
width: 100px;
@extend .pink
}
//编译后
.pink, .block { //.block继承了.pink的样式
background: pink;
}
.block {
width: 100px;
}
结合占位符%定义一套样式,单独使用不编译,只有被引用的时候才会被渲染
// 编译前
%pink{
background: pink;
}
.block{
width: 100px;
@extend %pink;
}
//编译后
.block {
background: pink;
}
.block {
width: 100px;
}
在这里我就要总结下混合、继承、函数的区别了
混合主要是通过参数功能引入变量,输出多样化的样式,为了可以现实代码复用。
函数的功能是传入参数,经过函数内部的计算判断,然后需要搭配@return输出一个值的。而混合与继承之间,最大的区别在于编译的方式不同,混合编译的结果直接在样式类中加入样式,可能会存在代码冗余,而继承只是对类添加选择器达到共用的目的
继承没有传参,不能像混合一样输出多样化的样式
// 编译前
.pink{
background: pink;
}
@mixin ellipsis($line:1) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
.block{
width: 100px;
@extend .pink;
@include ellipsis
}
//编译后
.block { //继承了pink的样式
background: pink;
}
.block {
width: 100px;
//引用混合,生成了混合输出的样式
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
6.1.4 @at-root的使用
默认@at-root只会跳出选择器嵌套(跳出所有上级选择器),而不能跳出@media或@support
如果需要跳出,可使用以下指令
@at-root (without:all) 跳出所以层级(包括一切父级、@media、@support)
@at-root (without:rule) 跳出选择器嵌套,@at-root不带规则时,默认该指令
@at-root (without:media)(表示media) //跳出@media
@at-root (without:support)表示support,@support因为兼容性没有大范围使用,不做深究
//编译前
/*跳出父级元素嵌套*/
.parent{ //此时默认的是@at-root (without: rule)
width : 100px;
//单个选择器使用
@at-root .child {
width: 50px;
}
//多个选择器使用
@at-root {
.child1 {
width: 50px;
}
.child2 {
width: 50px;
}
}
}
/*常规情况下@at-root能跳出父级,不能跳出@media*/
@media screen and (max-width: 300px) {
.parent{
color:#f00;
@at-root .child {
width: 50px;
}
}
}
/*使用without: media跳出父级,跳出media层*/
@media screen and (max-width: 300px) {
.parent{
color:#f00;
@at-root (without: media) {
.child {
width: 50px;
}
}
}
}
/*使用without: all跳出父级,跳出media层*/
@media screen and (max-width: 300px) {
.parent{
color:#f00;
@at-root (without: all) {
.child {
width:200px;
}
}
}
}
//编译后
/*跳出父级元素嵌套*/
.parent {
width: 100px;
}
.child {
width: 50px;
}
.child1 {
width: 50px;
}
.child2 {
width: 50px;
}
/*常规情况下@at-root能跳出父级,不能跳出@media*/
@media screen and (max-width: 300px) {
.parent {
color: #f00;
}
.child {
width: 50px;
}
}
/*使用without: media跳出父级,跳出media层*/
@media screen and (max-width: 300px) {
.parent {
color: #f00;
}
}
.child {
width: 50px;
}
/*使用without: all跳出父级,跳出media层*/
@media screen and (max-width: 300px) {
.parent {
color: #f00;
}
}
.child {
width: 200px;
}
6.1.5 sass的控制指令
Sass控制命令在@mixin和@function中用的比较多,为其提供相应的流程和逻辑判断
6.1.5.1 判断指令
@if指令根据条件来处理样式块,条件为true返回一个样式块,反之返回另一个样式块,与js用法相似
//编译前
@mixin ellipsis_mix($line:1) {
@if $line > 1 { //与@if的使用
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
} @else {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.block{
@include ellipsis_mix(2)
}
//编译后
.block {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
6.1.5.2 循环指令
循环指令@for
@for 这个指令包含两种格式:@for var from to ,区别就是through包含end值,to不包含end值, 和 必须是整数值;来通过Layout 布局来分析该指令的用法
//编译前 -- @for $var from <start> through <end>
@for $i from 0 through 3 {
.mk-col-#{$i} {
width: (1 / 3 * $i * 100) * 1%;
}
}
//编译后 包含end值3
.mk-col-0 {
width: 0%;
}
.mk-col-1 {
width: 33.33333%;
}
.mk-col-2 {
width: 66.66667%;
}
.mk-col-3 {
width: 100%;
}
//编译前 -- @for $var from <start> to <end>
@for $i from 0 to 3 {
.mk-col-#{$i} {
width: (1 / 3 * $i * 100) * 1%;
}
}
//编译后 不包含end值3
.mk-col-0 {
width: 0%;
}
.mk-col-1 {
width: 33.33333%;
}
.mk-col-2 {
width: 66.66667%;
}
循环指令@while
@while 指令有点像@if和@for的结合,表达式为true时会生成不同的样式块,直到表达式值为 false 时停止循环,因此能实现相对复杂的功能
//编译前
$nums: 0;
@while $nums < 8{ //条件不用包裹在括号里
.mk-col-#{$nums} {
width: (1 / 8 * $nums * 100) * 1%;
}
$nums : $nums + 2
}
//编译后
.mk-col-0 {
width: 0%;
}
.mk-col-2 {
width: 25%;
}
.mk-col-4 {
width: 50%;
}
.mk-col-6 {
width: 75%;
}
循环指令@each
@each的用法就可以挺广泛,一般在搭建UI框架时,图标、字体等都可以使用该指令,语法为@each $var in ;为sass数组变量(数组 (list),用空格或逗号作分隔符(1.5em 1em 0 2em, Helvetica, Arial, sans-serif,前面有说明);可以对应单个值也可分配多个变量值,以搭建背景图标和字体图标样式文件为例
@each指令分配单个变量
//编译前
@each $var in add edit delete check {
.#{$var}-icon {
background-image: url('/images/#{$var}.png');
}
}
//编译后
.add-icon {
background-image: url("/images/add.png");
}
.edit-icon {
background-image: url("/images/edit.png");
}
.delete-icon {
background-image: url("/images/delete.png");
}
.check-icon {
background-image: url("/images/check.png");
}
@each指令也可以分配多个变量;用逗号隔开
//编译前
@each $icon-name,$icon-content in (add,/e6a6) (edit,/e6a6) (delete,/e6a7) (check,/e6a8) {
.#{$icon-name}-icon {
//quote函数,为传入的字符串添加双引号,如已有双引号,则不做操作,直接返回该字符串。
content: quote($icon-content);
}
}
//编译后
.add-icon {
content: "/e6a6";
}
.edit-icon {
content: "/e6a6";
}
.delete-icon {
content: "/e6a7";
}
.check-icon {
content: "/e6a8";
}
7在sass中BEM架构
这里我后期会结合element的源码做一个详细的总结,码字不容易,就先到这里啦,后期不定期完善的,点个小星星给我动力哦!
最后
欢迎关注「前端瓶子君」,回复「交流」加入前端交流群!
欢迎关注「前端瓶子君」,回复「算法」自动加入,从0到1构建完整的数据结构与算法体系!
在这里(算法群),你可以每天学习一道大厂算法编程题(阿里、腾讯、百度、字节等等)或 leetcode,瓶子君都会在第二天解答哟!
另外,每周还有手写源码题,瓶子君也会解答哟!
》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持