sass笔记

Sass

 

1.变量：

      声明变量：$xxxx : xxxx;

      使用变量：xxx: $xxx;

      反复声明变量后者覆盖前者。

      !default 设定默认值

 

  Css原生变量：

      声明变量：—xxx : xxx;

      使用变量：xxx : var(—xxx)

      可使用第二参数作为默认值

      允许拼接字符串：var(—xxx)’blue’

2.嵌套规则

#content{
      article{
      }
      h1{
            p{}
      }
}

3.父级标识符 &

4.属性嵌套

nav{
    border-left:2px;
    border-top:10px;
}

===>

nav{
    border:{
        left:2px;
        top:10px;
    }
}

5.导入sass

        1.允许css导入其他css文件

        2.不发起额外的请求

        3.不需要指定全名，可以省略后缀

        4.使用下划线开头来命名_theme.sass，使用时@import “theme.sass”

 

7.混合器@mixin

@mixin aname {
    xxx1:xxx1;
    xxx2:xxx2;
    xxx3:xxx3;
    xxx4:xxx4;
}

p{
    xxx:xxx;
    @include aname;
}

8.混合器传参(可设定默认值，默认值可以是任何有效的css属性值，甚至是其他参数的引用）

@mixin link-colors($a,$b:green){
    color:$a;
    font:$b;
}

a{
    @include link-colors(blue,red);
}

9.选择器继承

p {
    xxx1:xxx1; 
    xxx2:xxx2
}

.overP{
    @extend p;
}