SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 { border: 1px solid #ddd; }class2要继承class1,就要使用@extend命令:
.class2 { @extend .class1; font-size:120%; } 4.2 MixinMixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left { float: left; margin-left: 10px; }使用@include命令,调用这个mixin。
div { @include left; }mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) { float: left; margin-right: $value; }使用的时候,根据需要加入参数:
div { @include left(20px); }下面是一个mixin的实例,用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; }使用的时候,可以像下面这样调用:
#navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); } 4.3 颜色函数SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c darken(#cc3, 10%) // #a3a329 grayscale(#cc3) // #808080 complement(#cc3) // #33c 4.4 插入文件@import命令,用来插入外部文件。
@import "path/filename.scss";如果插入的是.css文件,则等同于css的import命令。
@import "foo.css"; 五、高级用法 5.1 条件语句 @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; } 5.2 循环语句