有用的 CSS3 Less Mixins | CSS-Tricks

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
	text-shadow: @string;
}
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
	-webkit-border-top-right-radius:    @topright;
	-webkit-border-bottom-right-radius: @bottomright;
	-webkit-border-bottom-left-radius:  @bottomleft;
	-webkit-border-top-left-radius:     @topleft;

	-moz-border-radius-topright:        @topright;
	-moz-border-radius-bottomright:     @bottomright;
	-moz-border-radius-bottomleft:      @bottomleft;
	-moz-border-radius-topleft:         @topleft;

	border-top-right-radius:            @topright;
	border-bottom-right-radius:         @bottomright;
	border-bottom-left-radius:          @bottomleft;
	border-top-left-radius:             @topleft;

	-moz-background-clip:    padding; 
	-webkit-background-clip: padding-box; 
	background-clip:         padding-box; 
}

.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
	-webkit-animation: @name @duration @delay @ease;
	-moz-animation:    @name @duration @delay @ease;
	-ms-animation:     @name @duration @delay @ease;
}

.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}
.scale (@factor) {
	-webkit-transform: scale(@factor);
	-moz-transform: 	 scale(@factor);
	-ms-transform: 		 scale(@factor);
	-o-transform: 		 scale(@factor);
}
.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}
.skew (@deg, @deg2) {
	-webkit-transform:       skew(@deg, @deg2);
	-moz-transform: 	 skew(@deg, @deg2);
	-ms-transform: 		 skew(@deg, @deg2);
	-o-transform: 		 skew(@deg, @deg2);
}
.translate (@x, @y:0) {
	-webkit-transform:       translate(@x, @y);
	-moz-transform: 	 translate(@x, @y);
	-ms-transform: 		 translate(@x, @y);
	-o-transform: 		 translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
	-webkit-transform:       translate3d(@x, @y, @z);
	-moz-transform: 	 translate3d(@x, @y, @z);
	-ms-transform: 		 translate3d(@x, @y, @z);
	-o-transform: 		 translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
	-webkit-perspective: 	@value;
	-moz-perspective: 	@value;
	-ms-perspective: 	@value;
	perspective: 		@value;
}
.transform-origin (@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

Adi

# 2011 年 12 月 16 日

漂亮。而且非常有用，谢谢！

Chris K.

# 2011 年 12 月 18 日

结合我的 LESS DSS，它将成为一套非常好的“less mixins” :-)

干得好！

Nathan Shubert

# 2011 年 12 月 18 日

这很棒。我自己维护一个 LESS mixin 库，里面有 css3 库，但我没有包含 text-shadow，因为我认为它只是一行代码，而且没有必要做成 mixin。但我想，通过包含它，你可以拥有一个带默认值的 text-shadow。这是你的理由吗？

Atticus White

评论永久链接# 2015 年 8 月 20 日

我知道这已经是 5 年后了，哈哈，但可能只是因为他有一个默认值。

Ralph Leo Bennett (DeviateDefiant)

# 2011 年 12 月 20 日

关于渐变（包括透明度）与 IE6-8 之间兼容性的一些想法

使用经修改的 mixin 并结合使用 Paul Irish 的臭名昭著的基于类的 IE 选择器（这样 .ie6、.ie7、.ie8 类将应用于 HTML 或 body 元素），你就可以毫不费力地进行破解。

我想你也可以使用条件样式表，尽管这将是绕圈子的更长的路，而且我已经很久没有这样做过了。

LESSPHP 中内置的 RGBa 到 HEX 函数确保当你将 RGBa 值传递给变量参数时，它将正确地转换为专有的 MS CSS 过滤器（使用 alpha hex，#AARRGGBB）。

.gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
        background-color: @startColor;
        background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
        background: -webkit-linear-gradient(top, @startColor, @endColor);
        background: -moz-linear-gradient(top, @startColor, @endColor);
        background: -ms-linear-gradient(top, @startColor, @endColor);
        -ms-filter: e("gradient(start=@ieStartColor,end=@ieEndColor)");
        background: -o-linear-gradient(top, @startColor, @endColor);
        background: -linear-gradient(top, @startColor, @endColor);
}

.ie6 .gradient, .ie7 .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
       @ieStartColor: rgbahex(@{startColor});
       @ieEndColor: rgbahex(@{endColor});
       background: transparent;
       filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
}

.ie8 .gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
       @ieStartColor: rgbahex(@{startColor});
       @ieEndColor: rgbahex(@{endColor});
       background: transparent;
       -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
}

