Creating dynamic styles using SCSS allows you to generate flexible and reusable CSS based on variables, functions, and logic. By combining features like variables, mixins, loops, and conditionals, you can adapt styles dynamically for different themes, screen sizes, or components. This approach reduces repetition and makes your code more scalable and easier to maintain. SCSS enables you to build smarter stylesheets that respond to changing design requirements. Overall, it helps streamline your workflow and create more efficient, modular CSS.
Using Variables for Dynamic Values
SCSS variables let you store values like colors, spacing, and fonts, making your styles dynamic and easy to update.
Example:
$primary: #3490dc;
$padding: 10px;
.button {
background: $primary;
padding: $padding;
}
Creating Reusable Mixins
Mixins allow you to reuse dynamic style blocks with optional parameters, making your components flexible.
Example:
@mixin button($bg) {
background: $bg;
color: white;
padding: 10px 20px;
}
.btn-primary {
@include button(blue);
}
.btn-danger {
@include button(red);
}
Using Functions for Calculations
Functions help generate dynamic values like spacing, font sizes, or color variations.
Example:
@function rem($px) {
@return $px / 16px * 1rem;
}
h1 {
font-size: rem(32px); // 2rem
}
Applying Conditionals (@if, @else)
Conditionals allow styles to change based on logic, useful for themes or component variations.
Example:
@mixin theme($mode) {
@if $mode == dark {
background: #000;
color: #fff;
} @else {
background: #fff;
color: #000;
}
}
.container {
@include theme(dark);
}
Generating Styles with Loops
Loops like @for and @each help create multiple classes dynamically, reducing repetitive code.
Example:
@for $i from 1 through 3 {
.m-#{$i} {
margin: #{$i * 10}px;
}
}
