SASS：从混入或函数返回一组不同的 CSS 属性

Question

我的模板中有几个 具有共同属性但每个属性 具有不同值的 DIV。下面列出了这些

字母间距
文本转换
字体系列
字体粗细
字体大小
颜色

Mixins 仅接受基于属性的参数，并且函数 return 是单个值。

我想知道 SASS/SCSS 是否有任何实用程序来处理同样的问题。我应该将值作为参数传递给 SASS，它应该 return 所有 CSS 属性都用参数更新。

Answer 1

我使用 mixins 找到了这个问题的逻辑。

我创建了一个 Mixin，它接受所有作为列表传递的 参数，因此声明以 ... 结尾此解决方案还 涵盖可选的 CSS 属性 ，这些属性可能未包含在所有类中，但大多数

styles.scss

.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);
}

_variables.scss

@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;
        }
    }
}

结果CSS

.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;
}

虽然这个解决方案有一个限制，CSS 属性数量的增加会增加混合代码。

希望这能解决您的问题。 Suggestions/Comments欢迎改进此逻辑。

SASS：从混入或函数返回一组不同的 CSS 属性

SASS: Returning set of different CSS properties from a mixin or function

html

css

function

sass

mixins

styles.scss

_variables.scss

结果CSS