Purpose of the article: The purpose of this blog is to demonstrate how to simplify and streamline color management in CSS using SCSS. By leveraging the color-class-generator mixin and a centralized $color-map, developers can automate the creation of utility classes for colors, ensuring scalability, consistency, and efficiency in their projects. This approach eliminates repetitive coding tasks, making CSS frameworks easier to maintain and extend.
Intended Audience: Web Developer Front-end Developer UI developer Full Stack developer
Tools and Technology: None
Keywords: SCSS, Dynamic CSS classes, CSS automation, SCSS mixins, CSS frameworks, SCSS maps, Color-class-generator, Utility classes, Scalable CSS, CSS optimization, Color palette in SCSS, Efficient CSS development, Background color classes, Text color classes
Effective management of colors is an important prerequisite when designing a scalable, maintainable framework in CSS.
SCSS or Sassy CSS comes up with great ways to handle such situations by mixins and maps. This is the code from the image showing how dynamic classes can be formed in CSS using SCSS for color. Let us see how it works.
The Problem: Managing Multiple Colors
In large projects, you have fixed colors (primary, secondary, warning, etc). Writing the CSS in that much length becomes tedious and could be prone to typing errors. Consider, if you want to create utility classes such as text-primary or background – bg-warning-you’d be defining each class inline. This will scale up as your color palette scales-there’s no way out of it.
The Solution: Dynamic Color Class Generator
Saying SCSS mixins and maps is what makes CCSS generation all along; the below example of code uses two-part construction:
1. The Color-Class-Generator Mixin
The mixin color-class-generator creates CSS classes for a given set of colors automatically.
// mixin for color class generator
@mixin color-class-generator($classNamespace, $colors, $property) {
@each $name, $color in $colors {
.#{$classNamespace}#{$name} {
#{$property}: $color !important;
}
}
}
Parameters:
$classNamespace: A prefix for the class (e.g., text- or bg-).
$colors: A map of color names to their values.
$property: The CSS property to apply (e.g., color or background-color).
How It Works:
It goes over every key-value pair in the $colors map.
It emits a CSS class for any color, something like .text-primary or .bg-danger.
Dynamically assigned the property color or background-color a corresponding value from the color map.
2. The $color-map
The $color-map is a SCSS map, that defines the color palette by pairing color names with their hex values.
// Define a map of color names to their values
$color-map: (
primary: #68b0da,
secondary: #1c2f72,
tertiary: #aaaaaa,
info: #3183e3,
danger: #eb5757,
warning: #ffd525,
success: #27a360,
pending: #F2994A,
accent1: #FF0092,
accent2: #FC6736,
dark-grey: #595959,
black-text: #1A1A1A,
grey-para: #737373,
);
The map serves as a location point for holding all the colors used in the project so that there will be uniformity across your CSS.
To create classes for a text color, background color, or any other property, you have to invoke the mixin:
// Usage of the mixin to generate color classes
@include color-class-generator (color-, $color-map, color);
@include color-class-generator (bg-, $color-map, background-color);
The mixin above will give the class names, a certain property, and its respective value.
.color-primary {
color: #68b0da !important;
}
.color-secondary {
color: #1c2f72 !important;
}
.color-tertiary {
color:
I#aaaaaa !important;
}
.color-info {
color:
#3183e3 !important;
}
.color-danger {
color: #eb5757 !important;
}
.color-warning {
color: #ffd525 !important;
}
.color-success {
color: #27a360 !important;
}
.color-pending {
color: #F2994A !important;
}
.bg-primary {
background-color: #68beda !important;
}
.bg-secondary {
background-color: #1c2f72 !important;
}
.bg-tertiary {
background-color: #aaaaaa !important;
}
.bg-info {
background-color: #3183e3 !important;
}
.bg-danger {
background-color: #eb5757 !important;
}
.bg-warning {
background-color: #ffd525 !important;
}
.bg-success {
background-color: #27a360 !important;
}
.bg-pending {
background-color:#F2994A !important;
}
The generated class names can be used in any of the HTML tags with their respective class attribute.
<h6 class="fm-poppins category-title fw-normal fs-10 lh-14 color-dark-grey">
Projects
</h6>
<button class="btn_mt-btn_bg-primary" type="button">Submit now</button>
Benefits
- Scalability: Add or modify colors in the $color-map, and your CSS updates automatically.
- Consistency: Centralize color definitions to prevent inconsistencies across your styles.
- Efficiency: Reduce repetitive CSS code and speed up development.
- Customization: Easily generate classes for different namespaces (e.g., text, background) and properties.
Conclusion
Through a mixin for color class generation with the $color-map, it provides an enormous value with regards to streamlining color management using SCSS. One does not need manual utility-class generation anymore. Everything can be kept kept clean, scalable, consistent, and CSS-friendly within your projects. Desirable and effective, this approach works well for both design systems and single-page applications.
Implementing it in project/s will save from having to write repetitive color classes again.
Author Bio:
Sayali Nanasaheb Patil
Software Engineer -UX/UI-Digital Transformation
I am a UI/UX Developer with 4 years of experience. I have extensive experience in front-end development technologies like HTML5, CSS3, JavaScript, Bootstrap and Responsive design, wordpress, tailwind. I have contributed to successful projects like MOURI Treasure, MMG, StorageVault, ATNi Logic communications, Roche PCS global etc.
