sass基础二

三、 基本用法
1、变量
1）定义：使用开头，如value
2）使用：

$value:#333;div{    color:$value;}编译后：div{    color:#333;}

3）变量的命名：
使用下划线或者中划线，二者是同一个变量

$value_size: 5px;.test{    font-size: $value-size;}编译后.test{    font-size: 5px;}

2、字符串中的变量
3、计算：+ - * /

4、嵌套
1）基本用法

.qiantao{    .qiantao-header{        color:#eedede;    }    .qiantao-footer{        border:1px solid #757575;    }    border:{        color:#ddd;    }}/*编译后*/.qiantao {  border-color: #ddd; }  .qiantao .qiantao-header {    color: #eedede; }  .qiantao .qiantao-footer {    border: 1px solid #757575; }

2）&在解析时，是直接被父级替换

.app a{    color:blue;    &:hover{        color:red;    }}/*编译后*/.app a {  color: blue; }  .app a:hover {    color: red; }

3）群组选择器的嵌套

.container{    h1{        color:#ddd;    }    h2{        background:#eee;    }    h3{        font-size:12px;    }}/*编译后*/.container h1 {  color: #ddd; }.container h2 {  background: #eee; }.container h3 {  font-size: 12px; }

4）子选择器，相邻选择器
后代选择器：.app a{}
子选择器：.app > a{}
所有同层选择器：.app ~ a{}
同层相邻选择器：.app + a{}

5）嵌套属性

.app{    border:{        radius:3px;        style:solid;        color:#eee;        width:2px;    }}/*编译后*/.app {  border-radius: 3px;  border-style: solid;  border-color: #eee;  border-width: 2px; }.app{    border: 1px solid #ddd{        radius:3px;    }}/*编译后*/.app {  border: 1px solid #ddd;    border-radius: 3px; }

5、注释
单行注释：//不会输出到.css中
多行注释：/**/显示在.css中

四、代码重用
1、导入文件
1）基本用法，无需指明后缀
@import './test'
@import './test.css'
2）默认值
当导入一个.scss文件，希望这个文件中的变量是可以被修改的，定义变量时，使用!default

a.scss文件$value:#fff !default;b.scss文件@import 'a';$value:#ddd;.app{    color:$value;}/*编译后*/.app{    color:#ddd;}//如果b.scss文件中没有定义$value,则取a.scss中的值

3）嵌套导入

//a.scss文件.container{    font-size:12px;}//b.scss文件$value:#ddd;.app{    color:$value;    @import 'a';}/*编译后*/.app{    color:#ddd;    .container{        font-size:12px;    }}

2、继承@extend
不仅继承类自身，他的所有相关的子类都继承

/*继承*/.app{    padding:10px;}.app a{    font-size:12px;}.article{    margin:20px;    padding:20px;    @extend .app;}/*编译后*//*继承*/.app, .article {  padding: 10px; }.app a, .article a {  font-size: 12px; }.article {  margin: 20px;  padding: 20px; }

3、mixin混合器
何时使用：一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，就使用混合器。

1）基本用法
@mixin进行定义，@include进行引用

@mixin myblock{    color:#ddd;}.test{    background: #ccc;    @include myblock;}

/*得到的css内容*/.test {  background: #ccc;  color: #ddd;   }

2）传参，指定默认值

@mixin setvalue($v1,$v2:20px,$v3:$v1){    color:$v1;    font-size:$v2;    background-color:$v3;}p{    @include setvalue(red);}/*编译后*/p {  color: red;  font-size: 20px;  background-color: red; }

4、颜色函数

五、高级用法
//@if 1==2 {} @else{}
//循环：@for ifrom1to10//@while()//@eachi in a,b,c,d{}
//自定义函数：@function add(){@return }