如何基于用户给出的2种颜色生成完整的网站样式表？ [关闭]

I've been asked to build a form, that asks for a foreground and background color, then create a stylesheet for a website based on those two colors. I'd like to be able to make shades of the colors for different parts of the site, and for hover states etc...

I think LESS or SASS would be used for this but not sure where to start.

If you would like to use SASS with PHP functionality, your best bet is to use PHPSass.

Read the documentation and try the demo.

Example

As a demo requires two colors:

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

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

You're correct, you can achieve this with less variables. Take this lessCSS example, let's say styles.less:

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

body{
  background: @secondaryColor;
}

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

So what you want is to override the @primaryColor and @secondaryColor variables with input from the user. If you're using the lessphp compiler:

$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("
", $lessData));

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

You can use LESS and JavaScript for setting the colors. You can do something like that :

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

While using an input field like that for exemple :

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

The you can use the variables in your style sheet

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