html+css第十天

sass语法：

sass语法是css的扩展语法：

使用：
1.需要安装软件
2.定义css文件
3.页面引入css
  <link href="xx.css" rel="stylesheet"/>

语法：

1.变量：

  $a:300px;

  $b:$a*2;

2.嵌套：
  .d1{
      width:100px;
      h1{
          height:100px;
      }
  }

3.继承：
通过@extend 关键字 继承样式
.d1{
    width:100px;
    height:100px;
}
.d2{
    color:red;
    @extend .d1
}

4.函数：

@mixin a($color:red){
    border:solid 1px $color;
}

.d1{
    @include a("blue")
}

5.判断：
@if    @else    关键词

案例：
$w:100px;

@if $w==200{ color:red;} 
@if $w>300{ color:blue;}
@else{ color:yello;} 

6.循环：
@for   关键字

@for $i from 1 through 3{
    .d{$1}{font-size:5px*$i}
}

from        开始
through     结束

转换成css
.d1{font-size:5px;}
.d2{font-size:10px;}
.d3{font-size:15px;}