hbuilderX中为html静态页使用scss的方法

SCSS 是一种 CSS 预处理器，它扩展了 CSS 的功能并提供了更强大的工具来编写样式代码。SCSS的效率比传统的CSS高很多，不过SCSS不能直接在静态页中使用，怎么办呢？静态网页中使用 SCSS（Sassy CSS）可以通过以下步骤实现。

一、安装SCSS编译工具

方法一：使用 Node.js 和 sass 包（推荐）

首先安装 Node.js

在项目目录下初始化 npm：

npm init -y

安装 sass 包：

npm install sass --save-dev

使用命令行编译 SCSS 文件（使用插件可实时编译）：

npx sass style/css/style.scss style/css/style.css

方法 2：使用 GUI 图形化工具编辑SCSS文件，比如 Koala 、Prepros

二、创建SCSS文件

比如 style.scss

三、使用插件或工具实时编译SCSS为CSS

使用 sass 的 --watch 模式（实时生成CSS文件）：

npx sass --watch style/css/style.scss:style/css/style.css

四、在html中引用CSS文件

<link rel="stylesheet" href="style/css/style.css">