Question

我正在使用LESS和BOOTSTRAP来访问网站，这是我第一次真正使用less语言，所以这整个“混合”的东西对我来说真的很混乱。我已经阅读了无网站上的所有文档，以及自举网站上的所有文档，但使用某些mixins的实际“方式”正在逃避我。

具体而言，我很难理解你如何识别作为有效参数传递的内容。我正在尝试使用以下CSS ...

进行转换/转换

-webkit-transform-origin:       top;
-webkit-transition:             all 0.2s linear;
-webkit-transform:              scale(1, 0);
-webkit-animation-fill-mode:    forwards;

-moz-transform-origin:          top;
-moz-transition:                all 0.2s linear;
-moz-transform:                 scale(1, 0);
-moz-animation-fill-mode:       forwards;

-ms-transform-origin:           top;
-ms-transition:                 all 0.2s linear;
-ms-transform:                  scale(1, 0);
-ms-animation-fill-mode:        forwards;

-o-transform-origin:            top;
-o-transition:                  all 0.2s linear;
-o-transform:                   scale(1, 0);
-o-animation-fill-mode:         forwards;

transform-origin:               top;
transition:                     all 0.2s linear;
transform:                      scale(1, 0);
animation-fill-mode:            forwards;

根据我的掌握，我应该能够使用内置于bootstraps中的mixins以更简单的格式执行此操作。 mixins声明如下;

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

// Transformations
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

但我不清楚这是如何运作的。我似乎无法弄清楚要通过@transition之类的“参数”来使这段代码工作。有人可以帮我从这里出去吗？我只是有点失落。

Answer 1

当您在选择器块中使用mixin时传递给@variable的任何文本都将被复制到mixin中@variables出现的位置，并且mixin的内容将被放置在你的街区。你可以认为mixins有点像占位符函数。

这意味着如果你声明一个选择器，如：

div p:first-child {
     .transition(width 2s ease-in-out, color 2s;);
     color: red;
}

使用上面列出的.transition mixin，Less处理器将生成如下的CSS：

div p:first-child {
     -webkit-transition: width 2s ease-in-out, color 2s;
     transition: width 2s ease-in-out, color 2s;
     color: #FF0000;
}

分号在参数结束时很重要，否则Less会混淆并认为你发送两个参数，因为逗号分隔的参数也是有效的。在这种情况下不会出现问题（因为没有.transition mixin接受两个参数），但总是用分号分隔参数是个好习惯。

因此，要使用mixins，只需将它们放在添加CSS声明的位置，以分号结束，并将参数作为参数传递。

没有重复检测，所以如果你调用mixin两次，它只会复制被替换的内容两次。例如，如果你已经有transition: property，那么mixin会添加另一个，如果你的话，它的效果可能会丢失。

在http://lesscss.org处了解Less，variables和mixins的最佳位置，其中包含大量示例的完整文档。拥有一个可以将Less文件实时转换为CSS的编辑器也很棒，这样你就能理解它是如何工作的。

对于您发布的示例，您可以创建如下的mixin：

.your-mixin(@origin, @transition, @transform, @anim-fill-mode) {
     -webkit-transform-origin:    @origin;
     -webkit-transition:          @transition;
     -webkit-transform:           @transform;
     -webkit-animation-fill-mode: @anim-fill-mode;

     -moz-transform-origin:    @origin;
     -moz-transition:          @transition;
     -moz-transform:           @transform;
     -moz-animation-fill-mode: @anim-fill-mode;

     -ms-transform-origin:    @origin;
     -ms-transition:          @transition;
     -ms-transform:           @transform;
     -ms-animation-fill-mode: @anim-fill-mode;

     -o-transform-origin:    @origin;
     -o-transition:          @transition;
     -o-transform:           @transform;
     -o-animation-fill-mode: @anim-fill-mode;

     transform-origin:    @origin;
     transition:          @transition;
     transform:           @transform;
     animation-fill-mode: @anim-fill-mode;
}

要使用它，请将其添加到要将属性复制到的选择器块中：

.your-selector, .other-selector {
    .your-mixin(top; all 0.2s linear; scale(1, 0); forwards;);
}

关于mixins如何获取参数的混淆

1 个答案: