Sass预定义一些常用的样式

一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错
exception while processing events: incompatible character encodings: GBK and UTF-8?

二.检测sass目录

$ sass --watch sass:styles

　　

三.引入外部的scss、使用变量, 如index.scss文件引入base.scss文件, 使用es6 import语法

@import "./base.scss";

四.语法

1.变量: $defalutView: 750px;
2.函数: @function rem($px){
　　　　 　　@return ($px / $defalutView) * 10rem;
　　　　 }
3.混合: @mixin maxWidth($maxWidth:640px){
　　　　 　　max-width:$maxWidth;
　　　　 }

五.Sass预定义一些常用的样式

1.三角形

@mixin arrow($direction, $size, $color){
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    overflow: hidden;
    border-width:$size;
    @if $direction == top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction == left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}
// 调用 @include arrow(top,10px,#F00);

　　

2. 圆角

@mixin border-radius($px:5px){
    -webkit-border-radius:$px;
    -moz-border-radius:$px;
    -o-border-radius:$px;
    border-radius:$px;
}

@mixin border-radius-circle(){
    border-radius:50%;border-top-left-radius: 999px;border-top-right-radius: 999px;border-bottom-right-radius: 999px; border-bottom-left-radius: 999px; border-radius: 999px;background-clip: padding-box;
}

　　

3.超出的文本省略

@mixin ell(){
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow:ellipsis;
    white-space: nowrap;
}

@mixin ellMore($lineNumber:2){
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $lineNumber;
    -webkit-box-orient: vertical;
}

　　

4.关于flex布局

@mixin flex-box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flex;
    display: flex;
}
@mixin flex-1($percent){
    width:$percent;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
@mixin justify-content{
    -webkit-justify-content:space-between;
    justify-content:space-between;
}

　　

5.盒子标准

@mixin box-sizing {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

　　

6.绝对居中

@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}

　　

7.设置过渡

@mixin transition($transition...) {
    -webkit-transition:$transition;
    -moz-transition:$transition;
    -o-transition:$transition;
    transition:$transition;
}
// 调用 @include transition(all 0.3s ease)

　　

8.动画

@mixin animation($name) {
    -webkit-animation:$name;
    -moz-animation:$name;
    -o-animation:$name;
    animation:$name;
}
// 调用 @include animation(test 1s infinite alternate both)

　　

9.设置关键帧

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

　　

10.设置旋转位置

@mixin transform-origin($origin...) {
    -webkit-transform-origin:$origin;
    -moz-transform-origin:$origin;
    -o-transform-origin:$origin;
    transform-origin:$origin;
}

@mixin transform($transform...) {
    -webkit-transform:$transform;
    -moz-transform:$transform;
    -o-transform:$transform;
    transform:$transform;
}

　　

11.Sass里for来快速现实对图片的定位

@for $i from 0 to 17{
    .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; }
}

// css生成
.d-icon-0 { background-position: 0 -0px; }

.d-icon-1 { background-position: 0 -30px; }

.d-icon-2 { background-position: 0 -60px; }

.d-icon-3 { background-position: 0 -90px; }

.d-icon-4 { background-position: 0 -120px; }

.d-icon-5 { background-position: 0 -150px; }

.d-icon-6 { background-position: 0 -180px; }

.d-icon-7 { background-position: 0 -210px; }

.d-icon-8 { background-position: 0 -240px; }

.d-icon-9 { background-position: 0 -270px; }

.d-icon-10 { background-position: 0 -300px; }

.d-icon-11 { background-position: 0 -330px; }

.d-icon-12 { background-position: 0 -360px; }

.d-icon-13 { background-position: 0 -390px; }

.d-icon-14 { background-position: 0 -420px; }

.d-icon-15 { background-position: 0 -450px; }

.d-icon-16 { background-position: 0 -480px; }