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

• str-split
• str-repeat
• str-replace

list

• first
• last
• prepend
• insert-nth
• replace
• replace-nth
• remove
• remove-nth
• slice
• to-string
• shift
• contain

usage#

npm i mixins-sass --save

@import "./node_modules/mixins-sass/src/mixins";

utility#

prefix#

/**
 * @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#

@include clearfix;

float#

@include float(left);

text-overflow#

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

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

animation#

@include animation(slideUp 900ms ease both) {
    0% {
        transform: translate3d(0, -200px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

placeholder#

// scss
@include placeholder() {
	...
}
// 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
 */
@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

/**
 * @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#

三角形生成

/**
 * @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#

居中

/**
 * @param $direction: horizontal vertical both,  default: both
 */
@include center;

media#

媒体查询相关

/**
 * @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#

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

touch-scroll#

body {
    @include touch-scroll;
}
// css
body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

font#

中文字体解决方案，来自https://github.com/zenozeng/fonts.css，有font-hei、font-kai、font-song、font-fang-song。

body {
    @include font-hei;
}

onepx#

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

/**
 * @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实现，支持圆角

/**
 * @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

/**
 * @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);
}

<span class="balloon" data-balloon="Whats up!">Hover me!</span>

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  是否需要两条线
 */
@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#

字符串分隔

@function str-split($string, $delimiter: " ")

str-repeat#

字符串重复

@function str-repeat($string, $times)

str-replace#

字符串替换

@function str-replace($string, $search, $replace: "")

list

first#

返回列表第一项

@function first($list)

last#

返回列表最后一项

@function last($list)

prepend#

向列表前面插入一个

@function prepend($list, $value)

insert-nth#

向列表某个位置插入

@function insert-nth($list, $index, $value)

replace#

替换列表的某个元素 $recursive 是否全部替换

@function replace($list, $old-value, $new-value, $recursive: false)

replace-nth#

替换列表某个位置的元素

@function replace-nth($list, $index, $value)

remove#

删除列表某个元素 $recursive 是否删除所有

@function remove($list, $value, $recursive: false)

remove-nth#

删除列表指定位置元素

@function remove-nth($list, $index)

slice#

截取列表中的一部分

@function slice($list, $start: 1, $end: length($list))

to-string#

列表变成字符串，$glue为连接符，$is-nested是否是嵌套的列表

@function to-string($list, $glue: '', $is-nested: false)

shift#

将列表部分元素前置

@function shift($list, $index: 1)

contain#

列表是存在某个值

@function contain($list, $value)

【原文链接】