sass进阶

代码的重用

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

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

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

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

　　引入外部文件

@import "path/filename.scss";

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

高级语法

　　@if可以用来判断：

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

　　配套的还有@else命令：

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

　　SASS支持for循环：

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

　　也支持while循环：

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

　　each命令，作用与for类似：

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

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

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

sass 教程  完结