更少 - 混淆mixins如何参数

Question

我使用LESS和BOOTSTRAP为一个网站，这是我第一次实际使用less语言，所以这整个“mixins”的东西真的让我感到困惑。我已阅读了无dot网站上的所有文档以及bootstrap网站上的内容，但实际使用某些mixin的“途径”正在逃避我。

具体而言，我很难理解如何辨别通过什么作为有效参数。我试图与过渡/变换做的，使用下面的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; 

从我掌握的，我应该能够做到这一点，使用内置自举的混入一个更简单的格式。 mixin声明如下：

// 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中出现的位置，并且mixin的内容将被放置在您的块中。你可以考虑mixins有点像占位符函数。

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

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

使用你上面列出的.transition混入，少处理器将产生像CSS：

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

分号是很重要的参数结束，否则较少可能会感到困惑，并认为您发送两个参数，因为逗号分隔的参数也是有效的。在这种情况下这不会成为问题（因为没有.transition mixin接受两个参数），但最好总是用分号分隔参数。

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

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

在http://lesscss.org中了解更少，变量和混入的最佳位置，它在几页中提供了完整的文档，并提供了大量示例。拥有一个可以实时将Less文件转换为CSS的编辑器也非常棒，因此您可以了解它的工作原理。

为您发布的例子，您就可以创建一个mixin以下：

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

：

​​

要使用它，你，你想复制到属性添加它选择块内