值列表

所谓值列表 (lists) 是指 Sass 如何处理 CSS 中:

margin: 10px 15px 0 0

或者:

font-face: Helvetica, Arial, sans-serif

像上面这样通过空格或者逗号分隔的一系列的值。

事实上,独立的值也被视为值列表——只包含一个值的值列表。

Sass列表函数(Sass list functions)赋予了值列表更多功能(Sass进级会有讲解):

nth函数(nth function) 可以直接访问值列表中的某一项;
join函数(join function) 可以将多个值列表连结在一起;
append函数(append function) 可以在值列表中添加值;
@each规则(@each rule) 则能够给值列表中的每个项目添加样式。

值列表中可以再包含值列表,比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式,要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时,Sass 不会添加任何圆括号,因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的,但是它们在 Sass 文件中却有不同的意义,前者是包含两个值列表的值列表,而后者是包含四个值的值列表。

可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、Sass的语法格式及编译调试 1. Sass和scss的区别 本质上来说是同一个东西,只是语法上有细微的差异:...
    没汁帅阅读 5,224评论 0 5
  • 声明变量 定义变量的语法: 在有些编程语言中(如,JavaScript)声明变量都是使用关键词“var”开头,但是...
    Junting阅读 5,328评论 0 6
  • 基础 声明变量 普通变量 默认变量 变量覆盖:只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 5,108评论 0 1
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 5,697评论 2 10
  • 最近,“江歌案”又被重新提起,案件主人公之一刘鑫也被推上舆论的风口浪尖。 事件人物:被杀女孩江歌、江歌母亲江妈妈、...
    彪悍姐阅读 4,227评论 2 1

友情链接更多精彩内容