join() 函數 join()函數是將兩個列表連接合併成一個列表。 >>join(10px 20px, 30px 40px) (10px 20px 20px 40px) >>join((blue,red),(#abc,#def)) (#0000ff,#ff0000,#aabbcc,#ddeeff) ...
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
);
