javascript - 是否可以在 sass 中使用用户输入的值？

Question

我正在创建一个调色板，我已经在网上看到了很多使用我在项目中使用的 sass 的方法，但是我正在接受用户输入(十六进制代码)并希望以不同的百分比打印出来变体 - 例如，向用户展示 #ff0000 的较浅/较深版本。

这可能吗？我见过这样的事情:

$color: #3cb878;
$light: lighten($color,15%);
$dark: darken($color,15%);

理想情况下，我希望“$color”成为用户输入，然后我可以打印出多个百分比变体。

谢谢!

Answer 1

是的，你可以!

有一个用 JavaScript 编写的 SASS 编译器，您可以在浏览器中运行。

https://github.com/medialize/sass.js/

您必须通过 JavaScript 对 SASS 源代码执行搜索和替换，然后进行编译。然后，您可以通过将其插入 DOM 来向用户展示它。

运行库非常简单:

<script src="dist/sass.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  sass.compile(scss, function(result) {
    console.log(result);
  });
</script>