sass基础学习

1.使用变量
（1）声明变量 $highlight-color: #F90;
（2）引用变量 border: 1px solid $highlight-color;
（3）变量名用中划线，下划线分隔都可以，可以互相兼容 $link-color: blue; color: $link_color;

2. 嵌套CSS 规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

（1）父选择器的标识符&

article a {
  color: blue;
  &:hover { color: red }
}
#content aside {
  color: red;
  body.ie & { color: green }
}

（2）群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
nav, aside {
  a {color: blue}
}

（3）子组合选择器和同层组合选择器：>、+和~
选择器：>：紧跟着的第一个子元素；+：同层后的第一个元素；~：同层后的所有元素

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

（4）嵌套属性

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

3、注释（使用//注释，网站源码上不会显示注释）
4、混合器
@mixin 定义大段重用代码 @include 使用该代码

@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;
}

（1）使用场景（不停重复的一段样式，具有语义化含义）
（2）给混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

（3）默认参数值

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(red)
}

5、使用选择器继承

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}