sass其他函数1

Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)

上面表达式的意思是当 $condition 条件成立时，返回的值为 $if-true，否则返回的是 $if-false 值。

>> if(true,1px,2px) 1px >> if(false,1px,2px) 2px

Map

Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。

{ "employees": [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName":"Jones" } ] }

那么 Sass 的 map 长得与 JSON 极其相似：

$map: (     $key1: value1,     $key2: value2,     $key3: value3 )

首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。

其中键 key 是用来查找相关联的值 value。使用 map 可以很容易收集键的值和动态插入。我们来回忆一下，在 Sass 中常用下面的方式定义变量：

$default-color: #fff !default; $primary-color: #22ae39 !default; 

我们使用 map 可以更好的进行管理：

$color: (     default: #fff,     primary: #22ae39 );

如果哪一天，你需要新增加颜色变量值，在 map 中可以非常随意的添加：

$color: (     default: #fff,     primary: #22ae39,     negative: #d9534f ); 

对于 Sass 的 map，还可以让 map 嵌套 map。其实就是 map 的某一个 key 当成 map，里面可以继续放一对或者多对 key:value：

$map: (     key1: value1,     key2: (         key-1: value-1,         key-2: value-2,     ),     key3: value3 ); 

map 的嵌套实用性也非常的强，大家可能有碰到过换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。你可以这样使用：

$theme-color: (     default: (         bgcolor: #fff,         text-color: #444,         link-color: #39f     ),     primary:(         bgcolor: #000,         text-color:#fff,         link-color: #93f     ),     negative: (         bgcolor: #f36,         text-color: #fefefe,         link-color: #d4e     ) );

在一些介绍 map 的老教程中，你会看到这样的方式声明 map:

$map: (     key1 value1,     key2 value2,     key3 value3 );  

或者：

$map:(     key1 value1,     key2 value2,     key3 (         key-1 value-1,         key-2 value-2     ),     key4 value4 );

虽然也能编译出 CSS，但建议不这样使用。