Sandal

mixin文件

_mixin.scss文件中除了定义了一些@mixin，还定义了一些%和@function，总的来说就是定义了一些平常可应用到的实际功能。

三者的调用方式分别为：

@mixin通过@include来调用；
%通过@extend来调用；
@function则是返回一个值。

@mixin和%的区别在于，调用%解析后的css是联合申明的。详细解说请参考：sass揭秘之@mixin，%，@function。

某些代码既定义了@mixin，也定义了%，开发者可以根据自己的需求或喜好调用。@mixin如果定义了多个参数，我们可以针对有默认值的参数进行hash方式的传参，具体参考下面的代码。

center-block

@include center-block;

@include center-block(false);

@extend %center-block;

clearfix

@include clearfix;

@include clearfix(false);

@extend %clearfix;

hidden-clip

@include hidden-clip;

@include hidden-clip(false);

@extend %hidden-clip;

ellipsis

ellipsis-lines定义了多行省略，只支持老版本的flex-box

@include ellipsis;

@include ellipsis(false);

@extend %ellipsis;

@include ellipsis-lines(2); // line num

word-break

@include word-break;

@include word-break(false);

@extend %word-break;

disabled

可传入三个变量$textColor, $bgColor, $borderColor 分别表示文本色，背景色，边框色

@include disabled;

@include disabled($borderColor: #ccc); // 设置边框颜色

@extend %disabled;

ir

图片替换文字

@include ir;

@include ir(false);

@extend %ir;

fixed

变量$pos可设置length值，也可以是bottom或all关键词

@include fixed(44px); // top值为44px

@include fixed(all); // top和bottom都为0

@extend %fixed-bottom;

@extend %fixed-top;

justify

左右对齐

@include justify ;

@include justify(false);

@extend %justify;

retina one px

// ios9  0.5px
@include retina-one-px {
    .demo {border-width: 0.5px;}
}

// 使用linear-gradient实现
// 安卓4.3- 不支持background-size的百分比
// 参数$direction(可取值top/right/bottom/left/v/h/all，v表示top&bottom，h表示left&right，all表示四边，默认为top), $color(边框颜色，默认为全局变量$colorBorder)
@include retina-one-px-bg(v);

// 使用border及transform实现
// 通过before 和 after 生成，请注意层级问题
// 参数$direction(可取值top/right/bottom/left/all，默认为top), $color(边框颜色，默认为全局变量$colorBorder)
@include retina-one-px-border(bottom);

// 使用上面第三种方案实现
@extend %border-tb;
@extend %border-all;

equal

等分实现，分为table方法和flex方法

参数$child，默认为li，可传入参数$child，默认为'li'，注意这个参数要加引号，因为用于子元素选择器

@include equal-table;

@include equal-flex('.item'); // 子元素的class为`.item`

line equal gap

用于单行等分，间距固定，item等分剩余宽度。可传入三个变量$gap, $child, $lr分别表示间距大小，子元素选择器，容器左右边缘是否留间隙

@include line-equal-gap;
@include line-equal-gap($child: '.item', $ir: false);

line equal item

用于单行等分，item固定宽度，间距等分剩余宽度。可传入一个变量$ir表示容器左右边缘是否留间隙

@include line-equal-item;
@include line-equal-item(false);

center

实现水平或垂直居中，分为translate方法和flex方法

参数$direction，默认为both水平垂直都居中，可传入x/y两种值，表示水平或垂直方向

@include center-translate(x);

@include center-flex;

arrow

triangle arrow

参数$direction, $borderWidth, $borderColor，分别表示方向、大小、颜色

@include triangle;

@include triangle($borderWidth: 8px);

v arrow

参数$direction, $borderWidth, $size,，分别表示方向，箭头粗细，大小

箭头颜色采用currentColor

@include v-arrow;

@include v-arrow($direction: left);

parent state

父元素状态

.parent{
    .child{
         @include parent-state(":hover"){
             color: #f00;
         }
    }
 }

 // css
 .parent:hover .child {
     color: #f00;
 }

object wrap

用于img或video等占位高度，可传入两个参数$percent, $child分别为object的高宽比，object元素

$child参数请使用单引号，因为用于子元素选择器

@include object-wrap($child: '.item-img');
@include object-wrap(75%);

animation fade

定义了fade in/out 的@keyframes

@include animation-fade
@include animation-fade($from: false, $to: .5);
@include animation-fade($from: 1, $to: 0);

animation translate

定义了translate的@keyframes

@include animation-translate
@include animation-translate($from: x -100%);
@include animation-translate($from: xy -50% -50%, $to: y -100%);
@include animation-translate($from: y 100px, $to: y 0px);

gap item

用于item整行的间隔列表

@extend %gap-item;

item-v-right

右侧箭头跳转指向

@extend %item-v-right

bar-line

具体使用场景见line-list.html

@extend %bar-line;

css3

@extend %display-flex;
@extend %transition-all;
@extend %translate3d;

btn

基础样式

默认设置了1px的border，颜色为transparent（这样可以透过看到背景色，跟没有设置border一样），这样对视觉上的有无border都可以兼容

@extend %btn-basic;

按钮大小

参数$padding, $height, $radius，分别表示左右的padding，按钮高度，圆角

@include btn-size;

@include btn-size($radius: 5px);

@include btn-size($height: 60px);

按钮颜色

参数$textColor, $bgColor, $borderColor，分别表示文本色，背景色，边框色（默认没有边框色）。

三个颜色都可以只传入一个值或者传入两个值，如传入两个值，则第二个值表示滑过颜色

@include btn-color;

@include btn-color(#fff, #188eee);

@include btn-color(#333, #666 #eee); // #eee表示滑过的背景色

tint

为颜色添加白色，以百分比形式

参数$color, $percent

.demo {
    color: tint(#333, 30%);
}

shade

为颜色添加黑色，以百分比形式