[英]SASS: Returning set of different CSS properties from a mixin or function
I've few DIVs in my template which have common properties but different values for each property .我的模板中几乎没有 DIV,它们具有共同的属性,但每个属性的值不同。 These are listed below下面列出了这些
Mixins accept only params based on the property, and function returns a single value. Mixins 仅接受基于属性的参数,并且 function 返回单个值。
I want to know if SASS/SCSS has any utility to handle the same.我想知道 SASS/SCSS 是否有任何实用程序来处理相同的问题。 I should pass the values as arguments to SASS and it should return all the CSS properties updated with the arguments.我应该将值作为 arguments 传递给 SASS,它应该返回所有 CSS 属性更新为 ZDBC11CAA5BDA99F77E6FBDABDBD882ED47
I found a logic for this problem using mixins .我使用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.我创建了一个 Mixin,它接受作为列表传递的所有参数,因此声明以...结尾。这个解决方案还涵盖了可选的 CSS 属性,这些属性可能不包含在所有类中,但大部分都包含在其中。
.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.但是,此解决方案有一个限制,增加 CSS 属性的数量会增加 mixin 代码。
I hope this will solve your issue.我希望这能解决你的问题。 Suggestions/Comments are welcomed to improve this logic.欢迎提出建议/意见以改进此逻辑。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.