SASS

  SASS基础知识

   1 文档注释

   在SASS/SCSS文档中可以使用两种注释方式：

   （1）/*...*/，多行注释，且注释将出现在编译后的CSS文件中；

   （2）//，单行注释，注释将不会出现在编译后的CSS文件中。

 

   2 特殊符号

   &，可以引用父级选择符；

   $，变量名以$符号开始，变量具有作用域范围；

   !default，可以为变量指定默认值。

 

   使用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);