1. 犀牛前端部落首页
  2. Sass教程
  3. Sass基础

Sass数据类型

SassScript包含了七种不同的数据类型:numbers, strings, colors, Booleans, null, lists 和 maps。

Number

SassScript可以识别单个数字类型,因此你无需担心操作导致整数还是实数。在进行数值运算的时候,单位必须相同或兼容。

下面的数值操作是正确的:

test: 10 + 3;    //"plain" numbers added together
test: 10px + 3;  //"plain" number added to a pixel value
test: 10em + 3em; //two "em" values added together

但是如果我们输入:10px+2em;操作将会报错,因为px和em不兼容。

假设运算操作正确(例如px和px),SassScript将会在输出中保留单位。例如,下面的代码:

p {
   font-size: 3em * 1.5;
}

将会输出以下结果:

p {
   font-size: 4.5em;
}

单位”em”将会保留。

String

你可以使用双引号,单引号或根本没有引号(字符串)来创建字符串。

$default-font: 'Lucida';

p {
    font-family: $default-font, "Ariel", sans-serif;
}

上面的代码将会输出以下结果:

p {
    font-family: 'Lucida', "Ariel", sans-serif;
}

你还可以使用#{<var>}插值来引用变量的内容,并删除任何引号。

$class-name: "foo";

a.#{$class-name} {
   color: blue;
}

上面的代码将会输出以下结果:

a.#foo {
   color: blue;
}

插值配合mixin一起使用,将会非常强大,我们将在混入章节中详解解释。

Color

SassScript支持使用:十六进制,命名如red,rgb表达式,rgba表达式,hsl表达式来表示颜色。

SassScript还支持一些非常方便的颜色函数,我们将在后面的文章中详细讲解。

List

SassScript列表是由空格或逗号分隔的一系列值。 以下两个变量的内容将被SassScript视为列表:

$body-font: Helvetica, Arial, sans-serif;
$body-margin: 0 0 10px 15px;

列表不必包含简单值; 它们也可以包含其他列表:

$random-list: 10, 10 0, 3;

上面的代码,只含有三个值,而不是四个值。第二个值是一个列表。

看起来好像会让人有点困惑,我们可以将上面的代码用括号包裹,改为这样:

$random-list: 10, (10 0), 3;

此语法清楚地表明了第二个值是嵌套列表,你还可以使用括号作为整个列表或单个元素的占位符:

$empty-list: ();
$missing-list: 10px () 30px 0;

Map

在SassScript中,Map是键值对。 它们的语法与列表略有不同:它们必须以逗号分隔,并且将整个映射必须用括号括起来:

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

Map不会直接输出到CSS中,我们一般使用Map来检查索引值。我们先来看一个简单的例子:

$red-map: (light: #e57373, medium: #f44336, dark: #b71c1c);

p {
   color: map-get($red-map, light);
}

map-get()函数接受一个map和一个键,并返回该键的值。上面的代码将会返回以下CSS:

p {
   color: $e57373;
}

Booleans & Nulls

SassScript支持两个布尔值,true和false,以及null值null。 这些在CSS中没有直接意义,但它们配合控制指令结合使用将会非常有用。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2299.html

发表评论

登录后才能评论