10天精通Sass 之 Sass列表函数

列表函数主要有:

  • length($list)：返回一个列表的长度值；
  • nth(list,n)：返回一个列表中指定的某个标签值
  • join(list1,list2, [$separator])：将两个列给连接在一起，变成一个列表；
  • append(list1,val, [$separator])：将某个值放在列表的最后；
  • zip($lists…)：将几个列表结合成一个多维的列表；
  • index(list,value)：返回一个值在列表中的位置值。

length($list)返回一个列表的长度值

.span{
    width: length(1 2 3 5px);
}

编译出来的CSS为:

.span {
  width: 4;
}

需要注意的是,length中的列表是以空格隔开的。而不是逗号。

nth(list,n)获取列表中指定位置的值

与CSS的nth一样，index是从1开始的。

n的范围从1开始，到list的长度值，不能超出范围。

.span{
    color: nth(red blue yellow, 1);
}

编译后的CSS为：

.span {
  color: red;
}

join(list1,list2, [$separator])将两个列表连接成一个列表

separator指定分隔符号，这一点与JS的join()函数一样

div{
    font-family: join( (Helvetica "Helvetica Neue" "微软雅黑" ), (Tahoma Arial sans-serif), comma);
}

ul{
    background: join(url("bgimage.gif"), (no-repeat fixed top),space);
}

编译出来的CSS为:

div {
  font-family: Helvetica, "Helvetica Neue", "微软雅黑", Tahoma, Arial, sans-serif;
}

ul {
  background: url("bgimage.gif") no-repeat fixed top;
}

在sass中，$separator默认是auto,此外还可以是comma(逗号)和space(空格)，因为在auto的情况下，有很多的不确定性，所以我建议是，明确的指出连接符是comma或者ahispace.

append(list1,val, [$separator])用来将某个值插入到列表中，并且处于最末位

如果没有明确的指定 $separator 参数值，其默认值是 auto。

  • 如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
  • 如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；
  • 如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。

当然，在 append() 函数中，可以显示的设置 $separator 参数，

  • 如果取值为 comma 将会以逗号分隔列表项
  • 如果取值为 space 将会以空格分隔列表项
span{
    background: append((url("bgimage.gif") no-repeat fixed), top, space);
}

编译出来的CSS为:

span {
  background: url("bgimage.gif") no-repeat fixed top;
}

