scss预处理器的使用

为了方便使用，可以在vscode里先下载easy Sass插件（但是项目中应该设置只在该工作区使用）

安装：npm i node-sass sass-loader style-loader -D

变量

    scss使用$符号来标识变量 

// 定义变量
$highlight-color:#f90
//使用变量
#app {
  backgroundcolor:$highlight-color;
     }

变量范围

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

# 编译后 

nav {
  width: 100px;
  color: #F90;
  background-color: black;
}

嵌套语法：

#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }

&父选择器

假如你想针对某个特定子元素 进行设置

  #content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }