sass小总结

一般有两种后缀  .sass和.scss，推荐使用后者。

写下自己对sass的理解

1.变量

$border-color:#c66;

$border:1px solid $border-color;

变量中包括全局变量和局部变量。全局变量即使全局都可以引用的。局部变量定义在选择器内或mixin里的变量。只在固定作用于内有效。

局部变量加上！gloable可以转化为全局变量（自己的 理解）；eg

@mixin button-style {
    $btn-bg-color: lightblue !global;
    color: $btn-bg-color;
}

button {
    @include button-style;
}

.wrap {
    background: $btn-bg-color;
}



css
.wrap{background:lightblue;}

!default变量的默认值；默认变量之前重新声明下变量，即可覆盖默认值。eg:

$color:#333;
$color:#666!default;
.box{
  color:$color;  
}



css
.box{color:#333;}

2.继承嵌套

分为选择器嵌套和属性嵌套

①选择器嵌套，eg:

.box{
  ul{
     li{
       float:left;
     }  
  }
}

②属性嵌套，eg:

p{
  border:{
    color:red;
 }
}

border后要加冒号；

选择器继承：class2可以继承class1的样式；eg:

.class1{color:red;}
.class2{
    @extend .class1;
}

3.定义函数

sass中有写好的函数可以拿来用。Mix(),RGBA(),Lighten(),darken()等;

4.Mixin

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。(参考http://www.w3cplus.com/sassguide/syntax.html)

5.占位

这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

6.@extend调用占位符

  @include继承@mixin的函数

7.语句  if else for @each学习中。。。

8，计算。学习中...

9.@at-root跳出嵌套，&引用父元素，这两个可以配合使用；eg: ？？？

.child{
  @at-root .parent &{
       color:#c66;
   }
}


.parent .child{color:#c66;}

10.判断变量是否存在

Sass提供了两个函数，用来测试一个变量是否存在。我们可以使用variable-exists或global-variable-exists函数来检查我们的局部变量或全局变量是否分别存在。

@if(global-variable-exists(divBorder)) {
   .save-cancel-btns{
    border: $divBorder;
   }
}