sass基本使用

主要用代码方式列一下sass中经常使用的一些基本的方法

1.变量：跟es6中的let一样具有块级作用域，必须先定义后使用

$color:red;
$fontSize:16px;
$color:blue;
body{   
    background:$color;    //blue    使用前最后一处声明有效，前边的值被覆盖
    font-size:$fontSize
}
$color:green;

2.嵌套：

//例1
.data{
    & > ul{                        //.data > ul       
        .li{
            &:hover{}            //.data ul .li:hover        &：父选择器的标识符
            body.ie & {}         //body.id .data >ul .li
            &-title{}            //.data ul .li-title{}
        }
    }
    h1,h2{}        //.data h1, .data h2{}          //群组选择器
}
//例2        嵌套属性
.nav{
    border: {
        style:solid;
        width:1px;
        color:red;
    }
}    //==>.nav{border:1px solid red;}
//例3
.nav{
    border: 1px solid #ccc {
      left: 0px;
      right: 0px;
  }
}       // ==>.nav{border: 1px solid #ccc; border-left:0px;border-right:0px;}

3.导入sass文件：

css @import:在css文件中执行到@import时浏览器去下载css文件=》页面加载慢
sass @import:生成css文件时把文件导入进来，跟原有文件合成一个文件=》无需发起额外请求下载
局部文件：以下划线开头，不生成css文件，只用来被引用，可被多文件引用

例1：想导入style/_night-sky.scss    =>@import "style/night-sky"

例2：导入文件又要修改文件中的全局变量：    !default
$c:pink;
@import 'src/assets/css/ab';
_ab.scss文件:        $c: green !default;
                    .cont {color: $c;}

4.注释：

.a{}    /*这种注释内容会出现在生成的css文件中*/
.b{}    //这种注释不会出现在生成的css文件中，叫做：静默注释
.c{color/*这块注释也不会出现在生成的css文件中*/ :red;}   

5.混合器：

@mixin link-colors($normal:blue, $hover:red, $visited:green) {    //声明
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited; }
}
@include link-colors( $normal: blue, $visited: green, $hover: red);    //调用1
@include link-colors( $hover: yellow);    //调用2
@include link-colors( green);    //调用3

6.继承：

.redC{
    background:red;
    margin:10px;
}
body{
    @extend .redC;
}

小技巧

1.#{}:可以添加动态的值

@mixin mar($dir,$size){
    margin-#{$dir} : $size;
}
.cont{
    @include mar('left',20px);    //margin-left:20px;
}