sass使用总结

1、安装sass、sass-loader

cnpm install node-sass sass-loader -D

2、配置webpack.base.conf.js

module: {
    rules: [
     ...
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      },
      ...
  ]
}

3、在组件中使用

<style scoped lang="scss">
.box{
  width: 100%;
}
</style> 

运行项目报错：TypeError: this.getResolve is not a function

微信图片_20190929094831.png

解决办法：降低sass-loader版本

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

sass的使用：

1、嵌套：

#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

编译为

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000;
}

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理

2、父选择器 &：

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

编译为

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

3、属性嵌套 ：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold;
}

变量 $:

//局部变量
$red: #DC143C;
.div{
  color: $red;
}

//全局变量
.div{
  $blue: #0000CD !global;
  color: $blue;
}
.inner{
  background: $blue;
}

更多内容请参考sass中文网