The ampersand & operator is often used when nesting in SASS and is an extremely useful feature.
It can be a great time-saver, especially if you happen to be coding your stylesheets with the BEM methodology, or using any systematic naming convention for your class names.
See the following HTML:
<button class = "btn btn--red"> Click me! </button>
Typical styling would be something like this:
.btn {
display: inline-block;
padding: 15px 32px;
}
.btn--red {
background-color: #ff0000; // Red
}
.btn:hover {
background-color: #fff; // White
}
With the & operator we can be much more efficient:
.btn {
display: inline-block;
padding: 15px 32px;
&--red {
background-color: #ff0000; // Red
}
&:hover {
background-color: #fff; // White
}
}
Notice that we’ve now nested the child selectors that use the same .btn name, represented by the & operator. name.
When compiled the & operator will be replaced by its enclosing selector name!
In the next post, we’ll learn about control directives.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)