CSS - 扩展类属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10705038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Extending class properties
提问by Gublooo
I'm pretty new to CSS and have been finding my way around so far. I am creating these button like links with shadows and stuff. Now there are several such buttons required on the site - everything about the buttons is same - except few properties change like width and font size.
我对 CSS 还是很陌生，到目前为止一直在寻找方法。我正在创建这些按钮，比如带有阴影和东西的链接。现在网站上需要几个这样的按钮——关于按钮的一切都是一样的——除了宽度和字体大小等一些属性发生变化。
Now instead of copying the same code - over and over for each button - is there a way of extending the button and adding just the properties that change.
现在，不是为每个按钮一遍又一遍地复制相同的代码，而是有一种方法可以扩展按钮并仅添加更改的属性。
Example of two buttons - 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;
}
And this is how I'm currently using it in my html
这就是我目前在我的 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>
So I'm wondering if there is a cleaner way to do this - like
所以我想知道是否有更清洁的方法来做到这一点 - 比如
.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 */
}
But I'm not sure how to do this. Thanks for your inputs
但我不知道如何做到这一点。感谢您的投入
回答by Hymantheripper
You can add multiple classes to one element, so have one .button class which covers everything, then a .button-submit class, which adds things in.
您可以向一个元素添加多个类，因此有一个 .button 类涵盖所有内容，然后是一个 .button-submit 类，用于添加内容。
For example:
例如：
.button {
padding: 10px;
margin: 10px;
background-color: red;
}
.button-submit {
background-color: green;
}?
See a live jsFiddle here
在此处查看实时 jsFiddle
In your case, the following should work:
在您的情况下，以下应该有效：
.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;
}?
See a live jsFiddle here
在此处查看实时 jsFiddle
回答by Marco
You might want to try this:
你可能想试试这个：
.button {
padding: 10px;
margin: 10px;
background-color: red;
}
.button.submit {
background-color: green;
}
.button.submit:hover {
background-color: #ffff00;
}
This way you avoid repeating the word and will able to use the classes in the elements like this:
这样你就可以避免重复这个词，并且可以像这样在元素中使用类：
<a href="/" id="btnAsk" class="button">Ask a Question</a>
<a href="/" id="btnSubmit" class="button submit">Submit</a>
See the example in JSFiddle (http://goo.gl/6HwroM)
请参阅 JSFiddle ( http://goo.gl/6HwroM) 中的示例
回答by Rick Donohoe
Rather than repeat the common "Add a button class to the element" answer I'm going to show you something new in the weird and whacky world of new age CSS, or better known as SCSS!
而不是重复常见的“向元素添加按钮类”的答案，我将向您展示新时代 CSS 的怪异和古怪世界中的新事物，或者更广为人知的 SCSS！
This reuse of code in stylesheets can be achieved with something called a 'Mixin'. What this allows us to do is reuse certain styles by using the '@include' attribute.
样式表中代码的这种重用可以通过称为“混合”的东西来实现。这允许我们通过使用“@include”属性来重用某些样式。
Let me give you an example.
让我给你举个例子。
@mixin button($button-color) {
background: #fff;
margin: 10px;
color: $color;
}
and then whenever we have a button we say
然后每当我们有一个按钮时，我们就会说
#unique-button {
@include button(#333);
...(additional styles)
}
Read more here: http://sass-lang.com/tutorial.html.
在此处阅读更多信息：http: //sass-lang.com/tutorial.html。
Spread the word!!!
传播这个词！！！
回答by j08691
You can do this since you can apply more than one class to an element. Create your master class and and other smaller classes and then just apply them as needed. For example:
您可以这样做，因为您可以将多个类应用于一个元素。创建您的大师班和其他较小的班级，然后根据需要应用它们。例如：
<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>
This would apply the button and submit classes you would create while allowing you to also apply those classes separately.
这将应用按钮并提交您将创建的类，同时允许您单独应用这些类。
Modify your code example along the lines of:
按照以下方式修改您的代码示例：
.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 */
}
And apply like:
并申请：
<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>
回答by Mali
You may want to look into Sass. With Sass you can basically create variables in your css file and then re-use them over and over. http://sass-lang.com/The following example was taken from Sass official website:
你可能想看看 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;
}
回答by Craig Swing
.ask-button-display,
.ask-button-submit {
/* COMMON RULES */
}
.ask-button-display {
}
.ask-button-submit {
}
回答by Ana
Add a button class to both links for the common parts
为公共部分的两个链接添加一个按钮类
.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;
}
Keep in your other classes the rules that aren't common.
在其他班级中保留不常见的规则。
And your HTML will be
你的 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>
