sass-mixin

sass 常用mixin
sass mixins,require Sass ~> 3.3.0
utility
prefix
clearfix
float
text-overflow
animation
placeholder
rem
opacity
arrow
triangle
center
media
box-sizing
touch-scroll
font
onepx
balloon
side-line
functions
string
list
usage
1 | npm i mixins-sass --save |
1 | @import "./node_modules/mixins-sass/src/mixins"; |
utility
prefix
1 | /** |
clearfix
1 | @include clearfix; |
float
1 | @include float(left); |
text-overflow
文字超出显示省略号,支持多行
1 | /** |
animation
1 | @include animation(slideUp 900ms ease both) { |
placeholder
1 | // scss |
rem
px转rem
1 | /** |
opacity
兼容ie的透明度
arrow
生成上下左右的小箭头:http://lugolabs.com/caret
1 | /** |
triangle
三角形生成
1 | /** |
center
居中
1 | /** |
media
媒体查询相关
1 | /** |
box-sizing
1 | html { |
touch-scroll
1 | body { |
font
中文字体解决方案,来自https://github.com/zenozeng/fonts.css,有font-hei
、font-kai
、font-song
、font-fang-song
。
1 | body { |
onepx
移动端1像素
方案,通过background-image
渐变色实现
1 | /** |
onepx-scale
通过transform
实现,支持圆角
1 | /** |
balloon
气泡提示,来自:balloon.css
1 | /** |
1 | <span class="balloon" data-balloon="Whats up!">Hover me!</span> |
side-line
线中间夹文字效果
http://codepen.io/anon/pen/XjNEAR
1 | /** |
functions
string
str-split
字符串分隔
1 | @function str-split($string, $delimiter: " ") |
str-repeat
字符串重复
1 | @function str-repeat($string, $times) |
str-replace
字符串替换
1 | @function str-replace($string, $search, $replace: "") |
list
first
返回列表第一项
1 | @function first($list) |
last
返回列表最后一项
1 | @function last($list) |
prepend
向列表前面插入一个
1 | @function prepend($list, $value) |
insert-nth
向列表某个位置插入
1 | @function insert-nth($list, $index, $value) |
replace
替换列表的某个元素 $recursive
是否全部替换
1 | @function replace($list, $old-value, $new-value, $recursive: false) |
replace-nth
替换列表某个位置的元素
1 | @function replace-nth($list, $index, $value) |
remove
删除列表某个元素 $recursive
是否删除所有
1 | @function remove($list, $value, $recursive: false) |
remove-nth
删除列表指定位置元素
1 | @function remove-nth($list, $index) |
slice
截取列表中的一部分
1 | @function slice($list, $start: 1, $end: length($list)) |
to-string
列表变成字符串,$glue
为连接符,$is-nested
是否是嵌套的列表
1 | @function to-string($list, $glue: '', $is-nested: false) |
shift
将列表部分元素前置
1 | @function shift($list, $index: 1) |
contain
列表是存在某个值
1 | @function contain($list, $value) |