我还没有测试代码，但这只是一个想法。有什么想法吗？

Thomas Q Brady

评论永久链接# 2012 年 10 月 19 日

这将非常棒。但是，据我所知，LESS 不允许在 mixin 名称中使用多个选择器。

Matt

# 2013 年 2 月 22 日

是的，一个简单的想法，可以使用嵌套和 ampersands 来实现，所以


.gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
   background-color: @startColor;
   background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
   background: -webkit-linear-gradient(top, @startColor, @endColor);
   background: -moz-linear-gradient(top, @startColor, @endColor);
   background: -ms-linear-gradient(top, @startColor, @endColor);
   -ms-filter: e("gradient(start=@ieStartColor,end=@ieEndColor)");
   background: -o-linear-gradient(top, @startColor, @endColor);
   background: -linear-gradient(top, @startColor, @endColor);
   
   @ieStartColor: rgbahex(@{startColor});
   @ieEndColor: rgbahex(@{endColor});
   
   .ie6 &, 
   .ie7 .ie8 }

我也没有测试过这个 :O

Matt

# 2013 年 2 月 22 日

哎呀，预览与结果不匹配，再来一遍

.gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  -ms-filter: e("gradient(start=@ieStartColor,end=@ieEndColor)");
  background: -o-linear-gradient(top, @startColor, @endColor);
  background: -linear-gradient(top, @startColor, @endColor);

  @ieStartColor: rgbahex(@{startColor});
  @ieEndColor: rgbahex(@{endColor});

  .ie6 &, 
  .ie7 &{
    background: transparent;
    filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
  }
    .ie8 & {
    background: transparent;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient("gradient(start=@ieStartColor,end=@ieEndColor)")";
  }
}

Kev Adamson

评论永久链接# 2014 年 2 月 18 日

你可以在你e ieEndColor 之后添加“,GradientType=0” 来表示垂直渐变，添加“,GradientType=1” 来表示水平渐变。

我有两个版本：.gradient-v 和 .gradient-h

Jon Stuebe

# 2011 年 12 月 20 日

不知道你们是否听说过，但有一个很棒的 mixins 包，twitter bootstrap 就是基于它构建的。

# 2011 年 12 月 22 日

这些用 stylus 会更好看 :)

Michael

# 2011 年 12 月 22 日

感谢分享。很棒的 Mixins 集合。

我很好奇 opacity mixin：为什么要使用供应商前缀？它们似乎是多余的。请参见 https://caniuse.cn/#search=opacity

我在我的 base.less 文件中使用以下 opacity mixin

.opacity(@opacity: 1) {
	@ieOpacity: @opacity * 100;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ieOpacity})";
	filter: ~"alpha(opacity=@{ieOpacity})";	
	opacity: @opacity;
}

Stephen

# 2012 年 1 月 7 日

适用于 Windows 和 Linux 的免费 LESS 编译器
http://wearekiss.com/simpless

Krist

# 2012 年 3 月 6 日

不需要 .border-radiuses()。
如果你需要调用自定义边框半径，只需调用..

 .border-radius(0 0 4px 4px)

Lee

评论永久链接# 2017 年 4 月 7 日

看来你需要在里面添加逗号，但感谢你，这简单多了。

.border-radius(0, 0, 4px, 4px);

Matt Orley

# 2012 年 9 月 20 日

拥有 box-sizing mixin 太棒了。我见过的其他集合都没有包含它。
我打算为我的 genesis 主题重置一个 less 文件。感谢你让我今天感觉更聪明……

为什么

# 2012 年 9 月 22 日

应该是 radii，而不是 radiuses，哈哈

Anthuan Vasquez

# 2012 年 10 月 4 日

LESS Elements 是一组针对 LESS 的有用 mixins http://lesselements.com/

在 GitHub 上 https://github.com/dmitryf/elements

TextMate Bundle https://github.com/juanghurtado/less-elements.tmbundle

Nicklas

评论永久链接# 2013 年 1 月 31 日

在我今天查看的所有 mixin 集合中，这个绝对是最好的。它没有被我永远（永远！）都不会用到的东西塞满，它包含了我可能需要的几乎所有东西，而且做得非常棒。感谢你的链接！

hafiz

# 2012 年 10 月 24 日

LESS！！请将网页的 less css 代码发送到我的邮箱。我是新手。这对我有很大帮助。

a.baker

# 2012 年 11 月 23 日

