sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它
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 = 20em*px。
数值可以进行+、-、*、/和%运算。
因为/
在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.5scale($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的基础上帮助我们做好我们经常会遇到的一些样式设计模式的。
sass笔记-4|像写脚本一样写Sass,把能交给Sass办的都交给它的更多相关文章
- 喝咖啡写脚本,顺便再加一点点CSS语法糖 1.选择环境
经过对前端开发的初步了解,大体上发现了以下几点,前端开发需要使用脚本语言,主要是JavaScript,需要Html,需要CSS,这些东西相信很多人已经很熟了.但是仅仅只是学习一点简单的JS,配合Htm ...
- LoadRunner手写脚本、检查点、集合点、事务、思考时间
手写脚本 什么时候要手写? 可以有条件手写脚本的场景有两类: 有接口说明文档 没有借口说明文档,要去录制,录制不了,抓包手写 所需函数 我们这里讲的例子是基于 http 协议的,也是常见的两种请求类型 ...
- webstrom 在脚本区域写其他语言得到语法提示
webstrom 在脚本区域写其他语言得到语法提示 webstrom 的提示小灯泡 点击inject language or reference 选择相应的语言. 如果写的内容比较多, 可以按照web ...
- base64文件隐写脚本
base64文件隐写脚本 base64 可以在文件中隐藏信息,记录一下提取脚本 ''' base64文件隐写脚本 import re import base64 b64chars = 'ABCDEFG ...
- [golang]写了一个可以用 go 来写脚本的工具:gosl
转自:https://golangtc.com/t/53cca103320b52060a000030 写了一个可以用 go 来写脚本的工具:gosl 代码和使用说明可以看这里: http://gith ...
- CTF写脚本
今天总结一下CTF如何写脚本快速得分....(比较菜,能力有限,大佬勿喷) 所谓的写脚本得分,就是利用了 python爬虫的思想,如果之前没有听说过的话,可以去爬虫的相关语法.如果是看网上的视频的话, ...
- 在写脚本时,在一开始(Shebang 之后)就加上这一句,或者它的缩略版: set -xeuo pipefail
编写可靠 bash 脚本的一些技巧 腾讯技术工程 已认证的官方帐号 1,254 人赞同了该文章 写过很多 bash 脚本的人都知道,bash 的坑不是一般的多. 其实 bash 本身并不是一个 ...
- 【DM642学习笔记三】flash的烧写
ICETEK-DM642-PCI板上的29L008B芯片提供了8M位的Flash空间(访问地址空间是CE1,90000000h~90080000h).主要用于自启动功能和存储FPGA的配置数据. 一. ...
- Android自动化学习笔记:编写MonkeyRunner脚本的几种方式
---------------------------------------------------------------------------------------------------- ...
随机推荐
- 【COGS 56】质数取石子
[问题描述] DD 和 MM 正在玩取石子游戏.他们的游戏规则是这样的:桌上有若干石子,DD 先取,轮流取,每次必须取质数个.如果某一时刻某一方无法从桌上的石子中取质数个,比如说剩下 0 个或 1 个 ...
- KB006: CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
- TCP/IP-UDP
We read the world wrong but say that it deceives us. "我们看错了世界,却说世界欺骗了我们" 参考资料:TCP/IP入门经典 ( ...
- Thinkphp 表单验证
在服务器端通过tp框架实现表单验证 用户名.密码.重复密码.邮箱.qq.手机号码.爱好.学历 具体步骤: 制作表单 表单form数据通过create()方法收集(验证功能要求我们必须通过create( ...
- Javascript中回调函数的学习笔记
function a_b(kkis){ document.body.style.background ='red'; kkis(); } function fli(){ alert('######## ...
- 移动端html5重力感应
下面是测试案例,只测试过itouch,iphone http://06wjin.sinaapp.com/billd/ http://06wjin.sinaapp.com/billd/test. ...
- 工具函数之JS
1. 判断元素是否有滚动条 /* 检测元素是否出现滚动条 @param [object HTMLElement] elm The HTMLElement object @return [Object] ...
- 搬瓦工搭建VPN
搬瓦工VPS的PPTP VPN搭建其实和上面都是很简单的,这个要用到上面的搬瓦工VPS控制面板. Root shell - advanced 下载 centos 6 一键安装包 wget --no-c ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- Eclipse里的智能提示
Eclipse 3.1里的智能提示功能对于写JAVA程序又不记得类名和函数的人来说是一个很好的助手工具,但是Eclipse里的智能提示的快捷键是Ctrl+Space,在中文Windows操作系统中它确 ...