今天完成的事情：今天学习sass：

sass是一种css的开发工具，给css提供了便利的写法。

sass最重要的就是引入了变量：

变量就是一个值，可以是类名，属性名，属性的赋值。

你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

它的好处有三点：

原因1:提高代码可读性

无需赘言，变量让代码可读性更强，可维护性更好。

原因2: 使大型文档中的代码改动更容易

如果你所有的常量都存在一个单独的文件里，你就不需要在几千行代码里一一修改变量了。这就很容易了。 只要改一行，就结了！

原因3: 更快的发现拼写错误

在多行代码里找错，是很痛苦的一件事。更烦人的是，这个错误可能只是简单的拼写错误。很难查找。合理使用变量，就能消除一些烦心事。

因此，可读性和可维护性可以双赢。

语法：

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-color看起来太丑了。)，比如$highlight-color: #F90;

多值变量：

多值变量格式： 

$var:value,value,value;

实例： 

““ 

$back:#fff,green,red;/1.多个变量一起声明/ 

p{ 

color: nth($back,1);/2.输出green/ 

} 

span{ 

color: nth($back,3);/3.输出red/

变量默认值：

ass文件是从上往下渲染的，后面声明的变量会覆盖前面的变量，default这里的作用就是使后面的变量变成声明在第一个的变量（就是开始声明这个变量的地方，默认是第一个。）

命名：

在sass的大多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。

变量的作用域：

1.第一部分，变量要提前声明才能使用。这里我上面没有声明$text1这个变量，直接使用，导致文件报错。

sass文件编译是从上往下的，所以使用的时候，变量要声明在上面，当上面没有声明的时候，使用这个变量就会报错，文件编译错误，导致css文件无法使用。

2.第二部分，sass的全局属性；

因为sass文件是从上往下解析的，同一个sass变量在外界声明的时候，会有一个覆盖的作用，即上面已经声明过的变量，会被下面声明的给覆盖。

3.第三部分，sass也有局部变量。局部被包裹的变量，将不会影响到外界的变量，只在自己的一亩三分田里面起作用，外界要引用这个变量也是不行的。如果这里我没有定义外界的变量，局部被包裹起来的那部分$text:blue;还是会生效的。

变量的特殊用法

变量用在属性或者选择器上

当变量挡住属性来使用的时候#{变量名}

当变量当做类名来使用的时候’.#{变量名}{}’

// scss

2.$className: container; // 变量的特殊用法

3.$bgc: background-color;

4..#{$className} {

5.    width: 100px;

6.    height: 100px;

7.    #{$bgc}: $color;

8.}

9.// 生成的css

10..container { width: 100px; height: 100px; background-color: red; }

嵌套规则：

嵌套规则一般书写是解析成css是后代选择器：

#content {

  article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

  }

  #content aside { background-color: #EEE }

}

每层大括号外的类名，元素，都是上一层的大括号外的子级所以

article a {

  color: blue;

  :hover { color: red }

}

就变成了a的子级的：hover而不是a：hover，这时就需要父级选择器符号“&”：

article a {

  color: blue;

  &:hover { color: red }

}

article a { color: blue }

article a:hover { color: red }

&的意思就是this，就是在解析时，让上一层的括号外类名移到这个位置

article a {

  color: blue;

  :hover & { color: red }

}

如果a的子级是p，解析出来就是这样：

article a p:hover article a  { color: red }

群组选择器的嵌套（类似并集选择器）:

.container {

  h1, h2, h3 {margin-bottom: .8em}

}

会分别组合，形成并集选择器

.container h1, .container h2, .container h3 { margin-bottom: .8em }

其他特殊选择器：

article {

  ~ article { border-top: 1px dashed #ccc }

  > section { background: #eee }

  dl > {

    dt { color: #333 }

    dd { color: #555 }

  }

  nav + & { margin-top: 0 }

}

sass会如你所愿地将这些嵌套规则一一解开组合在一起：

article ~ article { border-top: 1px dashed #ccc }

article > footer { background: #eee }

article dl > dt { color: #333 }

article dl > dd { color: #555 }

nav + article { margin-top: 0 }

属性值也可嵌套：

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来：

nav {

  border: {

  style: solid;

  width: 1px;

  color: #ccc;

  }

}

nav {

  border-style: solid;

  border-width: 1px;

  border-color: #ccc;

}

sass还有一个重要的特性，就是混合器：

混合器就是把大段的样式整合成一个混合器中，并给这个混合器起一个名字，混合器使用@mixin标识符定义。

混合器用@inclued来引用：

@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

//sass最终生成：

.notice {

  background-color: green;

  border: 2px solid #00aa00;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

至于混合气何时使用：

混合器在某些方面跟css类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在html文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：用来描述html元素的含义而不是html元素的外观。而另一方面，混合器是展示性的描述，用来描述一条css规则应用之后会产生怎样的效果。

另外如果你能给这段样式起一个名字 那么说明他适合生成一个混合器。

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin no-bullets {

  list-style: none;

  li {

    list-style-image: none;

    list-style-type: none;

    margin-left: 0px;

  }

}

当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器：

ul.plain {

  color: #444;

  @include no-bullets;

}

sass的@include指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

ul.plain {

  color: #444;

  list-style: none;

}

ul.plain li {

  list-style-image: none;

  list-style-type: none;

  margin-left: 0px;

}

给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：

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

  color: $normal;

  &:hover { color: $hover; }

  &:visited { color: $visited; }

}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {

  @include link-colors(blue, red, green);

}

//Sass最终生成的是：

a { color: blue; }

a:hover { color: red; }

a:visited { color: green; }

当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {

    @include link-colors(

      $normal: blue,

      $visited: green,

      $hover: red

  );

}

传参就像给定你一个方法和原料范围，然后只要你添加原料，也就是属性值，这段混合器传参就生效了。

明天计划的事情：使用sass来编写任务十一 
遇到的问题：有些概念理解比较抽象。 
收获：初步了解了sass。