Extends in SCSS: How to Share Styles Easily
Extends in SCSS: How to Share Styles Easily
What is @extend in SCSS?
@extend in SCSS is used to share styles between selectors. It allows one selector to inherit the styles of another. This helps avoid repeating the same CSS code. It works by merging selectors instead of duplicating properties. This makes your final CSS smaller and more efficient. It is useful for common UI elements. Overall, @extend improves code reuse and maintainability.
Example:
.button {
padding: 10px;
border-radius: 5px;
}
.primary-btn {
@extend .button;
background: blue;
}
Why Use @extend?
Using @extend helps reduce code duplication. It keeps your stylesheet clean and DRY (Don’t Repeat Yourself). Instead of rewriting styles, you reuse them easily. It also reduces the size of compiled CSS. This improves performance. It is ideal for shared design patterns. Helps maintain consistency across components.
Example:
.alert {
padding: 10px;
border: 1px solid;
}
.success {
@extend .alert;
border-color: green;
}
Placeholder Selectors (%)
SCSS provides placeholder selectors using % for better use with @extend. These are not included in the final CSS unless extended. It avoids unnecessary output. Placeholders are perfect for reusable styles. They keep your CSS optimized. Commonly used in large projects. Improves performance and structure.
Example:
%card-style {
padding: 20px;
border-radius: 10px;
}
.card {
@extend %card-style;
}
Difference Between @extend and @mixin
@extend shares styles by merging selectors, while @mixin copies styles into each selector. @extend results in smaller CSS output. Mixins are more flexible with parameters. @extend is better for fixed shared styles. Mixins are better for dynamic styling. Both have their use cases. Choosing the right one is important.
Example:
// Using @extend
.box {
border: 1px solid black;
}
.container {
@extend .box;
}
Nested @extend Usage
You can use @extend inside nested selectors. It works similarly to normal usage. Helps maintain structure in nested SCSS. Makes code cleaner. Useful in component-based design. Improves readability. Keeps styles organized.
Example:
.nav {
.link {
color: blue;
}
.active {
@extend .link;
font-weight: bold;
}
}
Limitations of @extend
While powerful, @extend has some limitations. It can create complex selector chains. This may make debugging harder. Overusing it can lead to unexpected results. It works best for simple shared styles. Not ideal for dynamic values. Developers should use it carefully. Balance it with mixins.
Real-Time Use Case
In real projects, @extend is used for buttons, alerts, cards, and layouts. It helps maintain consistent UI design. Developers can reuse base styles easily. Reduces file size and improves performance. Makes updates simple. Useful in large team projects. Ensures scalable styling.
Example:
%btn-base {
padding: 10px;
border-radius: 5px;
}
.btn-primary {
@extend %btn-base;
background: blue;
}
.btn-danger {
@extend %btn-base;
background: red;
}
Final Tip
Use @extend for simple and shared styles, and combine it with mixins for more flexibility. Prefer placeholder selectors (%) for better performance and cleaner output.
