sass 函数

自建函数及使用方法

块居中函数： @mixin center-block();
作用：垂直居中及水平居中某个块元素
需要：父元素为 relative
使用：@include center-block()

 <li style="background-color:red; position: relative">
      <div class="center-block"></div>
 </li>

//CSS
.center-block{
  background-color: greenyellow;
  @include size(30px, 40px);

  @include center-block()  // 重点
}

垂直居中图片： @mixin center-img();
作用：垂直居中及水平居中图片
需要：固定HTML结构
使用：@include center-img();
html结构：

<div class="center-img">
  <img class="centerimg" src="~IMGS/Pixel.gif" style="background-image:url(需要的IMG地址);">
</div>

//CSS 
.centerbox{
  @include center-img()
}

文字溢出省略： @mixin overflow-ellip()
作用：文字溢出省略
需要：无
使用：@include overflow-ellip()

    <li class='overflow-ellipsis'>
        大段文字
    </li>

//CSS 
.overflow-ellipsis {
  @include overflow-ellip()
}

自建动画函数及使用方法

渐显渐隐 toggle-fade
使用方法：在某页引入所需要的scss块

<transition name="toggle-fade">
   <p v-if="show">hello</p>
</transition>
@import "../assets/styles/animate/toggle-fade.scss";

从左、从右、从上、从下滑入 slide-left / slide-right / slide-top / slide-down
使用方法：在某页引入CSS的scss块

<transition name="slide-right">
        <p v-if="show">slide-top</p>
        或： <p v-if="show">slide-right</p>
        或：<p v-if="show">slide-left</p>
        或：<p v-if="show">slide-down</p>
 </transition>

@import "../assets/styles/animate/slide-top.scss";
//@import "../assets/styles/animate/slide-right.scss";
//@import "../assets/styles/animate/slide-left.scss";
//@import "../assets/styles/animate/slide-down.scss";

Bootstrap函数及使用方法(删除部分原有函数)

设定上、左、右、下倒角

@include border-top-radius(5px)
@include border-left-radius(5px)
@include border-right-radius(5px)
@include border-bottom-radius(5px)

清除浮动

@include clearfix()

按钮颜色

@include button-variant(文字颜色, 背景色, 边框色)

按钮大小

@include button-size(垂直padding,横向padding, 字体大小, 行高, 倒角)

横向居中块

@include center-block()

渐变函数（IE9以下无法兼容）

//横向渐变
@include gradient-horizontal（开始色，结束色，开始处%，结束处%） 
//纵向渐变
@include gradient-vertical（开始色，结束色，开始处%，结束处%） 
//三色横向渐变
@include gradient-horizontal-three-colors（开始色，中间色，中间处%，结束色）
//三色纵向渐变
@include gradient-vertical-three-colors（开始色，中间色，中间处%，结束色）
// 涟漪渐变
@include gradient-radial（内圈色， 外圈色）
// 条纹渐变
@include gradient-striped（颜色， 角度deg）

无显示文字（用于盲文显示器）

@include text-hide()
or
@include hide-text()

图片的响应式显示1 - Keep images from scaling beyond the width of their parents.

@include img-responsive() 参数为空或为block

图片的响应式显示2 - Retina image
min--moz-device-pixel-ratio 是有意的

@include img-retina($file-1x, $file-2x, $width-1x, $height-1x)

标签制作

@include label-variant(颜色)
例子：
a{
  @include label-variant(#ddd)
}

透明度(IE兼容)

@include opacity(透明度)
例子：
div{
  @include opacity(0.5)
}

去掉IE中的渐变

  @include reset-filter()

字体重置

  @include reset-text()

块的大小设定

div{
  @include size（宽， 高）//长方形
  @include square（边长）//正方形
}

文字溢出

@include text-overflow()

sass 函数

自建函数及使用方法

自建动画函数及使用方法

Bootstrap函数及使用方法(删除部分原有函数)

推荐阅读更多精彩内容