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 $i from 1 to 10{} //@while(){} //@each$i in a,b,c,d{}
//自定义函数：@function add(){@return }