其实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)
单纯的梳理知识点是缺乏灵性的，因此要注重在项目中应用，达到，熟练使用，触类旁通的程度是最好的。
关于预编译就写这么多，之后具体在项目中用到了（其实之前就用到过了，只不过熟练度还不够）在继续完善，学无止境，再接再砺。