今天完成的事情：

任务11
明天计划的事情：

任务12

今日收获：

sass嵌套选择器，嵌套属性，混合器

1.导入SASS文件(嵌套导入)：

@import

举例：

sass编码

aside { 

  background: blue; 

  color: white; }

引入

.blue-theme

 {@import "blue-theme"}

结果

.blue-theme

 {  aside

 {    background: blue;    color: #fff;  } }

2.默认变量值

!default

举例：

反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值，具体如下

$link-color: blue; 

$link-color: red; 

a { color: $link-color; }

线的颜色最后为红色

修改方法，即!default的应用

$fancybox-width: 400px !default; 

.fancybox { width: $fancybox-width; }

PS:不能用sass的@import直接导入一个原始的css文件，因为sass会认为你想用css原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

3.混合器

@mixin定义，

@include调用

混合器使用@mixin标识符定义。

举例

sass代码

定义

@mixin rounded-corners { 

  -moz-border-radius: 5px; 

  -webkit-border-radius: 5px; 

  border-radius: 5px; }

调用

notice { 

  background-color: green; 

  border: 2px solid #00aa00;  

@include rounded-corners; }

结果

.notice { 

  background-color: green; 

  border: 2px solid #00aa00; 

  -moz-border-radius: 5px; 

  -webkit-border-radius: 5px; 

  border-radius: 5px; }

2.混合器里也可以嵌套，混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，

举例

@mixin no-bullets

 {  list-style: none; 

  li {  

  list-style-image: none;  

  list-style-type: none;  

  margin-left: 0px;  } 

}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。

举例

ul.plain {  

color: #444;  

@include no-bullets; }

结果

ul.plain {  

color: #444;  

list-style: none; }

 ul.plain li { 

  list-style-image: none; 

  list-style-type: none; 

  margin-left: 0px; }

4.给混合器传参

举例

通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。

当@include混合器时，参数其实就是可以赋值给css属性值的变量。

举例：

@mixin link-colors($normal, $hover, $visited)

 { 

  color: $normal; 

  &:hover { color: $hover; } 

  &:visited { color: $visited; } }

$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

举例

a {

    @include link-colors(

      $normal: blue,

      $visited: green,

      $hover: red

  );

}

遇到的问题：

收获：（通过今天的学习，学到了什么知识）