在之前我们已经使用用/来进行计算，但如下情况不一样例如p{font:16px/30pxArial,Helvetica,sans-serif;}如果需要使用变量，同时又要确保/不做除法运算，而是完整地编译到CSS文件中，这种情况怎么办？？？可以使用#{}插值语句将变量包裹。使用插值语法p{$font-size:12px;$line-height:30px;font:#{$font-size}/#{$line-height}Helvetica,sans-serif;}通过#{}插值语句可以在选择器、属性名、注释中使用变量：$class-name:danger;$attr:color;$author
在之前我们已经使用用/来进行计算，但如下情况不一样例如p{font:16px/30pxArial,Helvetica,sans-serif;}如果需要使用变量，同时又要确保/不做除法运算，而是完整地编译到CSS文件中，这种情况怎么办？？？可以使用#{}插值语句将变量包裹。使用插值语法p{$font-size:12px;$line-height:30px;font:#{$font-size}/#{$line-height}Helvetica,sans-serif;}通过#{}插值语句可以在选择器、属性名、注释中使用变量：$class-name:danger;$attr:color;$author
sass运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用赋值运算符赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接（很多编程语言是=），例如：$font-size:16px;也可以把一个变量赋值给另一个变量$font-size:16px;$h3:$font-size;赋值的变量必须先有值等号操作符等号操作符用于比较两个表达式的值是否相等，所有数据类型都支持等号运算符:符号说明==等于!=不等于例1：数字比较：$the
sass运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用赋值运算符赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接（很多编程语言是=），例如：$font-size:16px;也可以把一个变量赋值给另一个变量$font-size:16px;$h3:$font-size;赋值的变量必须先有值等号操作符等号操作符用于比较两个表达式的值是否相等，所有数据类型都支持等号运算符:符号说明==等于!=不等于例1：数字比较：$the
Sass提供了许多内置模块，其中包含有用的函数（以及mixin）。这些模块可以像任何用户定义的样式表一样使用@use规则加载，它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头：表示它们是sass本身的一部分。常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modulesColor(颜色函数) sass包含很多操作颜色的函数。例如：lighten()与darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色
Sass提供了许多内置模块，其中包含有用的函数（以及mixin）。这些模块可以像任何用户定义的样式表一样使用@use规则加载，它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头：表示它们是sass本身的一部分。常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modulesColor(颜色函数) sass包含很多操作颜色的函数。例如：lighten()与darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在HTML中给元素定义两个class，一个通用样式，一个特殊样式。普通CSS的实现接下来以警告框为例进行讲，解4种类型类型说明info信息！请注意这个信息。success成功！很好地完成了提交。warning警告！请不要提交。danger错误！请进行一些更改。所有警告框的基本样式（风格、字体大小、内边距、边框等...），因为我们通常会定义一个通用alert样式，类似于这样的.alert{ padding:15px; margin-bottom:20px; border:1pxsolidt
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在HTML中给元素定义两个class，一个通用样式，一个特殊样式。普通CSS的实现接下来以警告框为例进行讲，解4种类型类型说明info信息！请注意这个信息。success成功！很好地完成了提交。warning警告！请不要提交。danger错误！请进行一些更改。所有警告框的基本样式（风格、字体大小、内边距、边框等...），因为我们通常会定义一个通用alert样式，类似于这样的.alert{ padding:15px; margin-bottom:20px; border:1pxsolidt
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如.float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。 mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。 可以看出，mixin类似变量，不同的是变量存储值，mixin存储一组css声明。mixin可以传入参数。定义与使用混合指令@mixin@mixinmixin-name([param1,[param2...]]){ /*css声明*/}例1：标准形式//定义页面一个区块基本的样式@m
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的class，比如.float-left。混合指令可以包含所有的CSS规则，绝大部分Sass规则，甚至通过参数功能引入变量，输出多样化的样式。 mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。 可以看出，mixin类似变量，不同的是变量存储值，mixin存储一组css声明。mixin可以传入参数。定义与使用混合指令@mixin@mixinmixin-name([param1,[param2...]]){ /*css声明*/}例1：标准形式//定义页面一个区块基本的样式@m
