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} { width: 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 { width: double(5px); }
sass 教程 完结