2

我有这个基本的 HTML/CSS 模板，我将用它做很多子网站，这些网站将使用不同的颜色和图像变体来处理<h>标签、背景颜色等内容。

我正在寻找修改基本主题的方法并制作它，以便创建具有颜色变化的子模板，我将修改一行代码（例如.this-smart-class{color: #mycolorcodehere)，瞧，所有使用该颜色变化的元素。

我自己已经在设计一种方法来做到这一点，但我是前端开发的初学者/中级人员，我会好奇不同的方法来做到这一点。我希望为此只使用 CSS，也许是一些 jQuery，但前提是证明它非常实用。

为了更好地理解这个问题，请查看屏幕截图：相同布局的变体。

如果您发现这个问题“不具体”，请在否决或关闭它之前问我，我会在多个问题中分解它，但我认为很好的答案可能会由此产生，我可能不会使用适当的术语来具体我想要，因为我没有足够的经验。

在此处输入图像描述

4

2 回答 2

2

最好使用 CSS 预处理器（我更喜欢LESS）。您可以制作不同的颜色配置文件，例如“color-config-red.less”和“color-config-violet.less”，在这些文件中，您可以在变量@background-color等中定义不同的颜色，并在整个项目中重复使用它们。通过该设置，您可以简单地为不同的网站包含不同的颜色配置，同时具有相同的布局。

于 2013-07-10T11:15:01.417 回答
1

我倾向于使用一些可以应用于任意数量元素的通用类。

例如：

.smalltext { font-size: 0.8em }
.bold { font-weight: bold }
.clear { clear: both }
.highlight { background-color: #999999 }

我之前已经提到过这一点，有些人对此持批评态度，但它对我有用。

那我可以说：

<div id="footer" class="smalltext"></div>
<div id="box-header" class="highlight bold"></div>
于 2013-07-10T11:33:09.507 回答