Question

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

从文档中可以使用Mixin获取自定义颜色。我对SCSS了解不多，并试图不使用它。

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

Answer 1

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

css覆盖的方式是：

例如，

创建一个新的css文件。 mystyle.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文件的button元素中。

请参阅上面的代码。

Answer 2

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

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

另外，因为你已经使用了！重要的只是常规的，你还需要将它添加到你的悬停方法，所以像这样：

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

修改

刚刚发现你甚至不需要重要但是如果它开始行为不端那么该怎么办

这是一个小提琴：

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

zurb基础4.0自定义按钮颜色没有SASS

2 个答案: