-
zip()函数 zip()函数将多个列表值转成一个多维的列表： >> zip(1px 2px 3px,solid dashed dotted,green blue red) ((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000)) 在使用zip()函数时，每个单一的列表个数值必须是相同的： >> zip(1px 2px 3px, solid , green blue red) NoMethodError: undefined method `options=' for nil:NilClass Use --trace for backtrace. 否则将会出错。 zip()函数中每个单一列表的值对应的取其相同位置值： |--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---| |------------|--------------|--------------|--------------| | List1 | 1px | 2px | 3px | |------------|--------------|--------------|--------------| | List2 | solid | dashed | dotted | |------------|--------------|--------------|--------------| | List3 | green | blue | red | |------------|--------------|--------------|--------------| zip()函数组合出来就成了： 1px solid green, 2px dashed blue, 3px dotted red查看全部
-
append() 函数是用来将某个值插入到列表中，并且处于最末位。 >> append(10px 20px ,30px) (10px 20px 30px) >> append((10px,20px),30px) (10px, 20px, 30px) >> append(green,red) (#008000 #ff0000) >> append(red,(green,blue)) (#ff0000 (#008000, #0000ff)) 如果没有明确的指定 $separator 参数值，其默认值是 auto。 如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。 如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔； 如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。 当然，在 append() 函数中，可以显示的设置 $separator 参数， 如果取值为 comma 将会以逗号分隔列表项 如果取值为 space 将会以空格分隔列表项 >> append((blue green),red,comma) (#0000ff, #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,comma) (#0000ff, #ff0000) >> append(blue,red,space) (#0000ff #ff0000)查看全部
-
如此一来，会有多种情形发生，造成使用混乱的情形，如果你无法记得，什么时候会是用逗号分隔合并的列表项，什么时候是使用空格分隔合并 的列表项，在些建议大家使用 join() 函数合并列表项的时候就明确指定 $separator 参数，用来指定合并的列表中使用什么方式来分隔列表项： >> join(blue,red,comma) (#0000ff, #ff0000) >> join(blue,red,space) (#0000ff #ff0000) >> join((blue green),(red,orange),comma) (#0000ff, #008000, #ff0000, #ffa500) >> join((blue green),(red,orange),space) (#0000ff #008000 #ff0000 #ffa500) >> join((blue, green),(red,orange),comma) (#0000ff, #008000, #ff0000, #ffa500) >> join((blue, green),(red,orange),space) (#0000ff #008000 #ff0000 #ffa500) >> join(blue,(red,orange),comma) (#0000ff, #ff0000, #ffa500) >> join(blue,(red,orange),space) (#0000ff #ff0000 #ffa500) >> join(blue,(red orange),comma) (#0000ff, #ff0000, #ffa500) >> join(blue,(red orange),space) (#0000ff #ff0000 #ffa500)查看全部
-
在 join() 函数中除非明确指定了 $separator值，否则将会有多种情形发生： 如果列表中的第一个列表中每个值之间使用的是逗号（,），那么 join() 函数合并的列表中每个列表项之间使用逗号,分隔： >> join((blue, red, #eff),(green orange)) (#0000ff, #ff0000, #eeffff, #008000, #ffa500) 但当第一个列表中只有一个列表项，那么 join() 函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的，如果第二列表项中使用是,分隔，则使用逗号分隔；如果第二列项之间使用的空格符，则使用空格分隔： >> join(blue,(green, orange)) (#0000ff, #008000, #ffa500) >> join(blue,(green orange)) (#0000ff #008000 #ffa500)查看全部
-
在 join() 函数中还有一个很特别的参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto。 join() 函数中 $separator 除了默认值 auto 之外，还有 comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔。查看全部
-
@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。查看全部
-
@for $i from <start> through <end> @for $i from <start> to <end> 区别查看全部
-
sass查看全部
-
$list: adam john wynn mason kuroir;//$list 就是一个列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; }查看全部
-
@mixin color($colors...){ @if length(keywords($colors)) != 0 { $colors_map: keywords($colors); @each $key, $value in $colors_map { .btn-#{$key} { color: $value; } } } @else if length($colors) > 1 { @for $i from 1 through length($colors) { .btn-#{$i} { color: nth($colors, $i); } } } @else if length($colors) == 1 { .btn-only { color: $colors; } } @else if length($colors) == 0 { $colors:red; .btn-default { color: $colors; } } } @include color(); @include color(green); @include color(#D65252,#441414,#1B2AD1); @include color( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee);查看全部
-
一些语法就要多用，去熟悉她们查看全部
-
列表函数nth和index刚好相反查看全部
-
Sass 中，也提供了系列透明函数，只不过这系列的透明函数主要用来处理颜色透明度： alpha($color) /opacity($color)：获取颜色透明度值； rgba($color, $alpha)：改变颜色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明； transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。查看全部
-
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。来看一个简单的示例：查看全部
-
在使用zip()函数时，每个单一的列表个数值必须是相同的 zip()函数中每个单一列表的值对应的取其相同位置值： --- List ------ nth(1) ------ nth(2) ------ nth(3) --- ------------------------------------------------------ List1 1px 2px 3px ------------------------------------------------------ List2 solid dashed dotted ------------------------------------------------------ List3 green blue red ------------------------------------------------------查看全部
举报
0/150
提交
取消