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

Sass是最早的CSS預處理語言，比LESS更為強大

使用Ruby語言編寫的一款CSS預處理器

CSS預處理器：Sass、LESS、Stylus

使用變量、簡單的邏輯程序、函數，讓CSS更簡潔、適應性強、可讀性好

sass編譯的輸出樣式風格：

• 嵌套輸出方式：nest

• 展開輸出方式：expand

• 緊湊輸出方式：compact

• 壓縮輸出方式：compressed
  

sass與scss的區別：

• 文件擴展名不同，sass是以.sass后綴為擴展名；而scss是以.scss后綴為擴展名

• 語法書寫方式不同，Sass是以嚴格的縮進式語法規則來寫，不帶大括號和分號；而scss的語法與css類似。
  

//SCSS
p?{
??font:?10px/8px;?????????????//?純?CSS，不是除法運算
??$width:?1000px;
??width:?$width/2;????????????//?使用了變量，是除法運算
??width:?round(1.5)/2;????????//?使用了函數，是除法運算
??height:?(500px/2);??????????//?使用了圓括號，是除法運算
??margin-left:?5px?+?8px/2px;?//?使用了加（+）號，是除法運算
}

.box?{
??width:?(1000px?/?100px);
}

編譯出來的CSS如下：

.box?{
??width:?10;
}

加減法，單位不同，報錯。

sass值列表：

獨立的值也被視為值列表。

(1px 2px)(3px 4px)是包含兩個值列表的值列表。

1px 2px 3px 4px是包含四個值的值列表。

編譯成css是一樣的，但是在scss中意義不同。

()是空的列表，會報錯。

值列表中包含空的值列表或空值，編譯清除空值，

如1px 2px () 3px 或1px 2px null 3px。

列表函數：

nth函數：直接訪問值列表中的某一項。

join函數：多個值列表連結在一起。

append函數：值列表中添加值。

@each規則：給值列表的每個項目添加樣式。

編譯css文件不改變類型，只有使用插值語句#{}有引號編譯為無引號。

當deprecated = property syntax時，所有字符串都被編譯為無引號字符串。

[Sass]混合宏 VS 繼承 VS 占位符

[Sass]占位符 %placeholder

這段代碼沒有被 @extend 調用，他并沒有產生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。只有通過 @extend 調用才會產生代碼：

//SCSS


.btn?{??
????@extend?%mt5;
????@extend?%pt5;
??}

.block?{
??@extend?%mt5;

??span?{
??????@extend?%pt5;
??}
}

編譯：

//CSS
.btn,?.block?{
??margin-top:?5px;
}

.btn,?.block?span?{
??padding-top:?5px;
}

@extend 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起。

sass繼承【@extend】：

//SCSS
.btn?{
??border:?1px?solid?#ccc;
??padding:?6px?10px;
??font-size:?14px;
}

.btn-primary?{
??background-color:?#f36;
??color:?#fff;??
??
}

.btn-second?{
??background-color:?orange;
??color:?#fff;??
??
}

繼承類樣式塊中所有樣式代碼，而且編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器：

混合宏最不足之處：

并不能智能的將相同的樣式代碼塊合并在一起。

C) 傳多個參數

@mixin?center($width,$height){
??width:?$width;
??height:?$height;
??position:?absolute;
??top:?50%;
??left:?50%;
??margin-top:?-($height)?/?2;
??margin-left:?-($width)?/?2;
}

.box-center?{
??@include?center(500px,300px);
}

.box-center?{
??width:?500px;
??height:?300px;
??position:?absolute;
??top:?50%;
??left:?50%;
??margin-top:?-150px;
??margin-left:?-250px;
}

? 有一個特別的參數“…”。當混合宏傳的參數過多之時，可以使用參數來替代，如：

@mixin?box-shadow($shadows...){
??@if?length($shadows)?>=?1?{
????-webkit-box-shadow:?$shadows;
????box-shadow:?$shadows;
??}?@else?{
????$shadows:?0?0?2px?rgba(#000,.25);
????-webkit-box-shadow:?$shadow;
????box-shadow:?$shadow;
??}
}

.box?{
??@include?box-shadow(0?0?1px?rgba(#000,.5),0?0?2px?rgba(#000,.2));
}

.box?{
??-webkit-box-shadow:?0?0?1px?rgba(0,?0,?0,?0.5),?0?0?2px?rgba(0,?0,?0,?0.2);
??box-shadow:?0?0?1px?rgba(0,?0,?0,?0.5),?0?0?2px?rgba(0,?0,?0,?0.2);
}

B) 傳一個帶值的參數

@mixin?border-radius($radius:3px){
??-webkit-border-radius:?$radius;
??border-radius:?$radius;
}

調用默認混合宏：

.btn?{
??@include?border-radius;
}

調用隨機傳值的混合宏：

.box?{
??@include?border-radius(50%);
}

A) 傳一個不帶值的參數

聲明參數不帶值的混合宏：

@mixin?border-radius($radius){
??-webkit-border-radius:?$radius;
??border-radius:?$radius;
}

調用：

.box?{
??@include?border-radius(3px);
}

編譯出：

.box?{
??-webkit-border-radius:?3px;
??border-radius:?3px;
}