CSS - 扩展类属性答案

【问题标题】：CSS - Extending class propertiesCSS - 扩展类属性
【发布时间】：2012-05-22 15:21:48
【问题描述】：

我对 CSS 很陌生，到目前为止一直在寻找我的方法。我正在创建这些按钮，例如带有阴影和东西的链接。现在网站上需要几个这样的按钮——关于按钮的一切都是一样的——除了一些属性改变，比如宽度和字体大小。

现在不是为每个按钮一遍又一遍地复制相同的代码 - 有一种方法可以扩展按钮并仅添加更改的属性。

两个按钮的示例 - css

.ask-button-display {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
width:350px;
font-size: 20px;
font-weight: bold;
padding:10px;
}


.ask-button-submit {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
font-weight: bold;
width:75px;
font-size: 12px;
padding: 1px;
}

这就是我目前在我的 html 中使用它的方式

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

所以我想知道是否有更清洁的方法来做到这一点 - 比如

.button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}

AND THEN SOMEHOW EXTEND IT LIKE
.button #display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}

.button #ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

但我不知道该怎么做。感谢您的投入

【问题讨论】：

标签： css stylesheet

【解决方案1】：

您可能想试试这个：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button.submit {
    background-color: green;
}
.button.submit:hover {
    background-color: #ffff00;
}

这样你就可以避免重复这个词，并且可以像这样使用元素中的类：

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a>

查看 JSFiddle 中的示例 (http://goo.gl/6HwroM)

【讨论】：

【解决方案2】：

.ask-button-display,
.ask-button-submit {
  /* COMMON RULES */
}

.ask-button-display {

}

.ask-button-submit {

}

【讨论】：

【解决方案3】：

您可以为一个元素添加多个类，因此有一个涵盖所有内容的 .button 类，然后是一个添加内容的 .button-submit 类。

例如：

.button {
    padding: 10px;
    margin: 10px;
    background-color: red;
}

.button-submit {
    background-color: green;
}

查看现场 jsFiddle here

在你的情况下，以下应该有效：

.button {
    background: #8BAF3B;
    border-radius: 4px;
    display: block;
    letter-spacing: 0.5px;
    position: relative;
    border-color: #293829;
    border-width: 2px 1px;
    border-style: solid;
    text-align:center;
    color: #FFF;
    width:350px;
    font-size: 20px;
    font-weight: bold;
    padding:10px;
}


.button-submit {
    width:75px;
    font-size: 12px;
    padding: 1px;
}

查看现场 jsFiddle here

【讨论】：

如何扩展.something button？我用class='button-foo' 尝试了.something button-foo，没有用。

【解决方案4】：

与其重复常见的“向元素添加按钮类”答案，我将向您展示新时代 CSS 或更广为人知的 SCSS 的奇怪而古怪的世界中的一些新东西！

样式表中代码的重用可以通过称为“混合”的东西来实现。这允许我们通过使用“@include”属性重用某些样式。

让我举个例子。

@mixin button($button-color) {
    background: #fff;
    margin: 10px;
    color: $color;
}

然后每当我们有一个按钮我们说

#unique-button {
    @include button(#333);
    ...(additional styles)
}

在此处阅读更多信息：http://sass-lang.com/tutorial.html。

广而告之！！！

【讨论】：

值得一提的是原生不支持saas

【解决方案5】：

您可以这样做，因为您可以将多个类应用于一个元素。创建您的大师班和其他较小的课程，然后根据需要应用它们。例如：

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a>

这将应用按钮并提交您将创建的类，同时允许您单独应用这些类。

按照以下方式修改您的代码示例：

.master_button {
/* PUT ALL THE COMMON PROPERTIES HERE */
}
AND THEN SOMEHOW EXTEND IT LIKE
.button_display {
/* THE DIFFERENT PROPERTIES OF Display BUTTON */
}
.button_ask {
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */
}

并像这样申请：

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a>

【讨论】：

【解决方案6】：

您可能想研究一下 Sass。使用 Sass，您基本上可以在您的 css 文件中创建变量，然后一遍又一遍地重复使用它们。 http://sass-lang.com/ 以下示例取自 Sass 官网：

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

【讨论】：

这很好，但没有原生支持。

【解决方案7】：

为公共部分的两个链接添加一个按钮类

.button {
background: #8BAF3B;
border-radius: 4px;
display: block;
letter-spacing: 0.5px;
position: relative;
border-color: #293829;
border-width: 2px 1px;
border-style: solid;
text-align:center;
color: #FFF;
}

在你的其他类中保留不常见的规则。

你的 HTML 将是

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a>
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a>

【讨论】：

【解决方案8】：

在不更改/添加新类的情况下，您可以为类名以“ask-button”开头的所有元素添加样式...（无论类中的元素是什么；按钮、锚点、div 等）假设您的那么按钮就是div：

 div[class^="ask-button"] {
   // common css properties
 }

您还可以列出所有具有共同属性的类，如下所示：

.ask-button-display,
.ask-button-submit {
   // common css properties here
}

然后为每个按钮添加单独的样式：

.ask-button-display{
    // properties only for this button
    }

.ask-button-submit {
   // properties only for this button
}

【讨论】：