一些有用的 sass mixins

bukas
3,393 阅读2分钟

sass mixins，require Sass ~> 3.3.0

utility

functions

string

list

npm i mixins-sass --save

// scss 默认前缀：webkit moz ms o
.test {
    @include prefix((transliton: all 0.5s ease-out), webkit);
}
// css
.test {
    -webkit-transliton: all 0.5s ease-out;
    transliton: all 0.5s ease-out;
}


@include clearfix;

@include float(left);

文字超出显示省略号，支持多行，$substract为预留区域百分比%

@mixin text-overflow($line: 1, $substract: 0);

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

// scss
@include placeholder() {
    ...
}
// css
::-webkit-input-placeholder {
    ...
}
::-moz-placeholder {
    ...
}
:-ms-input-placeholder {
   ...
}

px转rem

// @mixin rem($property, $values, $support-ie: true, $base: null)
// $support-ie不支持rem的浏览器使用px
// $base 如果未传，会搜索全局变量 $base-font，如果没有默认为 16px

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

兼容ie的透明度

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

// @mixin arrow($width, $border-width, $direction, $color, $background-color, $position: relative)
// 箭头宽度  线宽 方向 颜色 背景颜色（一般和父级背景同色）

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

三角形生成

// @mixin triangle($width, $height, $color: #000, $direction: down)

@include triangle(10px, 5px);

居中

// horizontal,vertical,both

@include center(both);

媒体查询相关

// min-width max-width

@mixin screen($min, $max)
@mixin max-screen($width)
@mixin min-screen($width)
@mixin hidpi($ratio: 1.3)
@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);

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

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

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

body {
    @include font-hei;
}

string

字符串分隔

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

字符串重复

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

字符串替换

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

list

返回列表第一项

@function first($list)

返回列表最后一项

@function last($list)

向列表前面插入一个

@function prepend($list, $value)

向列表某个位置插入

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

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

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

替换列表某个位置的元素

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

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

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

删除列表指定位置元素

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

截取列表中的一部分

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

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

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

将列表部分元素前置

@function shift($list, $index: 1)
avatar
文章
阅读
粉丝