为懒人准备的 ;)

.gradientAuto (@color: #000, @coef: 5%){
    background: lighten(@color, @coef); /* Old browsers */
    background: -moz-linear-gradient(top, lighten(@color, @coef) 0%, darken(@color, @coef) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,lighten(@color, @coef)), color-stop(100%,darken(@color, @coef))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* IE10+ */
    background: linear-gradient(to bottom, lighten(@color, @coef) 0%,darken(@color, @coef) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(@color, @coef)', endColorstr='darken(@color, @coef)',GradientType=0 ); /* IE6-9 */
}

André Dal Molin

# 2012 年 11 月 23 日

我在创建 box-shadow 的 mixing 时遇到了问题。我的与你的相同，所以我认为你也遇到了同样的问题。
当在一个元素中使用多个 box-shadow（用逗号分隔）时（例如“2px 2px 3px 4px #000, inset -2px 1px 1px 0 #000”）。LessCSS 无法编译，并出现错误。

有没有办法解决这个问题？我的意思是，将该值视为字符串或其他东西。
谢谢！！

a.baker

# 2012 年 11 月 28 日

逗号用于分隔变量

使用这个 ;)

.box-shadow-double (@string, @string2) {
    -webkit-box-shadow: @string, @string2;
    -moz-box-shadow:    @string, @string2;
    box-shadow:         @string, @string2;
}

iSimon

# 2012 年 12 月 3 日

有没有办法使用 .transition() mixin 编写多个过渡？
我正在尝试找出如何创建一个参数数量不定的 mixin，并将所有参数都放在使用 @arguments 特殊变量的规则中。

iSimon

# 2012 年 12 月 3 日

p>我刚发现如何做！

从 LESS 1.3.1 版本开始，他们将引入一个新的特殊变量 @arguments-list，它将以原始字符串的形式获取参数。以下是用法

.transition(...) { -moz-transition: @arguments-list; -webkit-transition: @arguments-list; -o-transition: @arguments-list; -ms-transition: @arguments-list; transition: @arguments-list; }

“...” 表示“我不知道你会传递多少个参数到我的 mixin 中，全部接收” ;)

Steve Klein

# 2012 年 12 月 3 日

background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);

在这两者中，第二个是 Webkit 现在识别（以及 Firefox 和规范）的那个，对吗？如果是这样的话，哪些浏览器只支持前一个版本？

Antoine Lépée

# 2013 年 1 月 4 日

box-shadow LESS mixin 的优秀替代品
由 http://www.toekneestuck.com/blog/2012/05/15/less-css-arguments-variable

.box-shadow(@shadowA, @shadowB:X, ...){
    @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-box-shadow: @props;
       -moz-box-shadow: @props;
         -o-box-shadow: @props;
            box-shadow: @props;
}

Antoine Lépée

# 2013 年 1 月 4 日

它可以轻松地替换那三个 ;-)

.box-shadow (@string) {
    -webkit-box-shadow: @string;
    -moz-box-shadow:    @string;
    box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:  @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:   @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
    -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
    box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

Ash

# 2013 年 2 月 4 日

这里有一个使用 LESS mixin 与 Bootstrap 的工作示例：bit.ly/VzonQH

Balázs

# 2013 年 3 月 22 日

Firefox 不喜欢 0 作为延迟值。您必须添加单位：0s

错误 662171

因此您应该更新为
.animation (@name, @duration: 300ms, @delay: 0s, @ease: ease) {

Joseph Shambrook

# 2013 年 4 月 26 日

为用户选择快速创建了一个。

.user-select (@val) {
    -webkit-touch-callout:  @val;
    -webkit-user-select:    @val;
    -khtml-user-select:     @val;
    -moz-user-select:       @val;
    -ms-user-select:        @val;
    user-select:            @val;
}

Erick Sahara

# 2013 年 4 月 30 日

谢谢，我在我的项目中使用它；)

alfieindesigns

# 2013 年 7 月 23 日

很棒的文章！非常有用！
感谢并愿上帝永远保佑您！

Aaron Miller

# 2013 年 9 月 23 日

只想告诉您，您忘记为渐变添加以下内容

background-image: linear-gradient(top, @startColor, @endColor);

不要忘记 linear-gradient，不要加前缀 :)

Grzegorz

# 2013 年 9 月 25 日

如果我想在一个选择器中使用两个不同的 mixin，比如这样，该怎么办

.example {
  .transition
  .opacity(.8)
}

