sass 基础

sass为css引入了变量，可以将反复使用得css属性值定义为变量，然后通过变量命名来引用它们。

1. sass使用 $ 符号来标识变量，在css中不会于现存或未来的css语法冲突。只声明变量无用，需要引用，使用他们才有用。反复声明同一个变量，后来的变量内容会覆盖之前的内容

1.变量声明（变量名使用中划线和下划线效果一样，互通，经常使用中划线）
$sidebar-width: 30px;

2.变量引用
$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}
//编译后
.selected {
  border: 1px solid #F90;
}

2. css 可以嵌套，父选择器标识符 &

1.遇到伪类时可以用& 标识出来使用父选择器，而不是以后代连接器的方式连接
article a {
  color: blue;
  &:hover { color: red }
}
//编译后为：
article a { color: blue }
article a:hover { color: red }

2.群组选择器 ,
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
编译为css后是：
.container h1, .container h2, .container h3 { margin-bottom: .8em }

3.子组合选择器和同层组合选择器 > 或 +  和 ~

1. > 
//选择article下紧跟着的子元素中命中section选择器的元素
article > section { border: 1px solid #ccc }

2.同层相邻组合选择器 + 
//选择header元素后紧跟的p元素
header + p { font-size: 1.1em }

3.同层全体组合选择器~
//选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
article ~ article { border-top: 1px dashed #ccc }

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

编译后为：
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 }