CSS框架和配色方案答案

【问题标题】：css framework and color schemesCSS框架和配色方案
【发布时间】：2011-05-02 02:29:47
【问题描述】：

我找不到可以让我插入自己的配色方案的 CSS 框架。

例如，在我当前的项目中，我导入了 blueprint/screen.css。要更改字体的颜色，我必须更改 body { color..}、h2 { color..}、h3 {color..} 等。

难道没有什么东西可以提供不错的 css 默认值，但也可以使用配色方案吗？

【问题讨论】：

【解决方案1】：

你可以试试http://lesscss.org/。

它允许您在 CSS 中使用诸如变量之类的东西，这听起来正是您所追求的：

// LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

【讨论】：

【解决方案2】：

创建您自己的在蓝图之后加载的 CSS 文件。您需要重新定义所有内容，但蓝图默认值与浏览器默认值相差不远。

如果您想快速切换出多个配色方案，请在标记上设置类。然后使用您的 CSS 文件为每个样式定义自定义样式。

CSS：

.theme1 body {
    font-family: Tahoma;
    color: #500;
}

.theme2 body {
    font-family: Verdana;
    color: #050;
}

对于第一个主题：

<html class="theme1">

对于第二个主题：

<html class="theme2">

【讨论】：

【解决方案3】：

您不能只编辑 blueprint/screen.css 文件吗？您也可以使用 SASS 之类的东西，然后在样式表的顶部创建所有默认值，然后在呈现它时让它贯穿整个样式表。

【讨论】：