-
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
提交
取消