13-数据类型

发表于 | 分类于 |

Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：

  • 数字: 如，1、 2、 13、 10px；
  • 字符串：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz；
  • 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
  • 布尔型：如，true、 false；
  • 空值：如，null；
  • 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。

字符串

SassScript 支持 CSS 的两种字符串类型：

  • 有引号字符串 (quoted strings)，如 “Lucida Grande” 、’http://sass-lang.com'；
  • 无引号字符串 (unquoted strings)，如 sans-serifbold。

在编译 CSS 文件时不会改变其类型。++只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串++，这样方便了在混合指令 (mixin) 中引用选择器名。

值列表

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

1
margin: 10px 15px 0 0

或者： 

1
font-face: Helvetica, Arial, sans-serif

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

Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）：

  1. nth函数（nth function） 可以直接访问值列表中的某一项；
  2. join函数（join function） 可以将多个值列表连结在一起；
  3. append函数（append function） 可以在值列表中添加值；
  4. @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。