ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 4.1 继承 SASS允许一个选择器,继承另一个选择器。比如,现有class1: >   .class1 { >     border: 1px solid #ddd; >   } class2要继承class1,就要使用@extend命令: >   .class2 { >     @extend .class1; >     font-size:120%; >   } ## 4.2 Mixin Mixin有点像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";