Sass基础(六)_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Sass基础(六)_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含14965字，纯文字阅读大概需要22分钟。
内容图文
join() 函数join()函数是将两个列表连接合并成一个列表。
>>join(10px 20px, 30px 40px)
(10px 20px 20px 40px)
>>join((blue,red),(#abc,#def))
(#0000ff,#ff0000,#aabbcc,#ddeeff)
不过join()只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错
将多个join（）函数合并在一起使用
>>join((blue red),join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbb)
在join()函数中还有一个特别的的参数$separator,这个参数主要是用来给列表函数连接列表值是，使用的
分割符号，默认为auto.
join()函数中$separator 除了默认值auto之外。还有comma 和space 两个值，其中comma指定列表中的列表
值之间使用空格（，）分割。space 值指定列表中的列表项之间使用空格() 分割。
在join()函数中除非明确指定了$separator值，否则将会有多种情形发生
如果列表中的第一个列表中每个值之间使用的是逗号（，）那么join()函数合并的列表中每个列表项之间使用的逗号，分割：
>> join((blue, red,#fff),(green orange))
(#0000ff,#ff0000,#eeffff,#08000,#ffa500)
但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项
目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用
的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列
项之间使用的空格符，则使用空格分隔：
>>join(blue,(green,orang))
(#0000ff,#008000,#ffa500)
>>join((blue green),(red orange))
(#0000ff #008000 #ff0000 #ffa500)
如果当两个列表中的列表项小于1时，将会以空格分隔：
>>join(blue,red)
(#0000ff #ff0000)
append()函数
ppend()函数是用来将某个值插入到列表中，并且处于最末位
>>append(10px 20px ,30px)
(10px 20px 30px)
>>append((10px,20px),30px)
(10px,20px,30px)
>>append(green,red)
(#008000 #ff0000)
>>append(red,(greenblue))
(#ff0000(#008000, #0000ff))
如果没有明确的指定$separator 参数值，其默认值是auto
如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。
如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；
如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。
当然，在append()函数中，可以显示的设置$separator 参数，
如果取值为comma 将会以逗号分隔列表项
如果取值为space将会空格分隔列表项
>>append((blue green),red,comma)
(#0000fff,#008000,#ff0000)
>>append((blue green),red,space)
(#0000ff #008000 #ff0000)
>>append((blue,green),red,comma)
(#0000ff,#008000,#ff0000)
>>append((blue,green),red,space)
(#0000ff #008000 #ff0000)
>>append(blue,red,space)
(#0000ff #ff0000)
zip()函数
zip()函数将多个列表值转成一个多维的列表：
>>zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000),(2px "dashed" #0000ff),(3px "dotted" #ff0000))
在使用zip(1px 2px 3px,solid, green blue red)
NoMethodError:undefined method 'options=' fornil:NilClass
Use --trace for backtrace
zip() 函数组合出来就成了
1px solid green, 2px dashed blue, 3px dotted red
index()函数
index()函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在Sass 中，第一个值就是1
第二个值就是2，以此类推：
>> index(1px solid red,1px)
1
>>index(1px solid red, solid)
2
>>index(1px solid red, red)
3
在index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是false, 相反就会返回对应的
的值在列表中所处的位置。
>> index(1px solid red,dotted) //列表中没有找到 datted
false
>>index(1px solid red, solid) //列表中找到solid 值并且返回的他的位置是2
2
Introspection 函数
Introspection 函数的包括几个判断型函数。
type-of($value):返回一个值的类型
unit($number): 返回一个值的单位
unitless($number)判断一个值是否带有单位
comparable($number-1,$number-2); 判断两个值是否可以做加，减合并。
Introspection 函数 -type-of()
type-of()函数主要是用来判断一个值是属于什么类型：
返回值：
number 为数值类型。
string 为字符串类型
bool为布尔类型
color为颜色类型
>> type-of(100)
“number”
>>type-of(100px)
"number"
>>type-of("asdf")
"string"
>>type-of(asdf)
"string"
>>type-of(true)
"bool"
>>type-of(false)
"bool"
>>type-of(#fff)
"color"
>>type-of(blue)
"color"
>>type-of(1/2 =1)
"string"
unit() 函数
unit()函数主要是用来获取一个值所使用的的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”
的值，不过只许乘除运算
>>unit(100)
""
>>unit(100px)
"px"
>>unit(20%)
"%"
>>unit(1em)
"em"
>>unit(10px * 3em)
"em * px"
>>unit(10px * 2em /3cm /1rem)
"em/rem"
但加，减碰到不同单位时，unit() 函数将会报错，除px 与cm ,mm 运算之外
>>unit(1px + 1cm)
"px"
>>unit(1px -1cm)
"px"
>>unit(1px +1mm)
"px"
unit()函数对于单位运算相对来说也没有规律，而且有些单位也无法合并成一个单位，对于我们在css 中不并不合适
>> unit(10px * 3em)
"em * px"
>> unit(10px / 3em)
"px/em"
>>unit(10px * 2em / 3cm / 1rem)
"em/rem"
unitless()函数
unitless() 函数相对来说简单明了些，只是用来判断一个值时候带有单位
如果不带单位返回的值为true,带单位返回的值为flase;
>>unitless(100)
true
>> unitless(100px)
false
>>unitless(100em)
false
>>unitless(100%)
false
>>unitless(1/2)
true
>>unitless(1/2 +2)
true
>>unitless(1px /2 +2)
false
comparable() 函数
comparable()函数主要是用来判断两个数是否可以进行 加 ，减 以及合并，如果可以返回值为true ，如果不
可以返回的值为false;
>>comparable(2px,1px)
true
>>comparable(2px,1%)
false
>>comparable(2px,1em)
false
>>comparable(2rem,1em)
false
>>comparable(2px,1cm)
true
>>comparable(2px,1mm)
true
>>comparable(2px,1rem)
false
>>comparable(2cm,1mm)
true
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,
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
);
用此功能来管理颜色的变量就非常的有条理性。
$them-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
)
);
Sass Maps的函数
前面介绍了使用map 来管理变量，但要在Sass 中获取变量，或者对map做更多有意的操作，我们必须
借助 map的函数功能 在Sass 中map 自身带了七个函数：
map-get($map,$key) 根据给定的key值，返回map 中相关的值
map-merge($map1,$map2):将两个 map 合并成一个新的map
map-remove($map,$key):从map 中所有的key
map-keys($map):返回map 中所有的key
map-values($map):返回map 中所有的value
map-has-key($map, $key): 根据给定的key 值判断，map 是否有对应的value值
如果有返回true,否则返回false
keywords($args):返回一个函数的参数，这个参数可以动态的设置key 和value.
Sass Maps的函数-map-get($map,$key)
map-get($map,$key) 函数的作用是根据$key参数，返回$key 在$map 中对应的value
如果$key不存在的$map中,将返回null 此函数包括两个参数：
$map:定义好的map
$key:需要遍历的key.
来看一个简单的示例，假设定义了一个$social-colors 的map：
$social-colors:(
dribble:#ea4c89,
facebook:#3b5998,
github:#171515,
google:#db4437,
twitter:#55acee
);
假设要获取facebook 键值对应的值#3b5998,我们就可以使用map-get() 函数来实现；
.btn-dribble{
color:map-get($social-colors,facebook);
}
编译出来的CSS：
.btn-dribble{
color:#3b5998;
}
我们来看另一种情况，假设 $social-colors 这个 map 没有 $weibo 这个 key:
.btn-weibo{
font-size:12px;
color:map-get($soscial-colors,weibo);
}
此时编译出来的是CSS：
.btn-weibo{
font-size：12px;
}
Sass Maps 的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值，当$map 中有这个$key,则函数返回true，否则返回false
前面的示例，当 $key 不在 $map 中时，使用 map-get($map,$key) 函数将返回一个 null 值
但对于开发人员，并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。
@if map-has-key($social-colors,facebook){
.btn-facebook{
color:map-get($social-colors,facebook);
}
}@else{
@warn "No color found for faceboo in $social-colors map. Property ommitted."
}
编译出来：
.btn-fackbook{
color:#3b5998;
}
有了这个函数我们就可以这样使用。
.btn-dribble{
color:colors(dribble);
}
.btn-facebook{
color:colors(facebook)
}
.btn-github{
color:colors(github);
}
.btn-google{
color:color(google)
}
.btn-twitter{
color:colors(twitter)
}
.btn-weibo{
color:colors(weibo)
}
编译出来的css
.btn-dribble{
color:#ea4c89;
}
.btn-facebook{
color:#3b5998;
}
.btn-github{
color:#171515;
}
.btn-google{
color:#db4437;
}
.btn-twitter{
color:#55acee;
}
Sass Maps 的函数-map-keys($map)
map-keys($map) 函数将会返回$map 中的所有的key. 这些值赋予一个变量，那么他就是一个列表。
map-keys($social-colors);
其返回的值为：
"dribble","facebook","github","goole","twitter"
换句话说：
$list:"dribble","facebook","github","twitter";
这个时候，可以配合Sass 的list 做很多事情。
@function colors($color){
$names:map-keys($social-colors);
@if not index($names,$color){
@warn "Waring:" '#{$color} is not a valid color name.'";
}
@return map-get($social-color,$color);
}
上面代码中最不同之处，我们使 用map-key s将 $social-colors
这个 map 的所有 key 取出，并赋予给一个名 为 $names 的列表
然后通过 index($names,$color) 返回 $color 在 $names 位置
如果这个位置不存在，将返回提示信息，如果存在将返回正确的值。
.btn-weibo{
color: colors(weibo);
}
Sass Maps的函数-map-values($map), map-merge($map1,$map2)
map-values($map)
map-values($map) 函数类似于 map-keys($map) 功能，不同的是map-values
($map) 获取的是$map 的所有value 值，可以说也是一个列表，而且，map-values($map)
中如果有相同的value 也将会全部获取出来。
如前面的示例 使用：
map-values($social-colors)
将会返回：
#ea4c89, #3b5998,#171515,#db4437,#55acee
值与值之前同样用逗号分隔。
map-merge($map1,$map2)
map-merge($map1,$map2)
map-merge($map1,$map2) 函数是将$map1和$map2 合并，然后等到一个新的$map. 如果你要快速将新的值导入到$map
中的话，这种方法是最佳方法，假设我们有两个$map:
$color:(
text:#f36,
link:#f63,
border:#ddd,
backround:#fff;
)
$typo:(
font-size:12px,
lin-height:1.6
);
如果希望将这两个$map 合并成一个map ，我们只要这样做。
$newmap: map-merge($color,$typo);
将会生成一个新的map：
$newmap:(
text:#f36,
link:#f63,
border:#ddd,
background:#fff,
font-size:12px,
line-height:1.6
);
Sass Maps 的函数-map-remove($map,$key),keywords($args)
map-remove($map,$key)
map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的
map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map，仅能通过删除
map中的某个key 得到新的map
$map:map-remove($social - colors,dribble);
返回的是一个新map
$map:(
facebook:#3b5998,
github:#171515,
google:#db4437,
twitter:#55acee
);
keywords($args)
keywords($args)
keywords($args) 函数可以通过混合宏或函数的参数变创建map.
参数也是成对出现，其中$args 变成key(会自动去掉$符号)，而
$args对应的的值是value.
@mixin map($args...){
@debug keywords($args);
}
@include map(
$dribble: #ea4c89,
$facebook:#3b5998,
$github:#171515,
$google:#db4437,
$twitter:#55acee
);
内容总结
以上是互联网集市为您收集整理的Sass基础(六)_html/css_WEB-ITnose全部内容，希望文章能够帮你解决Sass基础(六)_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。