// 2.嵌套CSS规则
#content {
  article {
    h1 {  color: #333;}
    p { margin-bottom: 1.4rem;}
  }
  aside {
    background-color: #eee;
  }
}

#content {
  background-color: #fff;
  aside {
    background-color: #eee;
  }
  // 伪类
  &:hover {
    background-color: #000;
  }
}

// 2-1.父选择器的标识符&;
article a {
  color: blue;
  &:hover {
    color: red;
  }
}

// 在使用IE浏览器时，通过JS在body添加一个ie的类名
#content aside {
  color: red;
  body.ie & {
    color: green($color: #000000);
  }
}

// 2-2.群组选择器的嵌套

.button, button {
  margin: 0;
}

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

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

.nav, aside {
  a {color: blue;}
}


// 2-3.子组合选择器和同层组合选择器：>、 +、和~'

article section { margin: 5px;}

article > section {border: solid #cccccc;}

article ~ article { border-top:  blue($color: #000000);}

article { 
  ~ article {border-top: 1px dashed #ccc;}
  > section {background: #eee;}
  dl > {
    dt { color: #333;}
    dd { color: #555;}
  }
}

// 3. 导入SASS 文件
// 3.2 默认变量值
$link-color:blue;
$link-color:red;
a {
  color: $link-color;
}

// 3.3 嵌套导入

// _blue-theme.scss文件
aside {
  background: blue;
  color: white;
}

// css规则内
// .blue-theme {@import "blue-theme"};
// 生成的结果跟你直接在.blue-theme 选择器内写_blue-theme.scss 文件的内容完全一样
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

// 5.混合器 ---- 混合器 （混合器用@mixin标识符定义） ----
@mixin rounded-corners {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

// ---- @include 混合器 ----
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

// 5.3 给混合器创餐
@minix link-color($narmal, $hover, $visited) {
  color: $narmal;
  &.hover(color: $hover;)
  $visited {color: $visited}
}

// 混合器被引用
a {
  @include link-color(blue, red, green)
}

// sass最终生成代码：
a { color: blue;}
a:hover { color:red;}
a:visited {color: green;}

// 6.使用选择器继承来精简CSSS
// @extend
// 通过选择器来继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}