sass mixins
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README.md
package.json
sache.json add side-line mixin Sep 21, 2016

README.md

mixins-sass mixins-sass mixins-sass

sass mixins,require Sass ~> 3.3.0

utility

functions

string

list

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-heifont-kaifont-songfont-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)