自建函数及使用方法
-
块居中函数： @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()
