Sass数据类型

• 数据类型
• 运算
  • 颜色值运算
  • 字符串运算
• 插值语句 #

数据类型

sass支持以下6中主要类型:

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2);

代码实例:

//定义数字变量
$n1:1;
$n2:1.2;
$n3:14px;

//定义字符串
$s1:'example';
$s2:"example";
$s3:example;

//定义颜色
$c1:blue;
$c2:#04a3f9;
$c3:rgba(255,0,0,0,0.5);

//定义布尔型
$b1:false;
$b2:true;

//定义空值
$e1:null;

//定义数组
$a1:10 20 5 15,blue,15px;

运算

sass支持数字的加减乘除、取整等运算 (+, -, *, /, %)。
关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {
  color: #050709; }

数字与颜色值之间也可以进行算数运算，同样也是分段计算的

字符串运算

+ 可用于连接字符串，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

插值语句 #

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }

#{}里还可以进行一些运算，例如：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; }