Question

我正在尝试找到一个解析和操作SCSS的工具。我需要做的是以编程方式“合并”来自不同来源的两个版本的SCSS文件。

用例涉及的文件只在规则中的声明不同而不是两个完全不同的SCSS文件。

例如，如果我有以下文件：

// foo/sample.scss
$myColor: #fff;
body { background-color: $myColor; margin: 0; }

// bar/sample.scss
$myColor: #ccc;
$black: #000;
body { background-color: $myColor; color: $black; }

拥有一个可以执行以下操作的工具会很酷：

var sass = require('some-sass-parsing-lib'),
  fooFile = sass.parse({source: 'foo/sample.scss', otherOption: 'value'}),
  barFile = sass.parse({source: 'bar/sample.scss', otherOption: 'value'});

function findFooRuleSomehow () {
  // this would be implemented by the developer, not a part of the lib
}

function hasDeclaration (rule, declaration) {
  // return wether `rule` has a declaration `declaration`
}

barFile.stylesheet.rules.forEach(function (barRule) {
  var fooRule = findFooRuleSomehow();

  rule.declarations.forEach(function (barDeclaration) {
    if (!hasDeclaration(fooRule, barDeclaration)) {
      fooRule.declarations.append(declaration);
    }
  });
  // do the same with variables, etc.
});

sass.save(fooFile, 'result/sample.scss');  // produces the updated version of the SASS file (not CSS)

并产生类似的东西：

// result/sample.scss
$myColor: #fff;
$black: #000;
body { background-color: $myColor; color: $black; margin: 0; }

例如，允许您仅将bar/sample.scss中的新声明合并到foo/sample.scss。

我发现reworks/css实际上允许你做一个与我正在寻找的非常相似的行为，但是这一个a）只适用于CSS（不是SCSS）或b）我找不到什么使用的选项，以便它也适用于SCSS。

还有node-sass，但它只渲染CSS，没有编程操作选项。

您是否知道可以推荐或指向我的任何工具？基于nodejs的工具非常理想，但我对ruby或python中的替代工具持开放态度。

如何以编程方式操作SCSS？

0 个答案: