Question

我试图编写一个简单的mixin，它将为传递的属性生成一些跨浏览器代码，但如果你多次调用它，我希望它以某种方式将新值附加到现有属性规则。

例如：

=foo($foo)
   foo: "#{$foo}"

.test
   +foo( test 1 )
   +foo( test 2 )

将生成

.test {
   foo: "test 1";
   foo: "test 2";
}

但我试图让它产生的是：

.test {
   foo: "test 1, test 2";
}

我知道我可以做+foo(test 1, test 2)，但有时我可能会有很多参数，因为基于缩进的SASS语法不允许你将mixin参数分成多行（遗憾的是），我想要一个更清晰的方法来使用它mixin没有大量的论据挤在一行

Answer 1

Sass无法处理您正在寻找的内容 - 但您可以使用地图，全局标记和包含包装来解决它。为什么我会考虑以下反模式。

Demo on codepen

注意！以下可能需要一些详细说明，但现在我只是投入一些SCSS（面向更广泛的受众） - 我确定你可以将它转换为Sass

全局变量

首先，我们创建一组全局变量，以保持包含的状态和值。

$render-map:();  //  map to hold key value pairs for later render
$render: false;  //  render flag if true we print out render-map
$concat: false;  //  concat flag to trigger value concatenation

渲染mixin

为了处理跟踪渲染内容的繁琐工作，我们创建了一个多用途渲染混合。 mixin可以在其他mixins中使用来设置键值和内部选择器以呈现独特的属性。我们稍后会创建一个小的mixin来处理值连接，因为这是不太常见的用例。

@mixin render($args...){
    //  no arguments passed and not in the state of rendering
    //  1) switch to rendering state 
    //  2) include content (nested included)
    //  3) render render-map content
    //  4) before exit disable render state 
    //  5) empty render-map
    @if length($args) == 0 and not $render {
        $render: true !global; // 1
        @content;              // 2   
        @each $key, $value in $render-map { #{$key}:$value; } // 3
        $render: false  !global; // 4
        $render-map: () !global; // 5
    } 

    //  if arguments are passed we loop through keywords to build our render-map  
    //  the keyword key is the same as the passed variable name without the `$`
    //  e.g.   @include render($margin-left: 10px) becomes  margin-left: 10px
    //  1) get keywords
    //  2) loop through keywords
    //  3) look for existing render-map values or use empty list
    //  4) in case we have a concat flag concatinate render-map value
    //  5) in case we don't have a concat flag we overwrite render-map value
    //  6) add key value pair to render-map
    @else {
        $keywords: keywords($args);        // 1
        @each $key, $value in $keywords {  // 2
            $map-value: map-get($render-map, $key) or (); // 3
            @if $concat { $map-value: if($map-value, append($map-value, $value, comma), $value); } // 4
            @else { $map-value: if($value, $value, $map-value); } // 5
            $render-map: map-merge($render-map, ($key: $map-value)) !global; // 6
        }        
    }
}

渲染Concat

为了处理值连接，我们为render mixin创建了一个包装器mixin来处理全局concat标志。

注意render-concat仅用于在mixins中设置键/值对 - 为什么它不占用内容块。

@mixin render-concat($args...){ 
    $concat: true !global;     // set global concat flag for render mixin
    @include render($args...); // pass args on to the render mixin
    $concat: false !global;    // reset global concat flag
}

<强>用法

@mixin foo($value){
    //  add the passed value to the `foo` key ($ is stripped) of the render-map.    
    @include render-concat($foo: $value);
}


.test {
    //  in order to render our render-map content we wrap our includes
    //  inside a @include render (without any arguments).
    //  note the quoted strings to prevent sass from thinking we are passing lists
    @include render {
        @include foo('test 1');
        @include foo('test 2');
        @include foo('test 3');
    }
}

<强>输出

.test {
  foo: "test 1", "test 2", "test 3";
}

如上所述，使用它时要非常小心......你很容易得到意想不到的输出。

SASS mixin - 连接/折叠到单个属性？

1 个答案: