I've few DIVs in my template which have common properties but different values for each property . These are listed below
Mixins accept only params based on the property, and function returns a single value.
I want to know if SASS/SCSS has any utility to handle the same. I should pass the values as arguments to SASS and it should return all the CSS properties updated with the arguments.
I found a logic for this problem using mixins .
I have created a Mixin that accepts all the params passed as a list, hence declaration ends in... This solution also covers optional CSS properties which may not be included in all the classes but majority of them.
.blog-content {
// for .destination
@include text-properties("destination", "EpicRide", normal, 65px, $standard-black, none, 2.8px, '', '');
// for .intro-title
@include text-properties("intro-title", "Montserrat", 500, 14px, $standard-black, uppercase, 2.8px, 5px 5% 0, '');
// for .place
@include text-properties("place", "Montserrat", 500, 14px, $standard-black, uppercase, 2.8px, inherit, '');
// for .description
@include text-properties("description", "Lora", 400, 16px, $standard-light, none, 0, 0 5%, 20px);
}
@mixin text-properties($args... ) { // args has a list of arguments
$class: nth($args, 1); // nth is used to extract 'nth' argument's value
$font-family: nth($args, 2);
$font-weight: nth($args, 3);
$font-size: nth($args, 4);
$color: nth($args, 5);
$text-transform: nth($args, 6);
$letter-spacing: nth($args, 7);
$padding: nth($args, 8);
$margin-top: nth($args, 9);
.#{$class} { // create class dynamically. Mention the variable name inside #{} to fetch it's value
font-family: $font-family;
font-weight: $font-weight;
font-size: $font-size;
color: $color;
text-transform: $text-transform;
letter-spacing: $letter-spacing;
@if $padding != '' { // condition to ensure property is added only if valid param is passed.
padding: $padding;
}
@if $margin-top != '' {
margin-top: $margin-top;
}
}
}
.blog-content .destination {
font-family: "EpicRide";
font-weight: normal;
font-size: 65px;
color: rgba(0, 0, 0, 0.9);
text-transform: none;
letter-spacing: 2.8px;
}
.blog-content .intro-title {
font-family: "Montserrat";
font-weight: 500;
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
text-transform: uppercase;
letter-spacing: 2.8px;
padding: 5px 5% 0;
}
.blog-content .place {
font-family: "Montserrat";
font-weight: 500;
font-size: 14px;
color: rgba(0, 0, 0, 0.9);
text-transform: uppercase;
letter-spacing: 2.8px;
padding: inherit;
}
.blog-content .description {
font-family: "Lora";
font-weight: 400;
font-size: 16px;
color: rgb(var(--LightColorRGB));
text-transform: none;
letter-spacing: 0;
padding: 0 5%;
margin-top: 20px;
}
This solution has one limitation though, an increase in the number of CSS properties would increase the mixin code.
I hope this will solve your issue. Suggestions/Comments are welcomed to improve this logic.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.