php - 如何根据用户给出的 2 种颜色生成完整的网站样式表？

Question

我被要求构建一个表单，要求提供前景色和背景色，然后根据这两种颜色为网站创建样式表。我希望能够为网站的不同部分以及悬停状态等制作颜色阴影......

我认为 LESS 或 SASS 将用于此，但不知道从哪里开始。

Answer 1

你是对的，你可以用更少的变量来实现这一点。以这个 lessCSS 为例，假设styles.less：

@primaryColor: #c00;
@secondaryColor: #ddd;

body{
  background: @secondaryColor;
}

a{
  color: lighten(@primaryColor, 10%);
}

所以你想要的是用用户的输入覆盖@primaryColorand变量。@secondaryColor如果您使用的是lessphp 编译器：

$less = new lessc();
$less->setFormatter('compressed');

$lessData = array();

// get the styles
$lessData[] = file_get_contents('/path/to/styles.less');

// override variables (don't forget to validate input)
$lessData[] = sprintf('@primaryColor: %s', $_POST['primaryColor']);
$lessData[] = sprintf('@secondaryColor: %s', $_POST['secondaryColor']);

// compile to CSS
$css = $less->compile(implode("\n", $lessData));

file_put_contents('path/to/cache.css', $css);

Answer 2

您可以使用 LESS 和 JavaScript 来设置颜色。你可以这样做：

@color1: `document.getElementById("Color1")`;
@color2: `document.getElementById("Color2")`;

例如使用这样的输入字段：

<input type="text" id="Color1"/>
<input type="text" id="Color2"/>

您可以在样式表中使用变量

body
{
    background: @secondaryColor;
}
.randomClass 
{
    background: @secondaryColor;
}

Answer 3

如果您想使用SASSPHP 功能，最好的办法是使用PHPSass。

阅读文档并尝试演示。

例子

作为演示需要两种颜色：

$red: #f00;
$blue: #232;

body {
    background: $red;
    color: $blue;
}