_mixin scss
包括常用的mixin，%及@function
mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
%，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
@function，返回一个值，用于调用
-----------------------------------------------------
mixin & %
既定义了mixin也定义了%，根据需求使用@include或@extend调用
// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block ($extend:true) {
@if $extend {
@extend %inline-block;
} @else {
display: inline-block;
@if $lte7 {
*display: inline;*zoom:;
}
}
}
%inline-block{
@include inline-block(false);
}
对于这一块的理解：
$lte7:true;
@mixin inline-block ($extend:true) { //提供一个参数。来确定是否使用继承
@if $extend {
@extend %inline-block;
} @else {
display: inline-block;
@if $lte7 { //是否需要针对IE7编写样式。
*display: inline;*zoom:;
}
}
}
%inline-block{
@include inline-block(false);
} .aa{
@include inline-block(true);
}
.bb{
@include inline-block(false);
}
.cc{
@include inline-block(true);
}
.dd{
@extend %inline-block;
}
编译出来之后：
.aa, .cc, .dd {
display: inline-block;
*display: inline;
*zoom:;
}
.bb {
display: inline-block;
*display: inline;
*zoom:;
}
Center-align a block level element（中心对齐一个块级元素）
block得有宽度margin左右为auto才能居中
用法和inline-block一样；
@mixin center-block ($extend:true) {
@if $extend {
@extend %center-block;
} @else {
margin-left: auto;
margin-right: auto;
}
}
%center-block{
@include center-block(false);
}
float left & right
@mixin float($float:left) {
float: $float;
@if $lte7 {
display: inline;
}
}
%float{
@include float;
}
继承没有float:right(使用默认的float:left);
clearfix:
闭合子元素的浮动
@mixin clearfix ($extend:true) {
@if $extend {
@extend %clearfix;
} @else {
@if $lte7 {
*zoom:;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
}
%clearfix{
@include clearfix(false);
}
Hide from both screenreaders and browsers: h5bp.com/u(从浏览器和屏幕阅读器无法隐藏：h5bp.com/u)
既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden ($extend:true) {
@if $extend {
@extend %hidden;
} @else {
display: none !important;
visibility: hidden;
}
}
%hidden{
@include hidden(false);
}