Sass笔记

Sass环境变量配置安装 （第一种）

官网下载

1.官网地址：sass-lang.com

2.下载安装解压解压完成后是一个 dart-sass 文件

安装

1.解压后放到地盘

D:\dart-sass

2.设置环境变量

计算机 > 右键 > 属性 > 高级系统设置 > 环境变量 > Path点开

把 D:\dart-sass 安装路径放在后面保存

3.测试

windows+r输入cmd

在后台输入sass --version

显示版本号及安装成功

---

VScode安装方法

扩展商店里下载

1.Live Sass Compiler

2.点击管理（设置的小符号）

3.点击扩展设置

4.点击 在settings.json中编辑

{
    "liveSassCompile.settings.formats": [
        {
            /*
                :nested - 嵌套格式
                ：expanded - 展开格式
                ：compact - 紧凑格式
                ：compressed - 压缩格式
            */
            "format": "expanded", //可指定的出口css样式（expanded，compact，compressed，nested）
            "extensionName": ".css",
            "savePath": "~/../css" //为null 表示当前目录
        }
    ],
    // 排除目录
    "liveSassCompile.settings.excludeList": [
        
        "**/node_modules/**",
        ".vscode/**"
    ],
    // 是否生成对应的map
    "liveSassCompile.settings.generateMap": true,
    // 是否添加兼容前缀 例如：-webkit- -moz- ...等
    "liveSassCompile.settings.autoprefix": [
        "> 1%",
        "last 2 versions"
    ],
    "explorer.confirmDelete": false
}

5.复制上端代码到第四步打开的 settings.json 文件中

---

Sass语法嵌套扩展与注释

语法功能扩展

选择器嵌套

CSS经常使用的选择器是后代选择器他的写法是父元素后面跟着子元素子元素后面再跟着子元素这种

.container {
  width: 1200px;
  margin: 0 auto;
}

.container .header {
  height: 90px;
  line-height: 90px;
}

.container .header .logo {
  width: 100px;
  height: 60px;
}

.container .center {
  height: 600px;
  background-color: #f00;
}

.container .footer {
  font-size: 16px;
  text-align: center;
}

Sass选择器嵌套它是一层层的父元素里面套着子元素这样有助于我们后期的维护从它的层级关系我们就可以看到

.container {
    width: 1200px;
    margin: 0 auto;
    .header {
        height: 90px;
        line-height: 90px;
        .logo {
            width: 100px;
            height: 60px;
        }
    }
    .center {
        height: 600px;
        background-color: #f00;
    }
    .footer {
        font-size: 16px;
        text-align: center;
    }
}

父选择器 &

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

例如有这么一段样式：

