sass-mixin

2017-01-23

sass 常用mixin

sass mixins,require Sass ~> 3.3.0

utility

functions

string

list

usage

1
npm i mixins-sass --save
1
@import "./node_modules/mixins-sass/src/mixins";

utility

prefix

1
2
3
4
5
6
7
8
9
/**
* @param $map css列表
* @param $vendors 浏览器前缀,默认:webkit moz ms o
*/
@mixin prefix($map, $vendors: webkit moz ms o)

.test {
@include prefix((transliton: all 0.5s ease-out), webkit);
}

clearfix

1
@include clearfix;

float

1
@include float(left);

text-overflow

文字超出显示省略号,支持多行

1
2
3
4
5
/**
* @param $line 超出显示省略号的行数,默认:1
* @param $substract 为预留区域百分比%,默认:0
*/
@mixin text-overflow($line: 1, $substract: 0);

animation

1
2
3
4
5
6
7
8
@include animation(slideUp 900ms ease both) {
0% {
transform: translate3d(0, -200px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

placeholder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// scss
@include placeholder() {
...
}
// css
::-webkit-input-placeholder {
...
}
::-moz-placeholder {
...
}
:-ms-input-placeholder {
...
}

rem

px转rem

1
2
3
4
5
6
7
8
9
/**
* @param $property css属性
* @param $values css属性值
* @param $support-ie 是否对不支持rem的浏览器使用px
* @param $base 基准字体大小,如果不传会搜索全局变量 $base-font,如果没有默认为 16px
*/
@mixin rem($property, $values, $support-ie: true, $base: null)

@include rem('padding', '10px 5px 5px 10px', true, '16px');

opacity

兼容ie的透明度

arrow

生成上下左右的小箭头:http://lugolabs.com/caret

1
2
3
4
5
6
7
8
9
10
/**
* @param $width
* @param $border-width
* @param $direction: top bottom left right
* @param $background-color
* @param $position 默认relative
*/
@mixin arrow($width, $border-width, $direction, $color, $background-color, $position: relative)

@include arrow(10px, 1px, 'bottom', '#00f', '#fff');

triangle

三角形生成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* @param $width
* @param $height
* @param $color
* @param $direction: top bottom left right
*/
@mixin triangle($width, $height, $color: #000, $direction: bottom)

/**
* svg背景图生成三角形
*/
@mixin svg-triangle($width, $height, $color: #000, $direction: bottom)

@include triangle(10px, 5px);

center

居中

1
2
3
4
/**
* @param $direction: horizontal vertical both, default: both
*/
@include center;

media

媒体查询相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* @param $min min-width
* @param $max max-width
*/
@mixin screen($min, $max)
@mixin max-screen($width)
@mixin min-screen($width)
@mixin hidpi($ratio: 1.3)

/**
* @param $filename
* @param $retina-filename 多个或者一个
* @param $ratio 多个或者一个
* @param $background-size
*/
@mixin retina-image($filename, $retina-filename, $ratio: 1.3, $background-size: 100%)
@mixin iphone6($orientation: all)
@mixin iphone6plus($orientation: all)
@mixin iphone5($orientation: all)
@mixin iphone4($orientation: all)
@mixin ipad($orientation: all)
@mixin ipad-mini($orientation: all)
@mixin ipad-retina($orientation: all)

@include retina-image(test.png, test@2.png test@3.png, 2 3);

box-sizing

1
2
3
html {
@include box-sizing(border-box);
}

touch-scroll

1
2
3
4
5
6
7
8
body {
@include touch-scroll;
}
// css
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

font

中文字体解决方案,来自https://github.com/zenozeng/fonts.css,有font-heifont-kaifont-songfont-fang-song

1
2
3
body {
@include font-hei;
}

onepx

移动端1像素方案,通过background-image渐变色实现

1
2
3
4
5
6
7
8
/**
* @param $color
* @param $direction: top bottom left right vertical all, default: all
* @param $pseudo: after before, default: after
*/
.border-l {
@include onepx(#eee, left);
}

onepx-scale

通过transform实现,支持圆角

1
2
3
4
5
6
7
8
9
/**
* @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 {
@include onepx-scale(#eee, radius, after, 2px);
}

balloon

气泡提示,来自:balloon.css

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @param $direction: top bottom left right
* @param $bg 气泡提示背景颜色
* @param $trangle-width 气泡小三角形宽度
* @param $trangle-height 气泡小三角形高度
* @param $color 气泡文字颜色
* @param $font 气泡文字大小
*/
@mixin balloon($direction, $bg, $trangle-width: 18px, $trangle-height: 6px, $color: #fff, $font: 12px)

.balloon {
@include balloon(top, #000);
}
1
<span class="balloon" data-balloon="Whats up!">Hover me!</span>

side-line

线中间夹文字效果

http://codepen.io/anon/pen/XjNEAR

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
* @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 是否需要两条线
*/
@mixin side-line($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $adjust: false, $double: false)

.side-line {
@include side-line;
}

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)

【原文链接】