LlewellynCollins

# 2013 年 11 月 11 日

另一个很酷的 Less 函数是 mixin 重载。基本上，根据传递的参数数量不同，mixin 的实现也不同。StackOverflow 链接您要链接的文本……

LlewellynCollins

评论永久链接# 2013 年 11 月 11 日

抱歉，链接在这里 http://stackoverflow.com/questions/15250115/call-the-correct-overloaded-mixin-based-on-number-of-arguments

skip405

# 2013 年 11 月 21 日

谢谢，Chris，我也会添加没有前缀的属性 :)

Zack

# 2014 年 1 月 23 日

我觉得这个也很有用。

.cover () {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Chris

# 2014 年 2 月 26 日

如何创建多个过渡，以便输出类似于以下内容？

-webkit-transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;
      transition: opacity 0.2s ease-in-out, margin-right 0.2s ease-in-out;

我有类似以下的内容：

.multi_animation(@anim1, @anim2 ){
    -webkit-transition: @anim1, @anim2;
      -moz-transition: @anim1, @anim2;
        -o-transition: @anim1, @anim2;
          transition: @anim1, @anim2;
}

应该有一种更好的方法来编写它，我只是不知道如何。

Gregor Adams

# 2014 年 3 月 4 日

您可以查看我的 mixin 库：more-or-less

mixin 看起来很简单，但需要另外三个 mixin 才能工作（.vendorize()、.for() 和 .in()）。
整个库都是建立在我的 .vendorize() mixin 之上的，这使得库非常强大且易于维护。

vendorize mixin
in-mixin
for-mixin

好处是，所有值都会被检查，并在需要时添加前缀。这允许将 mixin 用于 transform 或 box-shadow 属性的过渡。
所需的供应商前缀定义在这个变量中 @vendorPrefixes: -webkit-, -moz-, -o-, '';

mixin 需要 Less 1.7.0 才能工作

mixin

@import '../helpers/_vendorize';

.transition(@values...) {
    @vendorPrefixes: -webkit-, -moz-, -o-, '';
    @prop: transition;
    .vendorize(@values);
}

输入

.transition-one {
    .transition(transform 200ms linear 400ms);
}

.transition-two {
    .transition(transform 200ms, height 500ms;);
}

.transition-three {
    .transition(transform 200ms linear, height 500ms linear, box-shadow 500ms linear, opacity 500ms linear;);
}

输出

.transition-one {
  -webkit-transition: -webkit-transform 200ms linear 400ms;
  -moz-transition: -moz-transform 200ms linear 400ms;
  -o-transition: -o-transform 200ms linear 400ms;
  transition: transform 200ms linear 400ms;
}
.transition-two {
  -webkit-transition: -webkit-transform 200ms, height 500ms;
  -moz-transition: -moz-transform 200ms, height 500ms;
  -o-transition: -o-transform 200ms, height 500ms;
  transition: transform 200ms, height 500ms;
}
.transition-three {
  -webkit-transition: -webkit-transform 200ms linear, height 500ms linear, -webkit-box-shadow 500ms linear, -webkit-opacity 500ms linear;
  -moz-transition: -moz-transform 200ms linear, height 500ms linear, -moz-box-shadow 500ms linear, -moz-opacity 500ms linear;
  -o-transition: -o-transform 200ms linear, height 500ms linear, -o-box-shadow 500ms linear, -o-opacity 500ms linear;
  transition: transform 200ms linear, height 500ms linear, box-shadow 500ms linear, opacity 500ms linear;
}

Gregor Adams

# 2014 年 3 月 2 日

新的 BIG mixin 库可用。它“几乎”与“lesshat”一样强大……但是……没有内联 JavaScript。
您可以在此处找到它：more-or-less

它完全模块化，允许像“compass”一样导入 mixin

@import 'css3/transition';

基本的 CSS3 mixin 示例

@import '../helpers/_vendorize';

.border-radius(@values) {
    @vendorPrefixes: -webkit-, -moz-, '';
    @prop: border-radius;
    .vendorize();
}

用法

.border-radius(0 0 3px 3px);

.vendorize mixin 能够为属性或值添加前缀（例如，用于过渡）

该库甚至允许像这样的 mixin……（允许无限数量的层）
如果需要，所有值都会添加前缀。

.background-image(linear-gradient(top, #000, #fff));

.background-image(url('test.png'),
                  radial-gradient(45px 45px, farthest-corner, rgba(0,0,0,0.1) 0%, 
                                                              rgba(100,0,0,0.1) 100%),
                  linear-gradient(top, rgba(0,0,0,0.2), rgba(0,255,0,0.1)), 
                  linear-gradient(top, #000, #fff));

mehrdad

# 2014 年 3 月 9 日

为 transform 写了这个，你觉得怎么样？
$empty: ”;
@function notEmpty($val) {
@if($val != $empty) {
@return true;
} @else {
@return false;
}
}
@mixin transform($type:”,$val1:”,$val2:”,$val3:”,$val4:”,$val5:”,$val6:”) {
@if notEmpty($val2) { $val2: “,” + $val2; }
@if notEmpty($val3) { $val2: “,” + $val2; }
@if notEmpty($val3) { $val3: “,” + $val3; }
@if notEmpty($val3) { $val4: “,” + $val4; }
@if notEmpty($val3) { $val5: “,” + $val5; }
@if notEmpty($val3) { $val6: “,” + $val6; }
-webkit-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-moz-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-ms-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
-o-transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
transform: $type + “(” + $val1 + $val2 + $val3 + $val4 + $val5 + $val6 + “)”;
}

scott taggart

# 2014 年 7 月 21 日

假设我有自己的 jumbotron 覆盖
.jumbotron {
background-color: #ff4400;
}
然后我想拥有一个自定义覆盖，我在其中继承上面的类，并且仅使用其颜色作为参数覆盖其背景颜色，以“lighten()”。我无法弄清楚语法
.Myjumbotron {
.jumbotron;
/* 不确定下面是什么用于“parent.background-color” */
background-color: lighten(parent.background-color, 30%);
}

谢谢！

Jesse

# 2014 年 7 月 22 日

X 和 Y 支持的比例应该为：这与向后兼容，因为 @ratio_y:@ratio_x。

.scale(@ratio_x:1.5, @ratio_y:@ratio_x){
  .transform(scale(@ratio_x, @ratio_y));
}

invader365

# 2014 年 8 月 10 日

您知道，有一个名为 anchorLESS 的扩展 Less 库，

它几乎就像 jQuery，但用于 CSS。而且您只需要一个 Less 文件！

您可以在此处找到它：invader365.github.io/anchorLESS

源代码位于：Github

享受；)

Brian

# 2014 年 9 月 4 日

太棒了！太棒了！

RomanK

# 2014 年 9 月 13 日

这是我通常使用的线性渐变的 LESS mixin

.gradient (@startColor: rgba(0,0,0,0.75), @endColor: rgba(0,0,0,0.25), @direction: vertical) {

    .setGradientVars(@direction) when (@direction = vertical){
        @direct: top;
        @directW3: to bottom;
        @webkitDirectFrom: left top;
        @webkitDirectTo: left bottom;
        @ieGradientType: 0;
    }
    .setGradientVars(@direction) when (@direction = horizontal){
        @direct: left;
        @directW3: to right;
        @webkitDirectFrom: left top;
        @webkitDirectTo: right top;
        @ieGradientType: 1;
    }

    .setGradientVars(@direction);

    @ieStartColor: argb(@startColor);
    @ieEndColor: argb(@endColor);

    background-color: @startColor;
    background: -moz-linear-gradient(@direct, @startColor 0%, @endColor 100%);
    background: -webkit-linear-gradient(@direct, @startColor 0%, @endColor  100%);
    background: -webkit-gradient(linear, @webkitDirectFrom, @webkitDirectTo, color-stop(0%, @startColor), color-stop(100%, @endColor));
    background: -ms-linear-gradient(@direct, @startColor 0%, @endColor  100%);
    background: -o-linear-gradient(@direct, @startColor 0%, @endColor  100%);
    background: -linear-gradient(@direct, @startColor 0%, @endColor  100%);
    background: linear-gradient(@directW3, @startColor 0%, @endColor 100%);
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=%d)", @ieStartColor, @ieEndColor, @ieGradientType));
}

Herman Nz

# 2014 年 11 月 7 日

哇！感谢这些很棒的东西！让我复制到我的 CSS 库中

Deepak

# 2015 年 6 月 18 日

很棒的集合！！
继续在这里添加更多这样的内容

缺少用于 CSS 精灵的 Less :(

Piotrek

# 2016 年 3 月 9 日

但是如何在调用 .drop-shadow mixin 时实现颜色阴影？我只能更改不透明度……:(

评论

发表评论 取消回复

发表评论取消回复