亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

floor() 向下取整函數

ceil() 向上取整函數

百分數：percentage()

大小寫轉換

to-upper-case

to-lower-case

unquote()刪除字符串引號 只能刪除前后

加號和減號前后都添加空格，不然會識別成鏈接符

join中有個separator參數，默認為auto，會實際根據參數來決定用comma（逗號）還是space（空格）。建議使用join時明確指定separator。

另外join只能合并兩個列表，如果是多個列表合并，需要用到join嵌套。

nth($list,$n)其中的$n必須是大于0的整數?

取值范圍：[0,1)

quote字符串中間有單引號或者空格時，需要用雙引號括起來。unquote則不需要用雙引號括起來。另外quote中如果遇到特殊符號，比如!、?、>、-、_也需要用雙引號括起。

through遍歷時包含end這個數，to則不含end

語法結構：

@for 変數 from 數字 through 數字 {}

$***変數內 也可放 標簽

@extend：樣式繼承

@for應用在網格系統生成各個格子 class 的代碼：

//SCSS?
$grid-prefix:?span?!default;
$grid-width:?60px?!default;
$grid-gutter:?20px?!default;

%grid?{
??float:?left;
??margin-left:?$grid-gutter?/?2;
??margin-right:?$grid-gutter?/?2;
}
@for?$i?from?1?through?12?{
??.#{$grid-prefix}#{$i}{
????width:?$grid-width?*?$i?+?$grid-gutter?*?($i?-?1);
????@extend?%grid;
??}??
}

編譯出來的 CSS:

.span1,?.span2,?.span3,?.span4,?.span5,?.span6,?.span7,?.span8,?.span9,?.span10,?.span11,?.span12?{
??float:?left;
??margin-left:?10px;
??margin-right:?10px;
}

.span1?{
??width:?60px;
}

.span2?{
??width:?140px;
}

.span3?{
??width:?220px;
}

.span4?{
??width:?300px;
}

.span5?{
??width:?380px;
}

.span6?{
??width:?460px;
}

.span7?{
??width:?540px;
}

.span8?{
??width:?620px;
}

.span9?{
??width:?700px;
}

.span10?{
??width:?780px;
}

.span11?{
??width:?860px;
}

.span12?{
??width:?940px;
}

將上面的示例稍做修改，將 @for through 方式換成 @for to:：

//SCSS
@for?$i?from?1?to?13?{
??.#{$grid-prefix}#{$i}{
????width:?$grid-width?*?$i?+?$grid-gutter?*?($i?-?1);
????@extend?%grid;
??}??
}

其最終編譯出來的 CSS 代碼和上例所編譯出來的一模一樣。

這兩段 Sass 代碼并無太多差別，只是 @for中的 <end> 取值不同。配合 through 的 <end> 值是 12，其遍歷出來的終點值也是 12，和 <end> 值一樣。配合 to 的 <end> 值是 13，其遍歷出來的終點值是 12，就是 <end> 對就的值減去 1 。

在SASS的@for循環中有兩種方式：

@for $i from <start>? through? <end>

@for $i from <start>? ?to? <end>

$i表示變量

start表示起始值

end表示結束值

這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數

你編譯出來的 CSS 代碼中，不會有新代碼添加，但在命令終端可以看到提示信息：

WARNING:?No?color?found?for?faceboo?in?$social-colors?map.?Property?ommitted.
?????????on?line?25?of?test.scss

是不是非常的友好。但總覺得這樣寫是傻傻的，總不可能每獲取一個 key 都寫一個 @if 語句吧。其實不用這么復雜，我們可以自定義一個函數，比如 colors():

@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-dribble?{
????color:?colors(dribble);
}
.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);
}