CSS - 扩展类属性

Question

我是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 */
}

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

Answer 1

你可以在一个元素中添加多个类,所以有一个.button类覆盖所有内容,然后是一个.button-submit类,它可以添加内容.

例如:

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

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

在这里看一个现场的jsFiddle

在您的情况下,以下应该工作:

.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

Answer 2

你可能想试试这个:

.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)

Answer 3

而不是重复常见的"为元素添加按钮类"的答案,我将向您展示新时代CSS的怪异和笨拙世界中的新事物,或者更好地称为SCSS!

可以使用称为"Mixin"的东西来实现样式表中代码的重用.这允许我们做的是使用'@include'属性重用某些样式.

让我给你举个例子.

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

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

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

在这里阅读更多内容:http://sass-lang.com/tutorial.html.

传播这个词!!!