Question

我有这个小小的css片段，我想使用转换，然后添加旋转到它但失败了......我做错了吗？我是LESS的新人，很抱歉，如果我错了。

CSS：

.class {
    &::before {
        .transform(.rotate(@deg: 45deg));
    }
    &::after {
        .transform(.rotate(@deg: -45deg));
    }
}

MIXIN：

.transform(@string){
    -webkit-transform:  @string;
    -moz-transform:     @string;
    -ms-transform:      @string;
    -o-transform:       @string;
}

.rotate (@deg) {
    -webkit-transform: rotate(@deg);
    -moz-transform:      rotate(@deg);
    -ms-transform:       rotate(@deg);
    -o-transform:        rotate(@deg);
}

Answer 1

所以你在上面设置的东西的方式，你基本上是将整个旋转mixin传递给变换mixin。如果它实际上知道如何解析，最终将会出现相当混乱的代码。相反，您可以使用顶部mixin并将旋转传递给它。这是一个更好的路线，因为它允许您使用多个变换（这是一种非常常见的用法）。这是一个例子：

.transform(@string){
  -webkit-transform:  @string;
  -moz-transform:     @string;
  -ms-transform:      @string;
  -o-transform:       @string;
}

.class {
  &::before {
    .transform(rotate(45deg));
  }
}

如果您想在将来调用旋转和翻译，那么就像添加翻译一样简单。

.class {
  &::before {
    .transform(translateY(-50%) rotate(45deg));
  }
}

使用LESS / CSS / Mixins并从类传递值

1 个答案: