sass小总结

标签：

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

写下自己对sass的理解

1.变量

$border-color:#c66;

$border:1px solid $border-color;

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

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

 1 @mixin button-style {
 2     $btn-bg-color: lightblue !global;
 3     color: $btn-bg-color;
 4 }
 5 
 6 button {
 7     @include button-style;
 8 }
 9 
10 .wrap {
11     background: $btn-bg-color;
12 }
13 
14 
15 
16 css
17 .wrap{background:lightblue;}

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

 1 $color:#333;
 2 $color:#666!default;
 3 .box{
 4   color:$color;  
 5 }
 6 
 7 
 8 
 9 css
10 .box{color:#333;}

2.继承嵌套

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

①选择器嵌套，eg:

1 .box{
2   ul{
3      li{
4        float:left;
5      }  
6   }
7 }

②属性嵌套，eg:

1 p{
2   border:{
3     color:red;
4  }
5 }

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;
   }
}

sass小总结

标签：

原文地址：http://www.cnblogs.com/MissBean/p/sass.html