SASS Inheritance Tutorial
Working with Inheritance Using @Extends
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
Another great feature of Sass is inheritance. We implement this using the @extend directive.
Inheritance is a feature of SASS that allows multiple classes to share a common set of properties with one another.
Example
Some typical CSS code for styling a button:
.button {
background-color: #0000FF; // Blue
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.5rem;
}
If we happen to have a number of buttons on our website, all of which are styled in a similar manner, we would have a good case for inheritance!
We would implement a secondary button via inheritance like so:
.button-secondary {
@extend .button;
background-color: #4CAF50; // Green
}
Our .button-secondary class will take on all of the properties and values set in the .button class, with the exception of background-color which we’ve decided to set to green.
The use of inheritance helps us to keep our code neat, clean, and focused on constructing reusable components.
Up next in this series, we’ll take a look at the & operator.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
