其實css預編譯很簡單，並且能夠作到動態傳參，使用變量等，超級方便，可是不常常使用，是會生疏的，因此一下就來擼一下@mixin,%,@function及他們的用法：css
| 名稱web |
傳參less |
調用方式函數 |
產生樣式的存在方式spa |
| @mixinci |
YESscss |
@includeit |
以複製拷貝的方式io |
| %編譯 |
NO |
@extend |
以組合申明的方式 |
@mixin的使用方法：
_mixin.scss
@mixin center_block{
margin-left : auto;
margin-right : auto;
}
style.scss
@import ‘_mixin’;
#header {
width:1000px;
@include center-block;
}
.gallery {
width:600px;
@include center-block;
}
@mixin參數簡單版
@mixin float ($float:left){
float : $float;
@if $lte7{
display : inline;
}
}
調用的例子：
.fl {
@include float;
}
.fr {
@include float(right)
}
多個參數的@mixin
@mixin disabled（￥bgColor:#e6e6e6,$textColor :#bababa）{
background-color:$bgColor!important;
color:$textColor!important;
cursor:not-allowed!important;
}
一個屬性是能夠有多個屬性值的，只不過在傳參的時候加上…
@mixin box-shadow($shadow){
-webkit-box-shadow :$shadow;
-moz-box-shadow:$shadow;
box-shadow:$shadow;
}
應用：
.shadow2{
@include box-shadow(0 0 5px rgba(0,0,0,.3),inset 0 0 3px rgba(255,255,255,.5));
//這個不可運行
}
第二個不能運行的緣由是爲box-shadow設置了兩個值，一個外影音一個內陰影，而且是以，分開的，實際狀況是得在傳遞的參數後面加上…
@mixin box-shadow($shadow…){
-webkit-box-shadow :$shadow;
-moz-box-shadow:$shadow;
box-shadow:$shadow;
}
@content 選擇了選擇器
@mixin header {
#header {
@content;
}
}
調用：
@include header {
width :1000px;
height:200px;
.logo {
width:200px;
}
}
解析後的css ：
#header {
width：1000px;
height:200px;
}
#header .logo {
width:200px;
}
%
實例：
%center-block {
@include center-block;
}
#header {
width:1000px;
@extend %center-block;
}
.gallery {
width:600px;
@extend %center-block;
}
解析成的css：
#header , .gallery {
margin-left:auto;
margin-right:auto;
}
#header {
width:1000px;
}
.gallery {
width:600px;
}
清浮動:
$lte7:true;
%clearfix {
@if $lte7 {
*zoom :1
}
&:before,
&:after {
content:」」;
display:table;
font:0/0 a;
}
&:after {
clear:both;
}
}
若是哪一個要調用這個，直接@extend：
.wrap {
@extend %clearfix;
}
-首先%定義的站位選擇器樣式不能傳遞參數，固然注意不能傳遞參數，不表明樣式裏不能使用變量
-而後@extend調用%聲明的東西時，必需要把%帶上，@extend %clearfix是正確的，而@extend clearfix是錯誤的調用
-最後%定義的樣式，若是不調用是不會產生任何樣式的，這也是用%定義樣式比原先用class方法定義的好處所在
@function與@mixin，%的不一樣點在於自己就有一些內置的函數，方便咱們使用，如color函數
舉例：內置的darken函數：
darken（$f00,50%）自己做爲屬性值：
$redDark:darken($f00,50%)!default
p{
color:darken($f00,70%)
}
函數總結：
rgba
ie-hex-str
darken
lighten
percentage
length
nth
unit
unitless
三目判斷if($condition,$if-true,$if-false)
單純的梳理知識點是缺乏靈性的，因此要注重在項目中應用，達到，熟練使用，觸類旁通的程度是最好的。
關於預編譯就寫這麼多，之後具體在項目中用到了（其實之前就用到過了，只不過熟練度還不夠）在繼續完善，學無止境，再接再礪。