摘要：布尔值布尔值主要用于的分支结构中判断使用，布尔值的操作符有和，就是与或非。此外比较操作符只能作用于数字，但是可作用于所有类型，这些操作符返回布尔值。
零. 什么是表达式Sass笔记关于sass的基础部分已经写完，这一篇介绍Sass的高级特性——脚本特性。Sass能做很多事让样式表更智能，我们先会看到Sass眼中的数据类型，在这些数据类型上会有可进行的操作，此外，Sass中的内置函数（尤其是颜色函数）能帮你自动计算很多东西，sass还有自己一套控制结构语法，能实现循环或者分支，这一切都赋予了sass脚本的特性。
只要能放在属性右边的都是表达式，常见的，表达式是一个简单的值，但表达式也可以包含数学运算符，表达式可以出现在属性或者变量值中的任何地方。最直白的理解是，表达式是一串东西，这串东西中包含了运算或者函数调用等操作，最终这串东西是有一个值的，这就是表达式。
一. 数据类型Sass中数据类型有字符串、数值、颜色、列表、布尔值这几种类型，是的，好像和我们编程语言如JS、Java等的数据类型不太一样，尤其是关于颜色。
1. 字符串Sass的字符串类型分为有引号字符串和无引号字符串：
有引号字符串：可以包含除"外的任何字符
无引号字符串：不能以数字或者特殊字符开头，也不能包含空格以及一些特殊字符，如*或者&等。
Sass还将另外几个特殊构造看成字符串，如!important，url()值，但url($val)不是，因为它含有变量。
最常用的字符串操作符是+——用于拼接字符串，至于拼接的结果是否带引号，由拼接的左边的字符串决定。由于历史原因，-和/也会拼接，但是操作符本身也会被包含在结果字符串中。
2. 数值在Sass和css中，数值包括两部分：实际的数字以及（可选的）单位，如px、em、%等。当对含有单位的数值做乘除时，单位也遵循科学运算，如：5em 4px = 20empx。
数值可以进行+、-、*、/和%运算。
因为/在CSS中也被用来分隔值，所以针对/运算有以下规则：
如果两个值中有任意一个是字符串，结果将是一个普通的正斜杠，也就是变成拼接字符串的操作并且/字符被包含在结果中
以下任一情况满足，都将进行除法运算：
在/的任意一边使用一个变量
整个值被括号包围
该值被用作其他算术表达式的一部分
3. 颜色颜色值有几种表达方式，这些表达从颜色构成的不同角度进行描述：
以#开头的十六进制法，一共6位十六进制数表示，每两位十六进制数依次表示Red、Green、Blue这3个通道的成分多少，从00到ff；
以rgb()或rgba()函数描述的颜色，依次传入R、G、B这3个通道的颜色成分，从0到255，对于rgba()最后还传入一个alpha通道，表示不透明度，0表示完全透明，1表示完全不透明；
以hsl()或hsla()函数描述的颜色，依次传入色相、饱和度和明度，后者也有一个alpha通道参数；
命名好的颜色，比如white、gray等。
4. 列表列表，是一个数据的序列，用空格或者逗号隔开，你可以理解为数组。列表可以包含其他列表（是不是像二维数组、多维数组），常见的是用逗号隔开的列表中加入用空格隔开的列表，比如a b, c d, e f，也可以用括号来嵌套同类型的其他列表。
列表的用处一般有两个，一是它使用@each指令遍历时，代码更简洁；二是可以用它将更加复杂的参数传递给混合器。
5. 布尔值布尔值主要用于Sass的分支结构中判断使用，布尔值的操作符有and、or和not，就是与或非。
此外比较操作符<、<=、>、>=只能作用于数字，但是==可作用于所有类型，这些操作符返回布尔值。
二. 函数——Sass的一大亮点Sass的内置函数（尤其是颜色函数）能帮我们计算很多内容，我们也不需要立即掌握每一个函数，只需要明白Sass的函数能帮我们做哪些事，到时查文档即可。
Sass函数，和诸如rgb（）这样的CSS函数类似，被看做Sass表达式的一部分，返回Sass值（即上面讲的几种类型）。调用时，可以用$name: value的形式指定参数，从而可以不按照顺序传入参数。
1. 数值处理常见函数取整
ceil($number): 向上取整
round($number): 最接近的整数，四舍五入
floor($number): 向下取整
其他可能用到的函数
abs($number): 取绝对值
comparable($number_1, $number_2): 返回两个值能否比较
unit($number)和unitless($number): 前者返回数值单位，后者返回是否有单位
2. 获取颜色信息的函数颜色函数分为两部分，一部分用于返回颜色的具体信息，另一部分用于将一个旧的颜色转化为一个新的颜色值。
返回颜色信息的函数常用的有：
alpha($color)或者opacity($color): 返回$color的alpha通道，也就是不透明度
red($color)、green($color)、blue($color): 返回颜色对应的R、G、B通道，所以会返回0-255的值
hue($color)、saturation($color)、lightness($color): 返回颜色对应的色相（0-359deg）、饱和度（百分比）和明度（百分比）
3. 转换颜色的函数最综合的两个颜色转换函数: adjust($color, ...)和scale($color, ...)。
adjust($color, ...): 接收一个颜色作为第一个参数，后面的参数是一列描述如何转换的关键字，比如adjust($color, $red: 20, $alpha: -0,5)将$color的红色成分增加20，不透明度减少0.5
scale($color, ...): 接收一个颜色作为第一个参数，但是和上面的区别在于，它不接受固定的数值，而是以百分比的方式调节，但是不支持$hue的调节，因为色相是一个环，用百分比调节没有意义
只要任何一个函数中的参数不同时属于RGB和HSL成分，两个函数就能接受任意多个参数进行调节从而转换出新的颜色。
最混的颜色函数：mix($color_1, $color_2, [$weight])。
这个函数将两种颜色混合在一起，可选一个参数$weight越接近100%，使用前一种颜色的成分更多，此外这个函数还受两个颜色的透明度影响，透明度越小的颜色对结果的影响越大。
常用的单因素颜色转换函数：比如lighten()、darken()、saturate()、desaturate()，看这些函数的名字就知道这些函数是用来做什么的了，上面几个函数都接受一个颜色作为第一个参数，然后接受一个百分比用于调节，依次是增加亮度、降低亮度、增加饱和度、降低饱和度。
方便的特殊颜色转换函数：grayscale($color)将饱和度降为0，从而转化为灰度；complement($color)将色度旋转180度，获取原来颜色的补色；invert($color)将颜色反相。
4. 列表函数nth($list, $n): 返回列表中的某一项，从1开始计数
join($list1, $list2, [$separator]): 拼接两个列表， 可选的分隔符参数决定最后列表的分割方式（逗号或者空格）
length($list): 返回列表中的项目数
5. 其他有用的sass函数type-of($value): 返回一个无符号字符串，代表值的类型
if($condition, $if-true, $if-false): 根据第一个参数的布尔值，决定返回第二个还是第三个参数，和我们在其他变成语言中用的?:三目运算符类似
三. 插值可以在选择器和属性名的任何一个地方将一个表达式包裹在#{和}之间，表达式的结果将会在CSS输出结果中代替#{...}。
比如，我们可以利用插值构建一个混合器
@mixin thing($class, $prop){
.thing.#{$class} {
prop-#{$prop}: val;
}
}
四. 结构控制指令
Sass可以有循环和分支的结构控制指令，和我们在其他编程语言中看到的差不多，只是它有自己的写法，这里仅介绍@for、@each、@if。
1. @for语法有两种：
@for $i from 1 to 5 {...}：这样跳出循环后，i停留在4
@for $i through 5 {...}: 这样跳出循环后，i停留在5
2. @each对列表中的每一项使用样式块：@each $item in you, me, he {...}
3. @iF语法：@if condition {...}，和其他的编程语言一样，可以接任意多个@else if condition {...}块，最后最多还能接一个@else {...}块。
五. 小结Sass的脚本属性能帮助我们自动化计算和处理很多事情，比如相关数值的计算，你再也不用每次手按计算器计算出一个值然后填到css中，或者再需要修改某个值时，重新计算过所有的新值填上，Sass帮你计算，助你快速修改。
这里面最吸引人的当属Sass的颜色函数，告别了需要在一些色彩工具中选择颜色，然后建立配色，修改选色拷贝颜色值再应用看效果的繁琐过程，甚至当你熟悉了一些颜色理论和色环后，你可以完全在代码编辑器中凭借代码就能转换出你需要的颜色，然后去浏览器看效果仅仅是确认你的配色，Sass基于现有的颜色生成其他颜色配色（比如改一改明度、饱和度等），很容易帮助你生成一套还不错的颜色。
至此，介绍的Sass基本特性和高级脚本特性已经足够应付生产中大部分的工作了，如果还有其他需要，可以尝试去翻阅Sass的文档。当然，如果想要更加“偷懒”，更加方便，那么Sass的框架就可以上场了，接下来我们会聊一下Sass的一个框架——Compass，看它是怎么在Sass的基础上帮助我们做好我们经常会遇到的一些样式设计模式的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115376.html
摘要：的由来就是加强版的，要讲那就一定要从讲起英文全称是一个最初由设计并由开发的层叠样式表语言。年发行，年版本稳定，设计和开发分开进行，让这个语言的功能相当完善。变量允许使用变量，所有变量以开头。 SCSS的由来 SCSS就是加强版的CSS，要讲SCSS那就一定要从SASS讲起 SASS Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Ha...
摘要：中的变量以开头。中的引入文件以下划线开头，在其它文件中引用时，用命令即可，引用时不需要带文件名开头的下划线和扩展名。导入本身就提供了导入的选项，这样就将进一步分割成了代码更少更容易维护的代码段，但是在中每一条语句都会产生一次请求。 基础知识 这部分内容摘自 Sass Basics。 预处理 Preprocessing 预处理功能，就是将 SASS/SCSS 格式的文件输出为 CSS 文...
摘要：否则可能会导致全局安装的版本与项目中的配置文件可能存在不匹配。是一个流行的插件，其作用是为中的属性添加浏览器特定的前缀。插件允许开发人员在当前的项目中使用将来版本中可能会加入的新特性。 本文webpack是在Mac平台下基于官方最新版本v3.10，对于webpack@v2会有小的差异，待全文完成后会补充webpack@v2与v3版本之间的差异 使用webpack前的准备 1、初始化一个...
摘要：夹在中间的被链式调用，他们拿到上个的返回值，为下一个提供输入。最终把返回值和传给。前面我们说过，也是一个模块，它导出一个函数，该函数的参数是的源模块，处理后把返回值交给下一个。 文：小 boy（沪江网校Web前端工程师）本文原创，转载请注明作者及出处 showImg(https://segmentfault.com/img/remote/1460000012990131?w=1083...
摘要：本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块，不管该模块之前是否安装过由于国内墙的原因，使用安装会非常缓慢，慢到想切，不过还好，我们可以使用淘宝提供的国内镜像进行下载。 本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...
阅读 1234·2021-09-22 15:18
阅读 2564·2021-09-22 15:17
阅读 2203·2019-08-30 15:55
阅读 1526·2019-08-30 15:54
阅读 1011·2019-08-30 13:12
阅读 597·2019-08-30 13:12
阅读 1650·2019-08-29 11:33
阅读 1412·2019-08-26 17:04
