Question

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

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

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

理想情况下，我希望＆＃34; $ color＆＃34;作为用户输入，然后我可以打印出多个百分比变体。

谢谢！

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>

Answer 2

由于必须将SASS编译为浏览器的CSS，您可以使用Javascript函数使用CSS Tricks中的link来淡化或缩小用户输入的颜色。

Answer 3

不是真正高效且不复杂，因此不推荐 - 但是如果你可以编写服务器脚本会有什么效果：将用户输入发布到服务器，将其写入sass文件并重新编译css。

也许用户可以从中选择一组预定义的颜色就足够了吗？

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

3 个答案:

是的，你可以！