使用PHP生成动态Sass颜色

Question

我希望在我的管理面板中添加更改默认布局颜色的支持。例如：

$color: #333; // I will get this color from DB
background-color: $color

我了解一些Sass的知识，我可以使用它来实现这个需求吗？我不想创建7个不同颜色设置的style.css。

能够实现吗？我知道我可以创建"style.php"并设置Content-header CSS，但我不喜欢这种方式。

- Peter

---

可能是重复的问题：https://dev59.com/lmvXa4cB1Zd3GeqPH00Z，http://stackoverflow.com/questions/11549069/get-sass-from-database-compile-passed-data-instead-of-reading-from-file - cimmanon

Answer 1

SASS和LESS是CSS预处理器，意味着您可以在其中使用变量，但它们会被处理，并且您需要在HTML中包含新输出的CSS文件。

对于您要完成的任务，您可以利用服务器端变量来覆盖CSS。个人认为这种技术有些混乱，但它可以实现您要完成的任务。

例如，如果您设计了具有此CSS的布局：

.myBlock {
   background-color: blue;
}

然后您将其包含在HTML中：

<link rel="stylesheet" type="text/css" href="mylayout.css">

接下来，您可以使用PHP动态构建覆盖：

<link rel="stylesheet" type="text/css" href="mylayout.css">
<style>  
   <?php
       $overrides = ['.myBlock' => 'background-color: blue;'];
       foreach ($overrides as $class => $css) {
          echo($class.' {'.$css.'}');
       }
   ?>
</style>

服务器端处理后的呈现HTML如下所示：

<link rel="stylesheet" type="text/css" href="mylayout.css">
<style>
    .myBlock {background-color: blue;}
</style>

CSS 的特性决定了他是最后一个定义的规则，因此它将是浏览器使用的规则。

---

另一种方法，也许更加干净的方法，是使用 JSON 和 Javascript。您可以使用 PHP 将服务器端的数据数组进行 JSON 编码以便输出。然后使用 Javascript 应用颜色。例如：

<script>
   var colors = <?php echo(json_encode($colorData)); ?>;
   $('.myElement').css('background-color', colors['myElement']);
</script>

- Jeremy Harris