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

【问题标题】：How to make a color scheme for sub sites如何为子站点制作配色方案
【发布时间】：2016-08-10 20:18:19
【问题描述】：

我有一个问题，关于如何设置一种巧妙的方式来制作某种主题。我正在使用 Bootstrap 3.3.7 及更低版本。挑战在于：

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

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

说，规则是这样的：

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

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

从技术上讲，当加载一个子部门的页面时，“部门类”会添加到 <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; 
}

等等……

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

【问题讨论】：

你是否使用图像作为标志
是的，我没有指定它是背景颜色 - 在图像后面。但理论上我希望能够在任何地方使用这个颜色变量，它会呈现正确的部门颜色。 :-)
你能为每个部门页面使用不同的样式表吗？
这就是我们今天所拥有的，也是我想要避免的。 :-)

标签： css twitter-bootstrap less less-mixins

【解决方案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;
}

【讨论】：