文档章节

sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它

Stinson_Zhao
 Stinson_Zhao
发布于 2016/12/06 19:16
字数 2829
阅读 358
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

Sass笔记关于sass的基础部分已经写完,这一篇介绍Sass的高级特性——脚本特性。Sass能做很多事让样式表更智能,我们先会看到Sass眼中的数据类型,在这些数据类型上会有可进行的操作,此外,Sass中的内置函数(尤其是颜色函数)能帮你自动计算很多东西,sass还有自己一套控制结构语法,能实现循环或者分支,这一切都赋予了sass脚本的特性。

零. 什么是表达式

只要能放在属性右边的都是表达式,常见的,表达式是一个简单的值,但表达式也可以包含数学运算符,表达式可以出现在属性或者变量值中的任何地方。最直白的理解是,表达式是一串东西,这串东西中包含了运算或者函数调用等操作,最终这串东西是有一个值的,这就是表达式。

一. 数据类型

Sass中数据类型有字符串、数值、颜色、列表、布尔值这几种类型,是的,好像和我们编程语言如JS、Java等的数据类型不太一样,尤其是关于颜色

1. 字符串

Sass的字符串类型分为有引号字符串和无引号字符串:

  • 有引号字符串:可以包含除"外的任何字符
  • 无引号字符串:不能以数字或者特殊字符开头,也不能包含空格以及一些特殊字符,如*或者&等。

Sass还将另外几个特殊构造看成字符串,如!importanturl()值,但url($val)不是,因为它含有变量。

最常用的字符串操作符是+——用于拼接字符串,至于拼接的结果是否带引号,由拼接的左边的字符串决定。由于历史原因,-/也会拼接,但是操作符本身也会被包含在结果字符串中。

2. 数值

在Sass和css中,数值包括两部分:实际的数字以及(可选的)单位,如px、em、%等。当对含有单位的数值做乘除时,单位也遵循科学运算,如:5em * 4px = 20em*px。

数值可以进行+、-、*、/和%运算。

因为/在CSS中也被用来分隔值,所以针对/运算有以下规则:

  • 如果两个值中有任意一个是字符串,结果将是一个普通的正斜杠,也就是变成拼接字符串的操作并且/字符被包含在结果中
  • 以下任一情况满足,都将进行除法运算:
    • /的任意一边使用一个变量
    • 整个值被括号包围
    • 该值被用作其他算术表达式的一部分

3. 颜色

颜色值有几种表达方式,这些表达从颜色构成的不同角度进行描述:

  1. #开头的十六进制法,一共6位十六进制数表示,每两位十六进制数依次表示Red、Green、Blue这3个通道的成分多少,从00到ff;
  2. rgb()rgba()函数描述的颜色,依次传入R、G、B这3个通道的颜色成分,从0到255,对于rgba()最后还传入一个alpha通道,表示不透明度,0表示完全透明,1表示完全不透明;
  3. hsl()hsla()函数描述的颜色,依次传入色相、饱和度和明度,后者也有一个alpha通道参数;
  4. 命名好的颜色,比如whitegray等。

4. 列表

列表,是一个数据的序列,用空格或者逗号隔开,你可以理解为数组。列表可以包含其他列表(是不是像二维数组、多维数组),常见的是用逗号隔开的列表中加入用空格隔开的列表,比如a b, c d, e f,也可以用括号来嵌套同类型的其他列表。

列表的用处一般有两个,一是它使用@each指令遍历时,代码更简洁;二是可以用它将更加复杂的参数传递给混合器。

5. 布尔值

布尔值主要用于Sass的分支结构中判断使用,布尔值的操作符有andornot,就是与或非。

此外比较操作符<<=>>=只能作用于数字,但是==可作用于所有类型,这些操作符返回布尔值。

二. 函数——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的基础上帮助我们做好我们经常会遇到的一些样式设计模式的。

© 著作权归作者所有

Stinson_Zhao
粉丝 90
博文 12
码字总数 54621
作品 0
杭州
程序员
私信 提问
加载中

评论(0)

[转]前端利器:SASS基础与Compass入门

[转]前端利器:SASS基础与Compass入门 SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被...

stephenykk
2016/12/21
0
0
好程序员web前端培训分享JavaScript学习笔记SASS

  好程序员web前端培训分享JavaScript学习笔记SASS,世界上最成熟、最稳定、最强大的专业级CSS扩展语言! sass 是一个 css 的预编译工具 也就是能够 更优雅 的书写 css sass 写出来的...

好程序员
05/12
0
0
Sass/SCSS:让CSS书写更高效

目录 一、Sass/SCSS使用简介 1. Sass和SCSS的关系 2. Sass简介 3. 在项目中编译Sass 4. Sass/SCSS、Less还是stylus? 二、Sass(基于SCSS语法)详解 1. CSS功能拓展 2. SassScript 总结 一、...

夕山雨
04/19
0
0
scss/less语法以及在vue项目中的使用(转载)

1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与less正好...

osc_9hj9pbyj
2019/04/25
1
0
webpack和sass功能简介

1.webpack webpack 是一个打包工具,为什么需要打包?因为有的人的脚本开发语言可能是 CoffeeScript 或者是 TypeScript,样式开发工具可能是 Less 或者 Sass,这都需要工具把它们“编译”成浏...

osc_xl85dc6p
2018/07/05
1
0

没有更多内容

加载失败,请刷新页面

加载更多

python设置搜索路径,以及外层文件调用时路径变动问题

通过sys.path设置路径 import syssys.path.append("待加入的搜索路径") 修改python环境变量 编辑 ~/.profile 文件:export PYTHONPATH= $PYTHONPATH:搜索路径临时修改方法:直接在命令...

hc321
43分钟前
7
0
一个开源的跨平台音乐播放与音乐下载器

跨平台的音乐播放器 目前国内的linux平台上的音乐播放器不多,除了网易云比较多人使用的。 当然Listen1也是一个不错的选择,真正的跨平台,包括Android/Mac/Win/Linux以及Chrome插件,目前尚...

氷泠
49分钟前
18
0
联盟之畔,算力之颠——超算产业峰会,邀你共享

2020年5月30日,在成都首座万豪酒店,一场关于【算力之巅 超算产业峰会】正在如火如荼进行着,Tokenlnsight联合多位算力界代表人物参与此次峰会,一起探讨挖矿与财富机遇的话题,星际联盟也很...

IPFS星际联盟
53分钟前
12
0
Oracle学习(五) --- 视图、序列、同义词、索引

1、视图 1.1、什么是视图 视图就是一个虚拟表,实体表的映射。 什么时候使用视图 在开发中,有一些表结构是不希望过多的人去接触,就把实体表映射为一个视图。(表结构简化) 在项目过程中,程...

庭前云落
今天
27
0
设置JavaScript函数的默认参数值 - Set a default parameter value for a JavaScript function

问题: I would like a JavaScript function to have optional arguments which I set a default on, which get used if the value isn't defined (and ignored if the value is passed). 我......

javail
今天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部