如何为子站点制作配色方案

Question

我有一个关于如何巧妙地制作某种主题的问题。我正在使用 Bootstrap 3.3.7 及更低版本。挑战是这样的：

我有一个包含三个部门的公司网站。每个部门都有自己的颜色。这种颜色用于徽标和链接，也可能用于其他元素。

该公司有一些基本样式，但当访问者导航到其中一个部门网页时，徽标和链接的颜色应更改为其部门颜色。

说起来，规则是这样的：

基色 = 黑色
dept_one = 红色
dept_two = 绿色
dept_three = 橙色

如何使用 less 和变量进行设置？

从技术上讲，当加载一个子部门的页面时，"department class" 被添加到 <body> 标签，所以我正在寻找一种巧妙的方法来构建我的 less 以便仅改变一个地方的颜色。

所以如果我有这个 html:

<body class="dept_one">

那么我希望能够做到：

a {
  color: @link-color;
}

这将产生

a {
  color: red; 
}

和

<body class="dept_two">

仍在使用

a {
  color: @link-color;
}

在这种情况下会产生

a {
  color: green; 
}

等等...

我们今天的解决方案是加载一个特定的部门样式表，它会覆盖基本样式，但我想放弃这种方法。我希望用 less 有一个聪明的方法来做到这一点，比如生成这些颜色变量的 mixin？

Answer 1

这是一个简单的示例，Sample Pen您可以像这样创建自己的样式

HTML

<div class="dep-one">
 <a href="#"> Click here </a>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
<div class="dep-two">
  <a href="#"> Click here </a>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
<div class="dep-three">
  <a href="#"> Click here </a>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>

更少

@dep-one: red;
@dep-two: green;
@dep-three: orange;

.dep-one {
  color: @dep-one;
  a {
    color: @dep-one;
  }
}
.dep-two {
  color: @dep-two;
  a {
    color: @dep-two;
  }
}
.dep-three {
  color: @dep-three;
  a {
    color: @dep-three;
  }
}
div {
  padding: 10px;
  text-align: center;
}

如何为子站点制作配色方案

How to make a color scheme for sub sites

css

less

twitter-bootstrap

less-mixins