Back in the past I learned a lot about CSS but now I can't remember how to reuse styles.
Example:
I have some tabs with class tab
and I can switch them with javascript. The current selected tab has another class, active
.
Their CSS style:
.tab {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 15px 0 15px 0;
border: solid thin #CCC;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #272F42;
cursor: pointer;
background-color: white;
}
.active {
position: relative;
top: 0;
left: 0;
padding: 15px 0 15px 0;
border: solid thin #CCC;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #272F42;
cursor: default;
background-color: #FFCF75;
}
Both styles has a lot of identic styles except 2, cursor
and background-color
.
So my question is, how can I resuse the .tab style and use it in .active?
I want achieve something like this:
.active { //extends .tab
cursor: default;
background-color: #FFCF75;
}
Thanks.
To achieve that you can simply pass the styled-component you wish to extend (or inherit styles from) to the styled() constructor, for example, like so: import styled from 'styled-components'; const Square = styled.
First of all, you should know that we'll do all the coding in the Sass file (style. scss) and not in the style. css file. It is Sass that will generate a CSS file for us with the same code.
You could, and probably should, apply both classes to the element like so:
<a class="tab active"></a>
If you want a css rule for the specific combination of these two classes, you'd do it like so:
.tab {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 15px 0 15px 0;
border: solid thin #CCC;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #272F42;
cursor: pointer;
background-color: white;
}
.active
{
cursor: default;
background-color: #FFCF75;
}
.tab.active /* no space */
{
/* styles for elements that are both .tab and .active */
/* leaving .active reusable for things other than tabs */
/* and allowing override of both .tab and .active */
}
This allows you to avoid making unnecessary copies of your style declarations... and gives you the specificity to override either of the individual classes when an element has both.
Do this. Combine the styles and separate with a comma. Then add other rules targeting the differences.
.tab, .active {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 15px 0 15px 0;
border: solid thin #CCC;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #272F42;
}
.tab{
cursor: pointer;
background-color: white;
}
.active {
cursor: default;
background-color: #FFCF75;
}
EDIT
Based on your comment
I'm currently switching the tabs by adding .active style to the class attribute.
this is what I would do:
HTML
<div class="tab"></div>
CSS
.tab {
position: relative;
top: 0;
left: 0;
width: 100%;
padding: 15px 0 15px 0;
border: solid thin #CCC;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
color: #272F42;
cursor: pointer;
background-color: white;
}
.active {
cursor: default;
background-color: #FFCF75;
}
Then just add or remove the .active
class, leaving the .tab
as is.
As long as .active
is lower down in the stylesheet, it will overwrite the necessary bits.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With