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; }

巴特西

Sass预定义一些常用的样式

最新文章

热门文章