sass入门学习总结

总论

sass 经cass编译器编译成css。
sass 兼容了css语法。
sass 带有变量，mixin，循环，简单运算，function，继承，嵌套，等可编程公共。

极大地简化了开发人员对样式表的创建过程，使我们可以使用可编程思维实现css的创建。

sass 是前端开发一大利器，类似的可编程css还有less。

sass可以做到哪些？

1. 变量

<!--使用以$开始的标识符作为变量名。-->
$valule:#ccc;

sass的变量值可以是字符串，颜色，数值（可带单位，可用于计算）

2. mixin（混合）

mixin 相当于一个将一个代码片段存储在一个特殊的变量中，方便多处引用，以解决代码重复书写的问题。

// 定义
@mixin test{
    color:red;
}

body{
    // 调用
    @include test;
}

3. 继承

使用@extend可以继承某个选择符下的样式内容

.box{
    color:red;
    border:1px solid #ccc;
    width:100px;
    height:100px;
}
.box-inner{
    @extend .box
    border:2px solid blue;
}

4. 循环

scss 可使用关键字@for @while @each 实现循环

$endValue:8;
@for $i from 1 through $endValue{
    .box-#{$i}{  // 可生成多个类
        color:blue;
        border:1px*$i solid #ccc  // border-width 计算得出
    }
}

---

scss还有许多复杂而高级的方法，此篇只是对基本方法进行一个总结和介绍。
更多的高级方法的使用，还需要仔细阅读scss相关资料深入学习。