在微信小程序中使用 SCSS 的具体配置

在微信小程序中使用 SCSS，需要以下几个步骤：

1. 安装并配置编译工具，如 Gulp、Webpack 或者 Sass 本身提供的编译器。
2. 在项目中创建 .scss 文件，并在其中编写 SCSS 语法的样式。
3. 在编译完成后，将编译后的 .css 文件引入小程序中。

以下是一个具体步骤的示例：

1. 安装并配置编译工具，这里以 Gulp 和 gulp-sass 插件为例。在 package.json 中，添加 gulp 和 gulp-sass 的依赖：

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  }
}

在项目目录中，创建 gulpfile.js 文件，添加如下代码：

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('compile-sass', function () {
  return gulp.src('./app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
})

以上代码的作用是读取项目中的 app.scss 文件，将其编译成 CSS，并将编译后的 CSS 文件放入 dist 目录中。

2. 在项目中创建 app.scss 文件，并在其中编写 SCSS 语法的样式。

$primary-color: #360;

.page {
  background-color: #eee;

  .header {
    background-color: $primary-color;
    color: #fff;
    font-size: 16px;
  }

  .content {
    padding: 10px;
    font-size: 14px;
  }
}

以上代码的作用是定义了一个 $primary-color 变量来保存主体颜色，同时定义了一个 .page 类，包含一个 .header 类和一个 .content 类，分别定义了不同的样式。

3. 编译 SCSS 文件，生成 CSS 文件

在命令行中输入 gulp compile-sass，Gulp 会读取 gulpfile.js 文件中的 compile-sass 任务，并执行任务中的操作，最终将编译后的 CSS 文件生成到 dist 目录中。

4. 在小程序中，将引用编译后的 CSS 文件

在小程序的 app.json 文件中添加如下配置：

{
  "pages": [
    "pages/index/index"
  ],
  "style": "dist/app.css"
}

以上代码的作用是指定小程序需要引用的样式文件的位置，这里的样式文件是在 dist 目录下编译生成的 app.css 文件。

至此，在小程序中即可使用 SCSS 编写样式。