Table of Contents
URL: https://www.progressiverobot.com/sass-referencing-parent-selector/
In addition to simple nesting in Sass, you can also reference the parent selector using the <^>&<^> character:
.main a {
background-color: rgba(236,198,48,0.2);
transition: background-color .2s ease-out;
&:hover {
background-color: rgba(236,198,48,0.8);
}
}
The above, once compiled to CSS, will yield the following:
.main a {
background-color: rgba(236, 198, 48, 0.2);
transition: background-color .2s ease-out;
}
.main a:hover {
background-color: rgba(236, 198, 48, 0.8);
}
Here's another example for ya:
button {
background-color: blue;
&.success {
background-color: green;
}
&.warning {
background-color: yellow;
}
}
Which will produce the following:
button {
background-color: blue;
}
button.success {
background-color: green;
}
button.warning {
background-color: yellow;
}
