没有安装sass依赖,使用scss时报错如下:
dev:mp-weixin: `cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch
Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
- Sass 是一个 CSS 预处理器。
- Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
- Sass 完全兼容所有版本的 CSS。
- Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
- Sass 生成良好格式化的 CSS 代码,易于组织和维护。
- Sass 文件后缀为 .scss。
Sass使用方法 (在vue文件下的style标签添加lang="scss"属性即可)
<style lang="scss">
</style>
Sass安装
方法一 (放弃)
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm install sass-loader node-sass (安装的是最新版本,会报错)
方法二 (成功)
1. update package.json
...
"node-sass": "^4.0.0",
"sass-loader": "^7.3.1",
...
2. npm install
Sass 基本用法讲解
<style lang="scss">
.container {
width: 100%;
padding: $uni-spacing-row-lg;
&_text {
font-size: $uni-font-size-sm;
text-indent: 2em;
color: $uni-text-color;
padding-bottom: $uni-spacing-col-sm;
}
}
</style>
- 可以直接使用scss文件那边对应的变量值,比如单位大小、颜色,单位大小可以使用运算符进行基本运算。
- 使用scss后,对于同一个父元素下的元素,可以直接在该父元素选择器下,以层级嵌套来使用。
- 可以使用“&”符号来拼接选择器,“&”相当于父选择器占位符,如下解析为: .container_text
- 在scss中使用@mixin定义方法,用@include调用(具体去官网自己看),单个页面引用scss文件:@import './style/mixin.scss';