Css 如何创建'；转换'；在使用多个参数的SCS中混合？

我想为transform创建一个mixin，它有两个参数：translate和rotate。我试过几种方法，但没有一种有效，我也不知道为什么

@mixin transform($transforms) {
    -moz-transform: $transforms;
    -o-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}
@mixin rotate ($deg) {
    @include transform(rotate(#{$deg}deg));
}
@mixin translate($x, $y) {
    @include transform(translate($x, $y));
}

在nav.scss中，我像这样包含它

@include transform(rotate(45));
@include transform(translate(0,9px));

它不会改变演示页面中的任何内容

没有mixin，我只使用：

span:before {
         transform: translateY(9px) rotate(45deg);
}

---

它是有效的，但我想用mixin实现同样的结果，但我不知道如何实现。几天前我开始学习SASS。

我不认为你需要像那样嵌套混合器。您可以利用和：

如果只想用一个参数调用mixin，那么mixin的参数现在有一个默认值。可以使用关键字语法显式调用参数。在我的示例中，我只需要第二个参数，所以我这样做了：

@include transformNew（$translate:translate（10px，40px））。如果只需要第一个参数，那么只需传递值就足够了，不需要关键字

如果需要两个参数，只需将它们都传递。在您的代码中，如果您两次调用mixin，那么您已经用第二次调用覆盖了第一个值。
这不会发生在这里。我还为您创建了一个用于处理代码的工具。
一般来说，我建议您使用来处理供应商前缀，因为您通常会添加比需要更多的前缀

在转换的情况下，只需添加

-webkit-transform: ...;
        transform: ...;

此外，当您需要处理属性值时，它变得相当难以处理：

  transition: transform 300ms;

  // prefixed  
  -webkit-transition: -webkit-transform 300ms;
          transition: -webkit-transform 300ms;
          transition: transform 300ms;
          transition: transform 300ms, -webkit-transform 300ms;

要回答您的问题，我认为最简单的方法是使用（允许传递任意数量的参数）在空格分隔的列表中连接在一起：

// Mixin 
@mixin transform($transforms...) {
    // combine the passed transforms into a space separated list
    $transform-list: join($transforms, null, space);

    // print out the transforms 
    -webkit-transform: $transform-list;
       -moz-transform: $transform-list;
        -ms-transform: $transform-list;
         -o-transform: $transform-list;
            transform: $transform-list;
}


// Include 
span::before {
    @include transform(
        rotate(90deg),
        translate(0,9px),
        // ... add more transforms if you need
    );
}


// CSS output 
span::before {
    -webkit-transform: rotate(90deg) translate(0, 9px);
       -moz-transform: rotate(90deg) translate(0, 9px);
        -ms-transform: rotate(90deg) translate(0, 9px);
         -o-transform: rotate(90deg) translate(0, 9px);
            transform: rotate(90deg) translate(0, 9px);
}

两件事。当您执行
@include transform（rotate（45））
时，您正在尝试嵌套mixin调用——这将调用transform mixin并将值rotate（45）传递给它——请注意，您缺少
deg
，因此它的css无效，无法工作。如果要调用rotate mixin，必须执行
@include rotate（45）
。第二件事，确保您正在选择器下的css规则集中使用
@include mixin
，例如span:before{@include myMixin（）；}，以便它添加的样式位于该选择器下。
// Mixin 
@mixin transform($transforms...) {
    // combine the passed transforms into a space separated list
    $transform-list: join($transforms, null, space);

    // print out the transforms 
    -webkit-transform: $transform-list;
       -moz-transform: $transform-list;
        -ms-transform: $transform-list;
         -o-transform: $transform-list;
            transform: $transform-list;
}


// Include 
span::before {
    @include transform(
        rotate(90deg),
        translate(0,9px),
        // ... add more transforms if you need
    );
}


// CSS output 
span::before {
    -webkit-transform: rotate(90deg) translate(0, 9px);
       -moz-transform: rotate(90deg) translate(0, 9px);
        -ms-transform: rotate(90deg) translate(0, 9px);
         -o-transform: rotate(90deg) translate(0, 9px);
            transform: rotate(90deg) translate(0, 9px);
}