mixins-sass
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
npm i mixins-sass --save
;
utility
prefix
/** * @param $map css列表 * @param $vendors 浏览器前缀,默认:webkit moz ms o */ .test
clearfix
float
text-overflow
文字超出显示省略号,支持多行
/** * @param $line 超出显示省略号的行数,默认:1 * @param $substract 为预留区域百分比%,默认:0 */;
animation
placeholder
// scss // css ::-webkit-input-placeholder ::-moz-placeholder :-ms-input-placeholder
rem
px转rem
/** * @param $property css属性 * @param $values css属性值 * @param $support-ie 是否对不支持rem的浏览器使用px * @param $base 基准字体大小,如果不传会搜索全局变量 $base-font,如果没有默认为 16px */
opacity
兼容ie的透明度
arrow
生成上下左右的小箭头:http://lugolabs.com/caret
/** * @param $width * @param $border-width * @param $direction: top bottom left right * @param $background-color * @param $position 默认relative */
triangle
三角形生成
/** * @param $width * @param $height * @param $color * @param $direction: top bottom left right */ /** * svg背景图生成三角形 */
center
居中
/** * @param $direction: horizontal vertical both, default: both */
media
媒体查询相关
/** * @param $min min-width * @param $max max-width */ /** * @param $filename * @param $retina-filename 多个或者一个 * @param $ratio 多个或者一个 * @param $background-size */
box-sizing
html
touch-scroll
body // css body
font
中文字体解决方案,来自https://github.com/zenozeng/fonts.css,有font-hei
、font-kai
、font-song
、font-fang-song
。
body
onepx
移动端1像素
方案,通过background-image
渐变色实现
/** * @param $color * @param $direction: top bottom left right vertical all, default: all * @param $pseudo: after before, default: after */.border-l
onepx-scale
通过transform
实现,支持圆角
/** * @param $color * @param $direction: top bottom left right vertical all radius, default: all * @param $pseudo: after before, default: after * @param $radius default: 1px */.border-r
balloon
气泡提示,来自:balloon.css
/** * @param $direction: top bottom left right * @param $bg 气泡提示背景颜色 * @param $trangle-width 气泡小三角形宽度 * @param $trangle-height 气泡小三角形高度 * @param $color 气泡文字颜色 * @param $font 气泡文字大小 */ .balloon
Hover me!
side-line
线中间夹文字效果
http://codepen.io/anon/pen/XjNEAR
/** * @param $height 线高 default: 1px * @param $space 线距离文字两边的距离 default: 0.5em * @param $color 线颜色 default: inherit * @param $style border-style default: solid * @param $adjust 线距离底部的距离,默认垂直居中 default: false * @param $double 是否需要两条线 */ .side-line
functions
string
str-split
字符串分隔
str-repeat
字符串重复
str-replace
字符串替换
list
first
返回列表第一项
last
返回列表最后一项
prepend
向列表前面插入一个
insert-nth
向列表某个位置插入
replace
替换列表的某个元素 $recursive
是否全部替换
replace-nth
替换列表某个位置的元素
remove
删除列表某个元素 $recursive
是否删除所有
remove-nth
删除列表指定位置元素
slice
截取列表中的一部分
to-string
列表变成字符串,$glue
为连接符,$is-nested
是否是嵌套的列表
shift
将列表部分元素前置
contain
列表是存在某个值
@function contain($list, $value)