.container{width: 1200px;margin: 0 auto}
.container a{color: #333;}
.container a:hover{text-decoration: underline;color: #f00;}
.container .top{border: 1px #f2f2f2 solid;}
.container .top-left{float: left; width: 200px;}

用Sass编写

带伪类选择器的元素我们可以把它放到它的父类下面，但不能直接放，我们需要在伪类的前面放&。

以下面代码为例 .top 下的 &-left 代表的 .top-left 这是 & 代表 .top

.container {
    width: 1200px;
    margin: 0 auto;
    a {
        color: #333;
    &:hover {
        text-decoration: underline;
        color: #f00;
    }
    .top{
        border: 1px #f2f2f2 solid;
        &-left{
            float:left;
            width: 200px;
        }
    }
    
    }
}

属性选择器

有些CSS属性遵循相同的命名空间（namespace），比如font-family，font-size，font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass允许将属性嵌套在命名空间中

CSS写法：

.container a {
  color: #333;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: bold;
}

Sass写法：

.container {
    a {
        color: #333;
        font: {
            size: 14px;
            family: sans-serif;
            weight:bold;
         }
    }
}

注意font：后面要加一个空格

占位符选择器 %foo 必须通过 @extend

有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作Sass 样式库的时候，希望Sass 能够忽略用不到的样式。

定义的样式不使用的情况下不会编译出来的

例如有这样一段样式编译前：

.buttom%base{
    display: inline-block;
    margin-bottom: 0;
    border: 1px solid red; 
}

.btn-default{
    @extend %base;
    color: #faa;
    width: 60px;
}

.btn-success{
    @extend %base;
    color: #faa;
    width: 60px;
}

编译后

.buttom.btn-default, .buttom.btn-success {
  display: inline-block;
  margin-bottom: 0;
  border: 1px solid red;
}

.btn-default {
  color: #faa;
  width: 60px;
}

.btn-success {
  color: #faa;
  width: 60px;
}

注释讲解

Sass的注释有单行和多行注释跟CSS注释一样

单行注释

Sass编译后不编译单行注释

// 单行注释

多行注释

/*
	多行注释
*/

---

Sass变量

CSS变量的定义与书写

CSS是通过 – 定义

定义的变量只能在标签内的标签使用

:root相当于html

CSS的写法

:root {
    --color: #faa;
}
body {
    --border-color: #afa;
}
.header {
    --background-color: #aaf;
}
p {
    color: var(--background-color);
    border-color: var(--border-color);
}
.header {
    background-color: var(--border-color);
}

Sass的写法

$color: #faa;
$border-color: #afa;
$border-width: 1px;
$color1: #aaf;
.container {
    color: $color;
    border-color: $border-color;
}

Sass变量的定义

定义规则

1.变量以美元符号($)开头，后面跟变量名；

2.变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；

3.写法同css，即变量名和值之间用冒号(:)分隔；

4.变量一定要先定义后使用；

连接符与下划线

通过连接符与下划线定义的同名变量为同一变量，建议使用连接符

$font-size:14px;
$font_size:16px;
.container{font-size: $font-size;}

变量的作用域

局部变量

定义：在选择器内容定义的变量，只能在选择器范围内使用

.container {
    $font-size:14px;
    font-size: $font-size;
}

全局变量

定义后能全局使用的变量

第一种：在选择器外面的最前面定义的变量

$font-size: 16px;
.container {
    font-size: $font-size;
}
.footer {
    font-size: $font-size;
}

第二种：使用 !global 标志定义全局变量

.container {
    $font-size: 16px !global;
    font-size: $font-size;
}
.footer {
    font-size: $font-size;
}

变量值类型

变量值的类型可以有很多

Sass支持 7 种主要的数据类型

• 数字，1，2，13，10px，30%
• 字符串，有引号字符串与无引号字符串，“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)

例如

$layer-index: 10; //数字
$border-width: 3px;
$font-base-family: "Open Sans", 'Helvetica', Sans-Serif; //字符串
$top-bg-color: rbga(255, 147, 29, 0.6); //颜色
$blank-mode: true;	//布尔
$var: null; //值null是其类型的唯一通道。它表示缺少值，通常由函数返回以指示缺少结果。
$color-map: (	//数组
    color1: #fa0000,
    color2: #fbe200,
    color3: #95d7eb,
);
$fonts: ( //map
    serif: "Helvetica Neue",
    monospace: "Consolas",
);

使用

.container {
    $font-size: 16px !global;
    font-size: $font-size;
    @if $blank-mode {
        background-color: map-get($color-map, color1);
    } @else {
        background-color: map-get($color-map, color2);
    }
    content: type-of($var);
    content: length($var);
    color: map-get($color-map, color3);
}

.footer {
    font-size: $font-size;
}

//如果列表中包含空值，则生成的CSS中将忽略该空值。
.wrap {
    font: 18px bold map-get($fonts, "sans");
}

默认值

$color:#333;
//如果$color之前没定义就使用如下的默认值
$color:#666 !default;
.container {
    border-color:$color;
}

---

Sass 导入@import

@import

Sass 扩展了 @import 的功能，允许其导入 Scss 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或混合指令 (mixin) 都可以再导入的文件中使用。

例如

public.scss

$font-base-color:#333;

在index.scss里面使用

@import "public";
$color:#666;
.container {
	border-color: $color;
	color:$font-base-color;
}

**注意：**跟我们普通css里面@import的区别

如以下几种方式，都将作为普通的css语句，不会导入任何Sass文件

1. 文件扩展名是 .CSS;
2. 文件名以 http:// 开头；
3. 文件名是 url();
4. @import 包含 media queries。

@import "public.css";
@import url(public);
@import "http://xxx.com/xxx";
@import 'landscape' screen and (orientation:landscape);

局部文件(Partials)

Sass文件夹下的Sass文件都会被监听且自动编译，取消编译的方法在文件夹名称前加下划线 (_) ，否则文件会被自动编译。

@import "_public.scss" //导入的时候可以不加下划线和文件后缀 例： @import "public"

嵌套 @import

把局部的Sass文件嵌套在选择器里面

p {
    @import "public";
    color:$font-base-color;
}

---

Sass混合指令 (Mixin Directives)

混合指令 (Mixin) 用于定义可重复使用的样式。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输入多样化的样式。

定义与使用混合指令 @mixin

@mixin mixin-name() {
    /* css 声明 */
}

例1：标准形式

定义

//定义页面一个区块基本的样式
@mixin block () {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

使用

//使用混入
.container {
    .block {
        @include block;
    }
}

例2：参数形式

定义

//定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
    --webkit-box-align:$aitem;
    --webkit-align-items:$aitem;
    --ms-flex-align:$aitem;
    align-items:$aitem;
}

使用

.container{
    @include flex-align(center)
}

例3：指定参数

定义

//定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
    --webkit-box-align:$aitem;
    --webkit-align-items:$aitem;
    --ms-flex-align:$aitem;
    align-items:$aitem;
}

使用

.container{
    @include flex-align($aitem:center)
}

例4：多个参数

定义

//定义块元素内边距
@mixin block-padding($top,$right,$bottom,$left) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

使用

.container{
    @include block-padding($top:12px,$right:50px,$bottom:30px,$left:0px)
}

**注意：**参数名和参数的数量要对应参数顺序可调整

例5：这默认值

定义

@mixin block-padding($top:0,$right:0,$bottom:0,$left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

使用

.container{
    @include block-padding($top:12px,$bottom:20px)
}

例6：可变参数

参数不固定的情况

/**
    *定义线性渐变
    *@param $direction  方向
    *@param $gradients  颜色过渡的值列表
*/
@mixin linear-gradient($direction,$gradients...) {
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction,$gradients);
}

使用

.container{
    @include linear-gradient(to right, orange, yellow)
}

@mixin混入总结

• mixin是可以重复使用的一组CSS声明
• minxin有助于减少重复代码，只需声明一次，就可在文件中引用
• 混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
• 使用参数时建议加上默认值

---

Sass @extend（继承）指令详解

在设计网页的时候通常遇到这样的情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bltXJaK5-1654054527904)(C:\Users\Administrator\Desktop\孙乾坤\SASS整理\images\继承样图.png)]

