较少:针对不同主题(颜色变化)生成不同的CSS [英] LESS: generate different CSSs for different theme (color variation)

问题描述

我想使用LESS为我的网站管理其他主题"的创建.

我的想法是，每次使用由根文件导入的特定变量.less时，都会生成不同的已编译.css文件.

下面是一个简单的示例:

1)我在2个不同的文件中有2种不同的配色方案:variable1.less和variable2.less.

2)文件style.les应当具有@import规则，例如"@import variableX.less"，并且显然，此'X'应该在假设值为'1'和'2'的情况下进行更改.

3)然后，编译器应分别基于相对的variable1.less和variable2.less生成style1.css和style2.css.

如何获取?

解决方案

您需要翻转导入方向.

style.less文件不应导入任何变量.

相反，每个variableN.less文件都应在定义其所有变量后导入style.less.
然后，这些文件将根据它们的变量值分别编译为一整套规则.

I would like to manage creation of different "theme" for my site, using LESS.

My idea is to generate different compiled .css files, using each time a specific variable.less that is imported by root file.

Here a simple example:

1) I have 2 different color scheme in 2 distinct files: variable1.less and variable2.less.

2) A file style.less should have an @import rule like "@import variableX.less" and obviously this 'X' should change assuming values '1' and '2'.

3) Compiler should then generate style1.css and style2.css, each based on relative variable1.less and variable2.less.

How to obtain this?

解决方案

You need to flip your import directions.

The style.less file should not import any variables.

Instead, each variableN.less file should import style.less after defining all of its variables.
These files will then each compile to a full set of rules based on their variable values.

这篇关于较少:针对不同主题(颜色变化)生成不同的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！