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、在组件中使用
 
运行项目报错:TypeError: this.getResolve is not a function
微信图片_20190929094831.png

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

npm uninstall sass-loader
npm install [email protected] --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中文网

你可能感兴趣的:(sass使用总结)