sass进阶

代码的重用

　　基础的部分我们讲述了变量 Mixin 这两种方法可以增加扩展和重用

　　现在开始继续学习：extend继承

    .class1 {
　　　　border: 1px solid #ddd;
　　}

    .class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

　　引入外部文件

@import "path/filename.scss";

引入后就可以用调用里边的变量和mixin，继承里边的类了

高级语法

　　@if可以用来判断：

    p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

　　配套的还有@else命令：

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

　　SASS支持for循环：

　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

 　　也支持while循环：

　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} {  2em * $i; }
　　　　$i: $i - 2;
　　}

 　　each命令，作用与for类似：

　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

 　　SASS允许用户编写自己的函数。

    @function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　 double(5px);
　　}

 sass 教程  完结