zurb Foundation 4.0 自定义按钮颜色没有SASS答案

【问题标题】：zurb foundation 4.0 custom Button color without SASSzurb Foundation 4.0 自定义按钮颜色没有SASS
【发布时间】：2013-09-28 21:15:38
【问题描述】：

http://foundation.zurb.com/docs/components/buttons.html

从文档中可以使用 Mixin 获得自定义颜色。我不太了解 SCSS 并试图在不使用它的情况下勉强度日。

我想要黑色按钮而不是默认的蓝色。是否可以创建一些 CSS 类 .black { ... } 使按钮变黑？

【问题讨论】：

请你做个小提琴
试试这个：.button.black { background-color: #000000; } 然后将“黑色”类添加到您的元素中。

标签： css zurb-foundation

【解决方案1】：

是的。如果您不了解 SCSS，可以通过自己的类覆盖 css，但建议更改 _variables.scss 中的 SCSS 变量值。

css覆盖的方式是：

例如创建一个新的 css 文件。我的样式.css

然后在之后调用html头中的css

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />

  <link rel="stylesheet" href="css/mystyle.css">

  <script src="js/vendor/custom.modernizr.js"></script>

</head>

<a href="#" class="small button black">.small black colour button</a>
<body>

然后你的 css 将覆盖foundation.css 类。

将您的 css 类添加到 html 文件中的按钮元素中。

请看上面的代码。

【讨论】：

【解决方案2】：

我认为你的错误可能是它被覆盖了，即使它不受欢迎，唯一的方法之一是使用!important，所以你需要使用：

.black {
    background-color: #000 !important;
}

此外，您已将 !important 用于常规的，您还需要将其添加到悬停方法中，如下所示：

.black:hover {
    background-color: #ccc !important;
}

编辑

刚刚发现你甚至不需要重要的东西，但如果它开始行为不端，那就是这样做

这是一个小提琴：

http://jsfiddle.net/Hive7/p868s/

【讨论】：