在我正在工作的应用程序中，我必须在客户端渲染之前动态编译 SASS(缓存系统来了，别担心)。目前我正在使用node-sass一切都很好。

这是我目前正在做的事情。为简洁起见，已删除其他元素特定代码:

var sass            = require('node-sass'),
    autoprefixer    = require('autoprefixer-core'),
    vars            = require('postcss-simple-vars'),
    postcss         = require('postcss'),

function compileCSS() {
    var result = sass.renderSync({
            file: 'path/to/style.scss'
        });

    return postcss([autoprefixer]).process(result.css.toString()).css;
}

问题在于，现在我需要从 Node 传递动态数据，并像普通的 SASS 变量一样编译。最初我尝试使用 PostCSS ，因为我注意到变量注入(inject)是 something it could do .不幸的是，那没有用。 PostCSS 在编译阶段之后启动，到此为止，它惨遭失败。

接下来，我尝试使用 underscore使用 node-sass 尝试覆盖的模板 importer() :

var result = sass.renderSync({
        file: 'path/to/style.scss',
        importer: function(url, prev, done) {
            var content = fs.readFileSync(partial_path),
                partial = _.template(content.toString());

            return {
                contents: partial({ test: 'test' })
            };
        }
    });

导致以下错误:

Error: error reading values after :

显然 SASS 不喜欢下划线的变量语法..

TL;DR

如何从我的 Node 应用程序中将动态变量传递给 SASS？

附加信息

1. 我和我的团队并不完全反对改用 Stylus 之类的服务。 ;但是，到目前为止，我们已经取得了重大进展，这将是一个痛苦。

最佳答案

我发现自己处于非常相似的境地。我们有很多现有的 SASS，现在需要接受要在整个过程中使用的动态值/变量(作为变量)。我最初走的是编写临时目录/文件的路线，本质上是创建一个“代理入口点”，它将创建一个 proxy_entry.scss 和 variables.scss 并引导实际entry.scss 声明了预期的 SASS 变量。 这很好，达到了预期的效果，但感觉有点过于复杂......

事实证明有一个更简单的解决方案，这要归功于 node-sass's options.data选项。这接受“要评估的 SASS 字符串”。

Type: String Default: null Special: file or data must be specified

A string to pass to libsass to render. It is recommended that you use includePaths in conjunction with this so that libsass can find files when using the @import directive.

这完全消除了编写/管理所有临时目录和文件的需要。

视觉 TL;DR

解决方案归结为这样的事情

1.) 像往常一样定义 sassOptions

var sassOptionsDefaults = {
  includePaths: [
    'some/include/path'
  ],
  outputStyle:  'compressed'
};

2.) 为 options.data

var dataString =
  sassGenerator.sassVariables(variables) +
  sassGenerator.sassImport(scssEntry);
var sassOptions = _.assign({}, sassOptionsDefaults, {
  data: dataString
});

3.) 像往常一样评估 SASS

var sass = require('node-sass');
sass.render(sassOptions, function (err, result) {
  return (err)
    ? handleError(err);
    : handleSuccess(result.css.toString());
});

注意: 这是假设您的 entry.scss 导入了一些将变量定义为“默认值”的 variables.scss。

// variables.scss
$someColor: blue !default;
$someFontSize: 13px !default;

// entry.scss
@import 'variables';
.some-selector { 
  color: $someColor;
  font-size: $someFontSize;
}

作为一个例子拼凑起来

var sass = require('node-sass');

// 1.) Define sassOptions as usual
var sassOptionsDefaults = {
  includePaths: [
    'some/include/path'
  ],
  outputStyle:  'compressed'
};

function dynamicSass(scssEntry, variables, handleSuccess, handleError) {
  // 2.) Dynamically create "SASS variable declarations"
  // then import the "actual entry.scss file".
  // dataString is just "SASS" to be evaluated before
  // the actual entry.scss is imported.
  var dataString =
    sassGenerator.sassVariables(variables) +
    sassGenerator.sassImport(scssEntry);
  var sassOptions = _.assign({}, sassOptionsDefaults, {
    data: dataString
  });

  // 3.) render sass as usual
  sass.render(sassOptions, function (err, result) {
    return (err)
      ? handleError(err);
      : handleSuccess(result.css.toString());
  });
}

// Example usage.
dynamicSass('some/path/entry.scss', {
  'someColor': 'red',
  'someFontSize': '18px'
}, someSuccessFn, someErrorFn);

“sassGenerator”函数可能看起来像

function sassVariable(name, value) {
  return "$" + name + ": " + value + ";";
}

function sassVariables(variablesObj) {
  return Object.keys(variablesObj).map(function (name) {
    return sassVariable(name, variablesObj[name]);
  }).join('\n')
}

function sassImport(path) {
  return "@import '" + path + "';";
}

这使您能够像以前一样编写您的 SASS，在需要的任何地方使用 SASS 变量。它也不会将您束缚于任何“特殊的动态 sass 实现”(即，这避免了在整个 .scss 文件中使用“下划线/lodash 模板”)。这也意味着您可以利用 IDE 功能, linting, 等等...都是一样的，因为你现在只是回到编写常规的 SASS。

此外，它可以很好地转换为非 Node/http/compile-on-the-fly 用法，例如通过 Gulp 等给定多个值集的情况下预编译 entry.scss 的多个变体等。 ..

我希望这可以帮助您@ChrisWright(和其他人)!我知道我很难找到有关该主题的信息，我想这是一个相当常见的用例(希望将动态值从数据库、配置、HTTP 参数等传递到 SASS 中......)。

关于css - 在使用 Node 进行 SASS 编译期间注入(inject)变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31148803/