LESS CSS& Symfony - 动态更新配色方案 [英] LESS CSS & Symfony - Updating color schemes dynamically

问题描述

我正在使用Symfony 1.4，使用LESS CSS预处理器遇到一个问题。

I'm working with the Symfony 1.4 and I'm running into a bit of a problem using the LESS CSS preprocessor.

我有2个Less文件与颜色特定变量。它们被称为 blue.less 和 red.less 。

Let's say that I have 2 Less files with color specific variables. They are called blue.less and red.less.

这里是：

Blue.less

@mainBorder: blue;
@pulldownBackground: blue;

Red.less

@mainBorder: red;
@pulldownBackground: red;

现在假设我有一个 layout.less 像这样：

Now let's say that I have a layout.less file that will look something like this:

// Colored line under Nav
.main {
    border: 1px solid @mainBorder;
    .pullDown { background: @pullDownBackground; }
}

如果我想使用其中一个颜色变量文件，在 layout.less 文件的顶部声明它：

@import 'red.less';

由于 @import 语句必须引用一个特定的文件，我怎么能够动态传递 blue.less 到@import语句每当我想改变颜色方案？

Since the @import statement has to reference a specific file, how would I be able to dynamically pass blue.less to the @import statement whenever I wanted to change the color scheme?

有没有办法动态声明使用PHP和Symfony框架将哪个颜色特定的LESS文件传递给import语句？

或者可以不使用服务器端代码解决这个问题？

Or can this problem be solved without server-side code?

推荐答案

Symphony，但这应该让你沿正确的方向，无论框架。

I've never used Symphony, but this should get you going in the right direction regardless of framework.

首先你想创建你的LESS文件：

First you want to create your LESS file:

<?php
$color_scheme = "red"; // we're simplifying here for now, but this could be set via $_POST variable

/*
    it would probably be a good idea to check if the file exists first before we import it.
    see function: file_exists()
*/

$contents = "
@import '$color_scheme.less';
@import 'main_styles.less';
@import 'other_stuff.less';
";

file_put_contents("path/to/styles.less");
?>

现在你有一个LESS文件，可以处理，就像你手写，但是颜色方案容易交换。如果我使用裸机PHP，我将使用 exec（）函数来调用将通过命令行可用的命令。下面是一个通过 exec（）调用SASS的例子（我从来没有使用过LESS，所以你必须在这里填写空格）。

Now you have a LESS file that is ready to be processed, same as if you written it by hand, but with the color scheme being easily swappable. If I were doing this with bare PHP, I would be using the exec() function to invoke commands that would be available via command line. Here's an example for invoking SASS via exec() (I've never used LESS this way, so you'll have to fill in the blanks here).

<?php
exec("sass --compile path/to/sass:path/to/public/css");
?>

如果您的Symphony插件无需使用exec /命令行进行编译，你可能想这样做。

If your Symphony plugin does the compilation for you without the need to use the exec/command line, then you'll probably want to do that instead.

这篇关于LESS CSS& Symfony - 动态更新配色方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！