文档章节

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

Stinson_Zhao
 Stinson_Zhao
发布于 2016/12/06 19:16
字数 2829
阅读 159
收藏 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
粉丝 83
博文 12
码字总数 54621
作品 0
杭州
程序员
私信 提问
sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着s...

Stinson_Zhao
2016/11/29
377
0
从sass到PostCSS

原文链接:From Sass to PostCSS 译者:Icarus 邮箱:xdlrt0111@163.com 多年来我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件来尝试处理样式.我爱死了现在就可以使用将来的CSS...

卢睿韬
2017/01/27
0
0
[FungLeo原创]CSS预编译技术之SASS学习经验小结

[FungLeo原创]CSS预编译技术之SASS学习经验小结 前言 接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些...

FungLeo
2016/03/11
0
0
SASS 初学者入门

Sass 是什么? Sass 是Syntactically Awesome Stylesheete Sass的缩写,是由Hampton Catlin开发的。 Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易! 例如,曾几...

傅小黑
2013/01/19
44.2K
25
sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处...

Stinson_Zhao
2016/12/02
157
0

没有更多内容

加载失败,请刷新页面

加载更多

即学即用,轻松搞定这些选择器!(上)

所谓基本选择器是指选择器的名称前面没有其他选择器,即在组成上,基本选择器是单一名称。 基本选择器主要包括: 元素选择器 ID 选择器 类选择器 伪类选择器 伪元素选择器 通用选择器 元素选...

我的卡
10分钟前
2
0
c直接操作JAVA中的数组

** * jni对数组运算 * 在C中没有创建新的数组副本,直接在原来的java数组上面修改。然后返回了jintArray类型数据 */ JNIEXPORT jintArray JNICALL Java_com_org_vincent_javacallc_JNI_incr...

whoisliang
19分钟前
2
0
简单理解闭包问题

从我16年开始接触前端,知道闭包这个词,已经过去两年了。这两年里,闭包这个概念我在很多地方了解过,却实在没有真的理解,久而久之,变成了一块心病。这不,趁着现在项目告一段落的时间,我...

IrisHuang
19分钟前
3
0
网站漏洞怎么修复对于thinkphp的漏洞修复

THINKPHP漏洞修复,官方于近日,对现有的thinkphp5.0到5.1所有版本进行了升级,以及补丁更新,这次更新主要是进行了一些漏洞修复,最严重的就是之前存在的SQL注入漏洞,以及远程代码执行查询系...

网站安全
20分钟前
1
0
docker 安装oracle11g

1.准备docker环境; 2. docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g --pull 镜像(6个多G) 3.docker run -d -p 1521:1521 -v /data/oracle:/data/oracle --name ora......

xiaoxin
20分钟前
1
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部