You have the ability to combine CSS selectors by using a comma, like in this example:
.one, .two {
color: #F00;
}<div class="one">One</div>
<div class="two">Two</div>Using this method produces the same outcome as specifying each selector individually:
.one {
color: #F00;
}
.two {
color: #F00;
}<div class="one">One</div>
<div class="two">Two</div>Merging selectors as shown above is very helpful, because it allows you to change multiple elements by only altering one value. This is particularly advantageous for adjusting color schemes.
However, can CSS declarations be combined too?
For instance, if you want to vertically center text in an element where line-height should always match height:
.test {
border: 1px solid #000;
padding-left: 10px;
height: 100px;
line-height: 100px;
}<div class="test">Test</div>The anticipated combined declaration of height, line-height: 100px; does not apply both declarations, resulting in an invalid property value.
In SASS, you could link line-height to height by simply using:
$height = 100px;
.test {
border: 1px solid #000;
padding-left: 10px;
height: $height;
line-height: $height;
}
Is there a way to specify that one property should use the same value as another property in raw CSS?