uni-app sass

没有安装sass依赖，使用scss时报错如下：

dev:mp-weixin: `cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch

Sass介绍

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安装

方法一 （放弃）

1. npm install -g cnpm --registry=https://registry.npm.taobao.org
2. cnpm install sass-loader node-sass (安装的是最新版本，会报错)

方法二 (成功)

1. update package.json

...

"node-sass": "^4.0.0",
"sass-loader": "^7.3.1",

...

2. npm install

扫描二维码关注公众号，回复： 12611967 查看本文章

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';