1 文档注释:
在SASS/SCSS文件中可以使用两种注释方式:
(1) /*...*/,多行注释,且注释将出现在编译后的CSS文件中;
(2) //, 单行注释,注释将不会出现在编译后的CSS文件中。
2 特殊符号
&符,可以引用父级选择符。
$符,变量名以$符号开始,变量具有作用域范围。
!default,可以为变量指定默认值。
#{$varname}, 变量替换
使用SASS的主要目的是简化CSS的开发与维护,其中SASS提供的规则嵌套,变量定义等写法正好帮助开发者实现了此目的。
1 变量的定义
$myFavoriteColor: #123456;
2 混合器 @mixin @include
@mixin border {
border: 1px solid #eee;
}
.test-div {
@include border;
}
3 带参数的混合器
@mixin border-radius($radius: 5px){
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.test-div {
@include border-radius;
}
.text-div {
@include border-radius(8px);
}
4 扩展继承 @extend
.head {
border: 1px solid #eee;
}
.foot {
@extend .head;
}
5 规则嵌套
.head {
h2 {
font: bold 18px 微软雅黑;
}
> p {
a {
&:hover{
color: #eee;
}
}
}
}
6 运算
$singleMargin: 5px;
$doubleMargin: $singleMargin * 2;
7 内置函数
color: lighten(#369, 20%);
color: saturate(#369, 20%);
color: desaturate(#369, 20%);
color: adjust-hue(#369, 180);
color: grayscale(#369);
color: mix(#369, #963);
常用函数:
lighten(#369, 20%);
darken(#369, 20%);
saturate(#369, 30%);
desaturate(#369, 100%);
adjust-hue(#369, 180);
color: mix(#336699, #993266);
compelment(#369);
transparentize(#369, .5);
fade-out();
opacify(#369, .3);
fade-in(#369, .3);
grayscale(#369);
adjust-color();
scale-color();
shade();
tint();
常用指令
导入指令:@import
导入:@import "file-name"
在导入时,如果不想被导入的文件生成相应的CSS文件,可以将被导入的文件命名是在文件名前加下划线“_”。而导入命令后面的文件名为不加下划线的文件名。
扩展指令:@extend
.checkout_button {
@extend .blue_button;
color: darken(#369, 10%); //覆盖
}
Placeholder 选择符:%
SASS支持一种称为“placeholder selector”的特殊选择符类型。该类型与class和id选择符类似,只是将“.”和“#”换成了“%”。它主要用于与@extend指令配合使用,除此之外,针对该选择符的样式规则不会被转换成相应的CSS规则。
@mixin,@include指令
@mixin blue_text($size: 20px){
color: #369;
font-size: $size;
}
.product_title {
@include blue_text;
}
.product_title {
@include blue_text(100px);
}
@each 指令
@each $member in thom, jonny, colin, phil {
.#{$member}_picture {
background-image: url("/image/#{$member}.jpg");
}
}
@if与@else指令
@mixin country_color($country){
@if $country == france {
color: blue;
}
@else if $country == spain {
color: yellow;
}
@else {
color: red;
}
}
.france {
@include country_color(france);
}
@media指令