介绍
Sassify 是一个开源库，可以让你在浏览器中使用 Sass 编写的样式表。你可以在你的 JavaScript 代码中使用 Sassify ，也可以把 Sassify 集成到 Browserify 或 Webpack 构建流程中。
安装
安装 Sassify 非常简单，只需要在命令行中输入以下命令：
npm install sassify --save
这将把 Sassify 安装到你的项目中。
使用
要在浏览器中使用 Sassify ，你需要使用 Browserify 或 Webpack 将你的 JavaScript 代码打包成一个 bundle。在打包的过程中，你需要使用 Sassify 将你的 Sass 文件转换成 CSS。
下面我们以 Browserify 为例，介绍如何在项目中使用 Sassify 。
在 JavaScript 中使用
在你的 JavaScript 代码中，你可以像下面这样引入 Sassify ：
var sass = require('sassify');接着，你需要使用 Sassify 将你的 Sass 文件转换成 CSS。你可以这样写：
var css = sass('./style.scss');这将把 style.scss 文件编译成 CSS，并把编译结果存储在 css 变量中。
在 Browserify 中使用
在 Browserify 中，你可以使用 transform 配置项来让 Browserify 自动编译你的 Sass 文件。
首先，你需要在命令行中安装 "sassify" transform：
npm install sassify --save-dev
接着，在你的 package.json 文件中添加 transform 配置项：
-- -------------------- ---- -------
-
------- -------------
---------- --------
------------- -
------------ -----------
--
------------------ -
------------- ---------
-
-这将会让 Browserify 自动调用 Sassify 编译你的 Sass 文件。
接下来，在你的 JavaScript 代码中，你可以像下面这样引入你的 Sass 文件：
require('./style.scss');这将自动使用 Browserify 调用 Sassify 编译你的 Sass 文件，并把编译结果添加到 bundle 中。
示例代码
下面是一个简单的示例，展示了如何使用 Sassify 编译一个 Sass 文件，并把编译结果添加到一个 HTML 页面中。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ------------ ------ ----------------------- ------- ------ ---------- ------------- ------- ------------------------- ------- -------
// style.scss
$body-bg: #f6f6f6;
body {
background-color: $body-bg;
}// index.js
var sass = require('sassify');
var css = sass('./style.scss');
var styleTag = document.getElementById('style-tag');
styleTag.innerHTML = css;上面的代码将在浏览器中显示一个带有灰色背景色的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69727