sass常用知识点总结

 

这次将sass学习了一下，将最常用的进行总结，将比较好的写法运用到项目当中。

sass有两种语法格式，扩展名为.sass和.scss的，在此只总结scss格式。scss是在css3基础上进行扩展的，所以完全兼容css3的语法，此外还拥有自己的特色功能。

1、可嵌套

div {
    color: red;
    a {
        font-size: 14px;
    }
}

2、父选择器

a {
    color: red;
    &: hover {
        color: green;
    }
}

3、属性嵌套

div {
    font: {
        size: 14px;
        weight: bold;
        family: '宋体';
    }
}

4、@extend调用

   先将公共部分写在.btn 里，然后不同的btn除了自己本身的属性之外，还拥有公共部分.btn 的style属性，或者也可以使用id选择器定义（#btn），需要注意的是，若调用时.btn也会被编译到css文件中。也可以使用占位符选择器%来替换成%btn。

.btn {
    font-size: 14px;
    color: white;
    margin-left: 10px;
}
.a-btn {
    @extend .btn;
    padding: 10px;
}
.b-btn {
    @extend .btn;
    padding: 22px;
}

编译后：

.btn, . a-btn, .b-btn {
    font-size: 14px;
    color: white;
    margin-left: 10px;
}
.a-btn {
    padding: 10px;
}
.b-btn {
    padding: 22px;
}

5、注释

/* */ 多行注释

// 单行注释

注：多行注释会被输出到编译后的css文件，单行注释不会。

div {
    /*
    多行注释
    多行注释
    */
}
div {
    // 单行注释
}

6、允许使用变量，以$开头。

$blue: #1875e7;
div {
    color: $blue;
}

   若要嵌套在字符串中，则要写在#{}中。

$side: left;
div {
    border-#{$side}-radius: 5px;
}   

7、允许计算

body {
    font-size: 14px / 2;
    top: 100px + 50px;
}

8、mixin （使用mixin定义，使用@include调用，还可传入参数）

@mixin left {
    float: left;
    margin-left: 10px;
}
div {
    @include left;
}

@ mixin left ($value) {
    margin-left: $value;
}
div {
 @include left (10px);
}

 

以上。