zip(list1,list2, “`)将多个列表值转成一个多维的列表

body{border:zip(1px 2px,solid,green blue red);}
div{border: zip(1px 2px 3px, solid dashed dotted, blue yellow pink);}

编译出来的CSS为:

body {
  border: 1px solid green;
}

div {
  border: 1px solid blue, 2px dashed yellow, 3px dotted pink;
}

从编译结果可以看出，当列表值的长度不相等时，只能以最短长度的作为标准，如上面的第一个例子。

index(list,value)：返回一个值在列表中的位置值

span{
  width: index(2px solid red, red);
}
div{
  width: index(2px solid red, dashed);
}

编译出来的CSS为:

span {
  width: 3;
}

因为index(2px solid red, dashed)返回的值时false，那么就不会在编译结果中出现。

Introspection函数

Introspection 函数包括了几个判断型函数：

  • [ ] type-of($value)：返回一个值的类型,返回值的类型有:number, string, bool, color
  • [ ] unit($number)：返回一个值的单位
  • [ ] unitless($number)：判断一个值是否带有单位,没有单位返回true,带单位范围false
  • [ ] comparable(number?1,number-2)：判断两个值是否可以做加、减和合并

三元条件函数

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

当 condition条件成立时，返回的值为if-true，否则返回的是 $if-false 值。

Map()成为数据地图，以key:value出现

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

Sass的map允许嵌套，其实就是把某一个key当成map,里面继续放一对或者多对的key:value

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

如：

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

Map功能函数

  • [ ] map-get(map,key)：根据给定的 key 值，返回 map 中相关的值。
  • [ ] map-merge(map1,map2)：将两个 map 合并成一个新的 map。
  • [ ] map-remove(map,key)：从 map 中删除一个 key，返回一个新 map。
  • [ ] map-keys($map)：返回 map 中所有的 key。
  • [ ] map-values($map)：返回 map 中所有的 value。
  • [ ] map-has-key(map,key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
  • [ ] keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

map-get(map,key)根据给定的 key 值，返回 map 中相关的值

$fontSize: (
    default: 12px,
    lgSize: 24px,
    mdSize: 18px
);

div{
    font-size: map_get($fontSize, default);
}

编译出来的CSS为:

div {
  font-size: 12px;
}

对于嵌套的map，需要多次使用map_get方法。

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

div{
    background-color: map-get(map-get($theme-color, primary),bgcolor);
}

编译出来的CSS为:

div {
  background-color: #000;
}

当key不在map中时，map_get返回Null.不会返回错误

$fontSize: (
    default: 12px,
    lgSize: 24px,
    mdSize: 18px
);

div{
    font-size: map_get($fontSize, default);
    color: map_get($fontSize,color);
}

编译出来的CSS为:

div {
  font-size: 12px;
}

map-has-key(map,key)判断key是否在map中

map_get在获取值时，即使key不在map中也不会返回错误。因此，我们可以在使用map_get获取值之前，先使用map_has_key(map,key)去判断key是否在map中，如果子在，返回true.否则返回false.

应用:

$social-colors: (
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}
.btn-facebook {
    color: colors(facebook);
}
.btn-github {
    color: colors(github);
}
.btn-google {
    color: colors(google);
}
.btn-twitter {
    color: colors(twitter);
}
.btn-weibo {
    color: colors(weibo);
}

编译出来的CSS为:

.btn-facebook {
  color: #3b5998;
}

.btn-github {
  color: #171515;
}

.btn-google {
  color: #db4437;
}

.btn-twitter {
  color: #55acee;
}

这里使用了自定义函数colors.

编译时会给出告警信息: No color found for ‘weibo’

上面的例子还可以用更简单的方式来写(利用@each指令)：

@each $social-network,$social-color in $social-colors {
    .btn-#{$social-network} {
        color: $social-color;
    }
}

这里使用的方法是 @each key,value in $map。需要注意的是：不能给key,value加上括号。

map-keys(map)返回map中所有的key

上面的例子还可以通过nth和for循环来写:

$social-colors: (
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}

@for $i from 1 through length(map-keys($social-colors)){
    .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
    }
};
$globalColors: (
    default: #ccc,
    active: #DCFD63,
    hover: #463DFD,
    link: #FD7556
);

@function colors($color){
    $names: map-keys($globalColors);
    @if index($names, $color){
        @return map-get($globalColors, $color);
    }

    @warn "Warning: ‘#{$color}‘ is not a valid color name.";
};

.btn-default{
    color: colors(default);
    &:hover{
        color: colors(hover);
    }
    &:link{
        color: colors(link);
    }
    &:active{
        color: colors(active);
    }
}

map-keys(map)返回是一个列表值。index(index(list, value)：返回一个值在列表中的位置值,如果value不在$list中，返回false.

编译出来的CSS为:

.btn-default {
  color: #ccc;
}
.btn-default:hover {
  color: #463DFD;
}
.btn-default:link {
  color: #FD7556;
}
.btn-default:active {
  color: #DCFD63;
}

map-values(map)获取map中所有的key值

$globalColors: (
    default: #ccc,
    active: #DCFD63,
    hover: #463DFD,
    link: #FD7556
);
span{
    color: map-values($globalColors);
}

编译出来的CSS为:

span {
  color: #ccc, #DCFD63, #463DFD, #FD7556;
}

返回的值与值之间，使用逗号分隔。这个例子并没有实际意义，仅仅是演示map-values($map)的功能。

map-merge(map1,map2)将map1和map2进行合并，返回一个新的map

如果map1和map2中有相同的key名，那么map2中的key对于的值会覆盖map1中的。

$globalColors: (
    default: #ccc,
    active: #DCFD63,
    hover: #463DFD,
    link: #FD7556
);
$globalFont: (
    default: 14px,
    large: 18px,
    middle: 16px
);

$newmap: map-merge($globalColors, $globalFont);

@each $key,$value in $newmap{
    .span-#{$key}{
        #{$key}: $value
    }
}

编译出来的CSS为:

.span-default {
  default: 14px;
}

.span-active {
  active: #DCFD63;
}

.span-hover {
  hover: #463DFD;
}

.span-link {
  link: #FD7556;
}

.span-large {
  large: 18px;
}

.span-middle {
  middle: 16px;
}

map-remove(map,key)删除map中的key，返回新的map,如果key不在map中，那么返回的仍然是原来的$map

$globalColors: (
    default: #ccc,
    active: #DCFD63,
    hover: #463DFD,
    link: #FD7556
);
$newmap: map-remove($globalColors, default);

@each $key,$value in $newmap{
    .span-#{$key}{
        #{$key}: $value
    }
}

编译出来的CSS为:

.span-active {
  active: #DCFD63;
}

.span-hover {
  hover: #463DFD;
}

.span-link {
  link: #FD7556;
}

从编译结果可以看出，default已经被删除了。

keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

时间： 2024-10-11 22:38:30

10天精通Sass 之 Sass列表函数的相关文章

10天精通Sass 之 处理字符串与数字的函数

Sass的函数简介 Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数 除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数. 字符串函数 * unquote($string) * :删除字符串中的引号 * quote($string) * :给字符串加引号 unquote()函数 用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串. .test1 { conte

Sass函数--列表函数

列表函数简介 列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值  join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表: append($list1, $val, [$separator]):将某个值放在列表的最后: zip($lists…):将几个列表结合成一个多维的列表: index($list, $value):返

Sass控制命令及函数知识整理

2017-07-07  20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22  09:11:43 一.Sass的控制命令 [email protected]语句 @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块. 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 示例::控制一个元素隐藏或显示的代码, 原理:定义一个混合宏,通过 @

Sass语言的一些函数

unquote()函数 unquote()函数主要是用来删除一个字符串中的引号,如果这个字符串没有带有引号,将返回原始的字符串.简单的使用终端来测试这个函数的运行结果: //SCSS?? .test1?{?? ????content:?unquote('Hello?Sass!');?? }.test2?{?? ????content:?unquote("'Hello?Sass!");?? }.test3?{?? ????content:?unquote("I'm?Web?De

sass学习--sass的函数功能（进阶篇）

1.字符串功能: unquote($string):删除字符串中的引号: quote($string):给字符串添加引号: To-upper-case($string):将字符串小写字母转换为大写字母 To-lower-case($string):将字符串大写字母转换为小写字母 unquote($string): //sass:unquote($string) .test2 { content: unquote("'Hello Sass!"); } .test3 { content:

grunt serve Warning: Running "sass:server" (sass) task

使用grunt serve运行时遇到一问题: [email protected]:ydkt$ grunt serve Running "serve" task Running "clean:server" (clean) task Cleaning .tmp...OK Running "env:all" (env) task Running "injector:sass" (injector) task Missing opt

SASS - 使用Sass程序

SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend(继承)指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 现在已经安装了Sass程序,接下来我们将创建一个Sass文件,然后使用Sass程序将其转换为css文件. 编写源文件 打开编辑器(任何代码编辑器都可以)创建一个名为styles.scss的文件,注意.s

10分钟精通SharePoint - SharePoint拓扑结构

SharePoint服务器角色:前端,应用程序和数据库服务器 应用程序服务:搜索.Office文档.User Profile和App等应用服务器 数据库类型:内容数据库.应用程序数据库和配置数据库 规划实际SharePoint场的拓扑架构,需要根据实际的参数进行相应的规划,例如:用户数量.数据量,并发请求量等等 释放价值,分享知识和经验,解读IT前沿和技术相关.帮助他人,提升自己.更多交流请关注微信公众号itboxes(IT智囊)或添加微信chrismng. 我们致力于将复杂技术简单化,简单技术

10分钟精通SharePoint - SharePoint安装

简介 接触SharePoint就避免不了要接触SharePoint安装,无论你是对SharePoint进行开发还是管理(终端用户除外).SharePoint的安装涉及到两部分:预装.安装和配置,这主要由SharePoint的设计或者说架构决定的. 过程 预装:这是一个安装SharePoint运行所需组件的过程,例如: 分布式缓存,SQL Server Client,WCF等等 安装:安装SharePoint的可执行文件(exe.dll)和一些模板文件(Feature.站点模板.webpart.a