css预处理器sass变量和嵌套

1.变量$

Sass的变量必须是$开头，后面紧跟变量名，如果值后面加上!default则表示默认值

$fontSize: 12px;
body{
    font-size:$fontSize;
} 

2.嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

//sass 
#main p {
  color: #00ff00;
  width: 70%;
 
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
 
//css 
#main p {
    color: #00ff00;
    width: 70%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

两份代码意义完全相同，但相对来说sass更加便捷

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器。

//sass
a {
  font-weight: bold;
  tex