使用一个CSS选择网页外观而无需重新加载

The problem

I need to redesign CSS structure of an existing web application. It supports "branding" — it's got 5 different look-and-feels. Each user has one assigned brand, based on the company they work for.

我需要重新设计现有Web应用程序的CSS结构。它支持“品牌” - 它有5种不同的外观和感觉。每个用户都有一个指定品牌,基于他们所服务的公司。

Currently we have a bunch of complicated CSS files that have long since broken out of control. A typical web page includes 4 style sheets, templating system decides which ones. This means a page reload is needed to switch brands.

目前我们有一堆复杂的CSS文件,这些文件早已失控。典型的网页包括4个样式表,模板系统决定哪些样式表。这意味着需要重新加载页面才能切换品牌。

A new CSS system should:

一个新的CSS系统应该:

Be based on CSS scripting, preferably LESS, or SaSS.

基于CSS脚本,最好是LESS或SaSS。

Use only one style sheet in the target environment.

在目标环境中仅使用一个样式表。

Allow brands to be e̲a̲s̲i̲l̲y̲ switched without page reloading.

允许在不重页加载的情况下轻松切换品牌。

My idea

With the help of CSS scripting, define general and brand-based rules:

在CSS脚本的帮助下,定义一般和基于品牌的规则:

p {
    /* general settings */
}

#brand1 p {
    /* include/redefine general settings, add some for brand1 */
}

#brand2 p {
    /* include/redefine general settings, add some for brand2 */
}

Create an outer <div> for the whole body and switch its id with JavaScript to brand1, brand2, etc. This way I don't need to script CSS in any way, just switch the "context" of all elements with one line of JavaScript.

为整个身体创建一个外部

并将其id用JavaScript转换为brand1,brand2等。这样我就不需要以任何方式编写CSS脚本,只需用一行切换所有元素的“上下文”。 JavaScript的。

The problem

My idea

更多相关文章

随机推荐