sasscore学习之_mixin.scss

_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:1;
    }
  }
}
%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:1;
    }
  }
}
%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: 1;
}

.bb {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

 

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: 1;
    }
    &: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);
}