在来复习一下css预编译
其实css预编译很简单，而且可以做到动态传参，使用变量等，超级方便，但是不经常使用，是会生疏的，所以一下就来撸一下@mixin,%,@function及他们的用法：
|
名称 |
传参 |
调用方式 |
产生样式的存在方式 |
|
@mixin |
YES |
@include |
以复制拷贝的方式 |
|
% |
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)
单纯的梳理知识点是缺少灵性的，所以要注重在项目中应用，达到，熟练使用，举一反三的程度是最好的。
关于预编译就写这么多，以后具体在项目中用到了（其实以前就用到过了，只不过熟练度还不够）在继续完善，学无止境，再接再厉。
