Sass 安装配置 #

Sass 的实现版本 #

Sass 有多种实现版本，目前官方推荐使用 Dart Sass：

实现 语言 状态 推荐
Dart Sass Dart 官方维护 ✅ 推荐
Ruby Sass Ruby 已停止维护 ❌ 不推荐
LibSass C/C++ 已弃用 ❌ 不推荐

安装 Dart Sass #

方式一：独立安装 #

macOS #

bash 
# 使用 Homebrew
brew install sass/sass/sass

# 验证安装
sass --version

Windows #

bash 
# 使用 Chocolatey
choco install sass

# 使用 Scoop
scoop install sass

# 验证安装
sass --version

Linux #

bash 
# 下载最新版本
curl -LO https://github.com/sass/dart-sass/releases/download/1.69.5/dart-sass-1.69.5-linux-x64.tar.gz

# 解压
tar -xf dart-sass-1.69.5-linux-x64.tar.gz

# 添加到 PATH
export PATH="$PATH:/path/to/dart-sass"

# 验证安装
sass --version

方式二：npm 安装 #

bash 
# 全局安装
npm install -g sass

# 验证安装
sass --version

# 作为项目依赖
npm install --save-dev sass

方式三：使用 npx #

bash 
# 无需安装，直接使用
npx sass input.scss output.css

命令行使用 #

基本编译 #

bash 
# 单文件编译
sass input.scss output.css

# 监听文件变化
sass --watch input.scss output.css

# 监听目录
sass --watch src/scss:dist/css

编译模式 #

bash 
# 展开格式（默认）
sass input.scss output.css --style=expanded

# 压缩格式
sass input.scss output.css --style=compressed

# 嵌套格式
sass input.scss output.css --style=nested

# 紧凑格式
sass input.scss output.css --style=compact

输出示例 #

scss 
// 源文件
.container {
  padding: 20px;
  
  .item {
    color: red;
  }
}
css 
/* expanded */
.container {
  padding: 20px;
}

.container .item {
  color: red;
}
css 
/* compressed */
.container{padding:20px}.container .item{color:red}
css 
/* nested */
.container {
  padding: 20px; }
  .container .item {
    color: red; }
css 
/* compact */
.container { padding: 20px; }
.container .item { color: red; }

Source Maps #

bash 
# 生成 source map
sass input.scss output.css --source-map

# 指定 source map 路径
sass input.scss output.css --source-map=output.css.map

# 不生成 source map
sass input.scss output.css --no-source-map

项目集成 #

与 Webpack 集成 #

bash 
# 安装依赖
npm install --save-dev sass sass-loader css-loader style-loader
javascript 
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

与 Vite 集成 #

bash 
# 安装依赖
npm install --save-dev sass
javascript 
// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

与 Rollup 集成 #

bash 
# 安装依赖
npm install --save-dev rollup-plugin-scss
javascript 
// rollup.config.js
import scss from 'rollup-plugin-scss';

export default {
  plugins: [
    scss({
      output: 'dist/bundle.css',
      outputStyle: 'compressed'
    })
  ]
}

与 Gulp 集成 #

bash 
# 安装依赖
npm install --save-dev gulp gulp-sass gulp-sourcemaps
javascript 
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

与 Parcel 集成 #

bash 
# 安装依赖
npm install --save-dev sass

Parcel 会自动识别 .scss 文件并处理：

html 
<link rel="stylesheet" href="styles/main.scss">

编辑器配置 #

VS Code #

推荐扩展 #

  1. Live Sass Compiler - 实时编译
  2. Sass (Syntactically Awesome Style Sheets) - 语法高亮
  3. SCSS IntelliSense - 智能提示

settings.json 配置 #

json 
{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/dist/css"
    },
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/dist/css"
    }
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
  ]
}

WebStorm / PhpStorm #

内置 Sass 支持，无需额外配置：

  • 语法高亮
  • 代码补全
  • 文件监听器

配置 File Watcher #

  1. 打开 Settings → Tools → File Watchers
  2. 点击 + 添加 SCSS
  3. 配置编译选项

package.json 脚本 #

json 
{
  "scripts": {
    "sass": "sass src/scss:dist/css --watch",
    "sass:build": "sass src/scss:dist/css --style=compressed",
    "sass:dev": "sass src/scss:dist/css --style=expanded --watch"
  }
}

使用方式：

bash 
npm run sass
npm run sass:build
npm run sass:dev

配置文件 #

创建配置文件 sassconfig.json #

json 
{
  "input": "src/scss/main.scss",
  "output": "dist/css",
  "style": "expanded",
  "sourceMap": true,
  "watch": false
}

常见问题 #

1. 编码问题 #

scss 
// 在文件开头添加
@charset "UTF-8";

// 或使用 @use
@use "sass:meta";

2. 导入路径问题 #

bash 
# 使用 --load-path 指定导入路径
sass --load-path=node_modules input.scss output.css
scss 
// 然后可以简写导入
@use "bootstrap/scss/bootstrap";

3. 版本兼容性 #

bash 
# 检查版本
sass --version

# 更新到最新版本
npm update sass

4. 编译错误 #

bash 
# 查看详细错误信息
sass input.scss output.css --verbose

# 检查语法错误
sass input.scss --no-source-map --quiet

开发环境检查清单 #

  • [ ] Dart Sass 已安装
  • [ ] 版本号正确显示
  • [ ] 编译命令可用
  • [ ] 编辑器扩展已安装
  • [ ] Source Map 正常生成
  • [ ] 监听模式正常工作

下一步 #

环境配置完成后，继续学习 语法基础，开始编写你的第一个 Sass 文件！

最后更新：2026-03-28