CSS案例

标记	说明
info	信息！请注意这个信息。
success	成功！很好地完成了提交
warning	警告！请不要提交。
danger	错误！请进行一些更改。

所有警告框的基本样式（风格、字体大小、内边距、边框等…），因为我们通常会定义一个通用alert样式

.alert{
    padding:15px;
    margin-bottom: 20px;
    border:qpx solid transparent;
    border-radius: 4px;
    font-size:12px;
}

不同警告单独风格

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

使用继承@extend改进

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.alert-info {
    @extend .alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    @extend .alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning {
    @extend .alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    @extend .alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

使用多个@extend

定义两个类

.alert{
    padding:15px;
    margin-bottom: 20px;
    border:qpx solid transparent;
    border-radius: 4px;
    font-size:12px;
}

.important{
    font-weight: bold;
    font-size: 14px;
}

使用

.alert-danger {
    @extend .alert;
    @extend .important;
    color: #afa;
    background-color:#aaf ;
    border-color: #faa;
}

@extend多层继承

一个类可以继承另外一个类，这个类还可以被另外一个类继承

.alert{
    padding:15px;
    margin-bottom: 20px;
    border:qpx solid transparent;
    border-radius: 4px;
    font-size:12px;
}

.important{
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}

.alert-danger {
    @extend .important;
    color: #afa;
    background-color:#aaf ;
    border-color: #faa;
}

占位符%

你可能发现被继承的CSS父类并没有被实际应用，也就是说HTML代码中没有使用该类，他的唯一目的就是扩展其他选择器。

对于该类，可能不希望被编译输出到最终的CSS文件中，它只会增加CSS文件的大小，永远不会被使用。

这就是占位符选择器的作用。

占位符选择器类似于类选择器，但是，它们不是以句点(.)开头，而是一百分号(%)开头。

当在Sass文件中使用占位符选择器时，它可以用于扩展其他选择器，但不会编译成最终的CSS。

改写

%alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.alert-info {
    @extend %alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success {
    @extend %alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning {
    @extend %alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger {
    @extend %alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

---

Sass 运算 (Operations) 符的基本使用

等号操作符

所有数据类型都支持等号运算符：

符号	说明
==	等于
!=	不等于

例1数字比较：

$theme: "1";

.container {
    @if $theme== "1" {
        background-color: red;
    } @else {
        background-color: #faa;
    }
}

例2字符串比较：

$theme: "red";

.container {
    @if $theme!= "red" {
        background-color: red;
    } @else {
        background-color: #faa;
    }
}

关系（比较）运算符

符号	说明
< (lt)	小于
> (gt)	大于
<= (lte)	小于等于
>= (gte)	大于等于

例

$theme: 3;

.container {
    @if $theme >=3 {
        background-color: red;
    } @else {
        background-color: #faa;
    }
}

逻辑运算符

符号	说明
and	逻辑与
or	逻辑或
not	逻辑非

例

$width: 100;
$height: 200;
$last: false;
$index: 10;

.container {
    @if $width>=100 and $height<=200 {
        font-size: 14px;
    } @else {
        font-size: 16px;
    }
    @if $width==100 or $height<=100 {
        font-size: 14px;
    } @else {
        font-size: 16px;
    }
    @if not ($index>5){
        color: #aaf;
    }@else{
        color: royalblue;
    }
    @if not $last {
        border-color: salmon;
    }@else{
        border-color: seashell;
    }
}

数字操作符

符号	说明
+	加
-	减
*	乘
/	除
%	取模

例

.container {
    /* ========== + 运算 ============ */
    width: 50 + 20;
    width: 50 + 20%;
    width: 50% + 20%;
    width: 20 + 10px;
    width: 20px + 10px;
    width: 20px + 10pt; //不同单位会自动的转换
    // width: 20% + 10px;  不同符号不能转换
}

.container {
    /* ========== - 运算 ============ */
    width: 90 - 20;
    width: 90 - 20%;
    width: 90% - 20%;
    width: 40 - 10px;
    width: 40px - 10px;
    width: 50px - 10pt;
    // width: 20% + 10px; 不能出现两个符号
}

.container {
    /* ========== * 运算 ============ */
    width: 90 * 20;
    width: 5 * 10%;
    width: 40 * 10px;
    //  width: 90% * 20%;  同时出现了两个百分号
    //  width: 40px * 10px; 同时出现了两个单位
    // width: 20% + 10px; 不能出现两个符号
}

.container {
	/* ========== % 运算 ============ */
    width: 50 % 6;
    width: 50 % 20%;
    width: 50% % 20%;
    width: 50% % 7;
    width: 20 % 10px;
    width: 20px % 10px;
    width: 20px % 10pt;
    // width: 20% % 10px; 不能出现两个符号
}

注意：

数字类型包括：纯数字、百分号、css部分单位（px、pt、in…）

% 与 单位不能一起运算

纯数字与百分号或单位运算时会自动转换成相应的百分号与单位值

以下三种情况/将被视为除法运算符号：

• 如果值或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

例

/* ========== / 运算 ============ */
$width: 100px;
div{
    font: 16px/30px Arial,Helvetica, sans-serif; //不运算
    width: (10/5); // 使用了小括号
    width: $width / 10; //使用变量与括号
    width: round(50) /2; //使用了函数
    width: 50px / 10 + 50px; // 使用了 + 表达式
}

如果需要使用变量，同时又要确保/不做除法运算而是完整的编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

字符串运算

+ 可用于连接字符串

**注意：**如果有引用字符串（位于 + 左侧）连接无引号字符串，运算结果是由引号的，相反，无引号，字符串（位于左侧）连接有引号字符串，运算结果则没有引号。

有问题？？？ 如果有一个值是函数返回的，情况可能不一样

例如

.container{
    content: "Foo " +Bar;
    font-family: sans- + "serif";
}

---

Sass 插值语句 #{ }

引入之前的案例发出一个问题

例如

p{
    font: 16px/30px Arial,Helvetia,sans-serif;
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整的编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

使用插值语法：

$font-size: 16px;
$height: 30px;
p{
	font: #{$font-size}/#{$height};
}

---

Sass 常见函数的基本使用

常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modules

color(颜色函数)

Sass包含很多操作颜色的函数。例如：lighten() 与 darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色。

例如：

p {
    height: 30px;
}
.p0 {
    background-color: #5c7a29;
}
.p1{
    /* 
        让颜色变量
        lighten($color, $amount)
        $amount 的取值在0% - 100% 之间
    */
    background-color: lighten(#5c7a29 , 30%);
}
.p2{
    // 让颜色变暗 通常使用color.scale()代替该方案
    background-color: darken($color: #5c7a29, $amount: 15%);
}
.p3{
    // 降低颜色透明度 通常使用color.scale(5c7a29)代替该方案
    // background-color：opacify(#5c7a29,0.5);
    background-color: opacify(rgba(#5c7a29, 0.1), 0.5);  //里面小数相加不能 >=1 否则无效
}

使用

<p class="p0">p>
<p class="p1">p>
<p class="p2">p>
<p class="p3">p>

String（字符串函数）

Sass有许多处理字符串的函数，比如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert().

例：

p{
    &:after{
        //添加引号
        content: quote(这是里面的内容);
    }
        //去除引号
    background-color: unquote($string: "#faa");
        //获取字符串长度
    z-index: str-length($string: "sass学习");
}

Math（数值函数）

数值函数处理数值计算，例如：percentage()将无单元的数值转换为百分比，round()将数字四舍五入为最接近的整数，min()和max()获取几个数字中的最小值或最大值，random()返回一个随机数。

例如

p{
    z-index: abs($number: -16); //取整 16
    z-index: max(6,12,8,35); //最大值 35
    z-index: ceil(6.8); //向上取整7
    opacity: random();  //随机数 0-1
}

List函数

List函数操作List，length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起，append()在列表末尾添加一个值。

例如

p {
    z-index: length(12px); //1
    z-index: length(12px 5px 8px); //3
    z-index: index(a b c d, c); //3
    padding: append(10px 20px, 30px); //10px 20px 30px
    color: nth($list: red blue green, $n: 2); //blue
}

Map函数

Map函数操作Map，map-get()根据键值获取map中的对应值，map-merge()来讲两个map合并成一个新的map，map-values()映射中的所有值。

例如

$font-size: (
    "small": 12px,
    "normal": 18px,
    "large": 24px,
);
$padding: (
    top: 10px,
    right: 20px,
    bottom: 10px,
    left: 30px,
);
p {
    font-size: map-get($font-size, "normal"); //18px
    @if map-has-key($padding, "right") {
        padding-right: map-get($padding, "right");
    }
    &:after {
        content: map-keys($font-size) + " " + map-values($padding) + "";
    }
}

selector选择器函数

选择符相关函数可对CSS选择进行一些相应的操作，例如：selector-append()可以把一个选择符附加到另一个选择符，selector-unify()将两组选择器合成一个复合选择器。

例如

.header {
    background-color: #000;
    content: '' + selector-append(".a",".b",".c");
    content: selector-unify("a",".disabled") + '';
}

自检函数

自检相关函数，例如：feature-exists()检查当前Sass版本是否存在某个特性，variable-exists()检查当前作用域中是否存在某个变量，mixin-exists()检查某个mixin是否存在。

例如：

$color:#f00;
@mixin  padding($left:0,$top:0,$right:0,$bottom:0) {
    padding:$top $right $bottom $left;
}

.container{
    @if variable-exists(color){
        color:$color;
    }
    @else{
        content: "$color不存在";
    }
    @if mixin-exists(padding) {
        @include padding($left:10px,$right:10px)
    }
}

自检函数通常用在代码的调试上

---

Sass流程控制指令@if、@for、@each、@while

@if控制指令

@if()函数允许您根据条件进行分支，并仅返回两种可能结果中的一种。

语法方式同js的if…else if …else

代码形式：

.container{
	// 第一种
    @if(/* 条件 */){
        // ...
    }
    //第二种
    @if(/* 条件 */){
        // ...
    }@else{
        // ...
    }
    //第三种
    @if(/* 条件 */){
        // ...
    }@else if(/* 条件 */){
        // ...
    }@else{
        // ...
    }
}

例如：

%triangle{
    width: 0px;
    height: 0px;
    display: inline-block;
}

@mixin triangle($direction: top, $size: 30px, $border-color: black) {
    border-width: $size;
    border-#{$direction}-width: 0;
    @if ($direction==top) {
        border-color: transparent transparent $border-color transparent;
        border-style: dashed dashed solid dashed;
    } @else if ($direction==right) {
        border-color: transparent transparent transparent $border-color;
        border-style: dashed dashed dashed solid;
    } @else if ($direction==bottom) {
        border-color: $border-color transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    } @else if ($direction==left) {
        border-color: transparent $border-color transparent transparent;
        border-style: dashed solid dashed dashed;
    }
}

.p0 {
    @extend %triangle;  // 继承
    @include triangle(right,30px,#aff); // 混入
}
.p1 {
    @extend %triangle;
    @include triangle(bottom,30px,#afa);
}
.p2 {
    @extend %triangle;
    @include triangle(left,30px,#faa);
}
.p3 {
    @extend %triangle;
    @include triangle(right,30px,#aaf);
}

使用

<p class="p0">p>
<p class="p1">p>
<p class="p2">p>
<p class="p3">p>

@for指令

@for 指令可以在限制的范围内重复输出格式，每次按照要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $from through ，或者 @for $var from to

区别在于 through 与 to 的含义：

• 当使用 through 时，条件范围包含与的值。
• 而是用 to 时条件范围只包含的值不包含的值。
• 另外，$var 可以是任何变量，比如 $i; 和必须是整数值。

例1

@for $i from 1 to 4 {
    .p#{$i} {
        width: 10 * $i;
        height: 30px;
        background-color: red;
    }
}

@for $i from 1 through 3 {
    .p#{$i} {
        width: 10 * $i;
        height: 30px;
        background-color: red;
    }
}

使用

例2

@keyframes loading {
    0%{
        opacity: 0.3;
        transform: translateY(0px);
    }
    50%{
        opacity: 1;
        transform: translateY(-20px);
        background: green;
    }
    100%{
        opacity: 0.3;
        transform: translateY(0px);
    }
}
#loading {
    position: fixed;
    top: 200px;
    left: 46%;
}
#loading span{
    position: absolute;
    width: 20px;
    height: 20px;
    background: #3498db;
    opacity: 0.5;
    border-radius: 50%;
    animation: loading 1s infinite ease-in-out;
}

@for $i from 1 to 6 {
    #loading span:nth-child(#{$i}){
        left: 20 * ($i - 1) + px;
        // animation-delay: 20 * ($i - 1) / 100 + s;
        animation-delay: unquote($string: "0." + ($i - 1) * 2 + s);
    }
}

使用

@each指令

@each 指令的格式是 $varin<list>,$var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

例如做如下效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZM6THaK-1654054527905)(\images\each-img.png)]

普通CSS的写法

p {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 10px;
  z-index: 5;
}
.p0 {
  background-color: red;
}
.p1 {
  background-color: green;
}
.p2 {
  background-color: blue;
}
.p3 {
  background-color: turquoise;
}
.p4 {
  background-color: darkmagenta;
}

Sass的写法：

$var: 10;
p {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 10px;
    z-index: $var - 5;
}
$color-list: red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}

@while指令

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。

用sass实现bootstrap中css的这么一段代码

http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css

.col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }

用@while实现

$column:12;
@while $column>0 {
    .col-sm-#{$column} {
        width: $column / 12 * 100%;
        // width: $column / 12 * 100 + %; 会标红
        width: $column / 12 * 100#{"%"};
        width: unquote($string: $column / 12 * 100 + "%");
    }
    $column:$column - 1;
}

527905)]

普通CSS的写法

p {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 10px;
  z-index: 5;
}
.p0 {
  background-color: red;
}
.p1 {
  background-color: green;
}
.p2 {
  background-color: blue;
}
.p3 {
  background-color: turquoise;
}
.p4 {
  background-color: darkmagenta;
}

Sass的写法：

$var: 10;
p {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 10px;
    z-index: $var - 5;
}
$color-list: red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index - 1} {
        background-color: $color;
    }
}

@while指令

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环。

用sass实现bootstrap中css的这么一段代码

http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css

.col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }

用@while实现

$column:12;
@while $column>0 {
    .col-sm-#{$column} {
        width: $column / 12 * 100%;
        // width: $column / 12 * 100 + %; 会标红
        width: $column / 12 * 100#{"%"};
        width: unquote($string: $column / 12 * 100 + "%");
    }
    $column:$column - 1;
}