css预处理器------Sass笔记

Sass笔记

变量、插值

编译前：

$number:100px;
$key:margin;
$i:2;

.box#{$i} {
    width: $number;
    height: $number;
    #{$key}: auto;
}

编译后：

.box2 {
    width: 100px;
    height: 100px;
    margin: auto;
}

作用域

tips:此作用域是有顺序的
编译前：

$number:100px;
.box3 {
    height: $number;
    $number: 456px;
    width: $number;
}

编译后：

.box3 {
    height: 100px;
    width: 456px;
}

伪类嵌套与属性嵌套

编译前：

ul {
    list-style: none;
    li {
        float: left;
        div {
            margin: 10px;
        }
        p {
            margin: 20px;
        }
    }

    &:hover {
        color: red;

        //属性嵌套
        font: {
            size: 10px;
            weight: boild;
            family: 宋体;
        };
    }
}

编译后

.box3 {
    height: 100px;
    width: 456px;
}

运算，单位，转义，颜色

编译前：

$num: 100px;

.box4 {
    width: $num*3;

    //Sass单位不同不能运算
    //height: $num+10em;
    //height: 10em+$num;

    //默认/是分割的操作，不进行运算,()进行运算
    font: 20px/1.5;
    padding: (20px/1.5);
    color: #020406*2;
}

编译后

.box4 {
    width: 300px;
    font: 20px/1.5;
    padding: 13.3333333333px;
    color: #04080c;
}

函数，混入

编译前：

//函数、混入
@mixin show {
    display: block;
}

@mixin hide($color) {
    display: none;
    color: $color;
}

.box6 {
    width: 100px;
    @include show;
    @include hide(red);
}

编译后

.box6 {
    width: 100px;
    display: block;
    display: none;
    color: red;
}

继承

编译前：

.line {
    display: inline;
}

.box7 {
    @extend .line;
}

.box8 {
    @extend .line;
}

//.改成%不进行编译
%line {
    display: inline;
}

.box71 {
    @extend %line;
}

.box81 {
    @extend %line;
}

编译后

.line,
.box7,
.box8 {
    display: inline;
}

.box71,
.box81 {
    display: inline;
}

合并

编译前：

//合并，默认用","分隔
//空格替代","方法
$background: (a:url(a.png),
b:url(b.png));
$transform: (a:scale(2),
b:rotate(30deg));

.box9 {
    background: map-values($background);
    transform: zip(map-values($transform)...)
}

编译后

.box9 {
    background: url(a.png), url(b.png);
    transform: scale(2) rotate(30deg);
}

媒体查询

编译前：

.box10 {
    width: 100px;

    @media all and (min-width: 768px) {
        width: 600px;
    }

    @media all and (min-width: 1440px) {
        width: 900px;
    }
}

编译后

.box10 {
    width: 100px;
}

@media all and (min-width: 768px) {
    .box10 {
        width: 600px;
    }
}

@media all and (min-width: 1440px) {
    .box10 {
        width: 900px;
    }
}

条件

编译前：

$count:5;

.box11 {
    @if($count>4) {
        width: 100px+$count;
    }

    @else {
        width: 10px+$count;
    }
}

编译后

.box11 {
    width: 105px;
}

循环

编译前：

@for $i from 0 through 2 {
    .box-#{$i} {
        width: 100px+ $i;
    }
}

编译后

.box-0 {
    width: 100px;
}

.box-1 {
    width: 101px;
}

.box-2 {
    width: 102px;
}

导入

@import './31.sass';