使用 PHP 的 Sass 动态颜色答案

【问题标题】：Sass dynamic colors with PHP使用 PHP 的 Sass 动态颜色
【发布时间】：2016-01-03 07:32:52
【问题描述】：

我想在我的管理面板中添加对更改布局默认颜色的支持。示例：

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

我读过一些关于 Sass 的文章，我可以用它来做到这一点吗？我不想创建 7 个设置不同颜色的 style.css。

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

【问题讨论】：

可能重复：stackoverflow.com/questions/13558811/…, stackoverflow.com/questions/11549069/…

标签： php sass

【解决方案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>

【讨论】：