Sass Maps

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

对于一位程序员来说,对数组并不会陌生。但对于前端人员(像我这样不算前端的前端)对于数组,只是听过,看过,但不知道如何使用?然而在Sass3.3版本中开始引入一个新的数据类型maps,他长得跟数组非常的相似。但也让我极其的苦逼,因为我不懂数组呀,不知道如何下手开始使用Sass的map功能。

通过阅读一些文章,觉得Sass的map是Sass的强大的特性之一,能帮助我们做好更多的事情,比如说管理媒体查询的断点管理z-index的值管理颜色管理排版等。接下来,我们一起来学习Sass的map

Sass Maps语法

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的形式赋予,其中keyvalue是成对出现,并且每对之间使用逗号(,)分隔,其中最后一组后面没有逗号。

其中键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
);
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-maps.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部