sass 函数

自建函数及使用方法

1. 块居中函数： @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()  // 重点
}

2. 垂直居中图片： @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()
}

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

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

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

自建动画函数及使用方法

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

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

2. 从左、从右、从上、从下滑入 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函数及使用方法(删除部分原有函数)

1. 设定 上 、 左、右 、 下倒角

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

2. 清除浮动

@include clearfix()

3. 按钮颜色

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

4. 按钮大小

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

5. 横向居中块

@include center-block()

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

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

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

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

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

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

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

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

10. 标签制作

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

11. 透明度(IE兼容)

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

12. 去掉IE中的渐变

  @include reset-filter()

13. 字体重置

  @include reset-text()

14. 块的大小设定

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

15. 文字溢出

@include text-overflow()