Useful CSS3 LESS Mixins

Last updated on: December 16, 2011

.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;
}

Comments

Adi

# December 16, 2011

Beautiful. And completely useful, thanks!

Reply ↓

Chris K.

# December 18, 2011

In conjunction with my LESS DSS it will become a very good set of ‘less mixins’ :-)

Good work!

Reply ↓

Nathan Shubert

# December 18, 2011

This is great. I maintain a LESS mixin library myself with a css3 library, but didn’t include text-shadow as I felt it was only one line anyway and wouldn’t benefit from having a mixin. But I guess by including it you were able to have a text-shadow with default values. Was this your rationale?

Reply ↓

Ralph Leo Bennett (DeviateDefiant)

# December 20, 2011

Some thoughts for compatibility between gradients (including transparency) and IE6-8:

Using an adapted mixin in conjunction with using Paul Irish’s infamous class based IE selectors (so that .ie6, .ie7, .ie8 classes are applied to either the HTML or body elements) you could hack in support without too much effort.

I suppose you could also use conditional stylesheets, though that’d be a lot longer way round the circle and something I haven’t done in a long while.

The RGBa to HEX function built into LESSPHP ensures that when you pass a RGBa value to the variable argument it is correctly converted for the proprietary MS CSS filter (using 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)")";
}

I've got to test the code yet, but it's an idea. Any thoughts?

Reply ↓

Thomas Q Brady

Permalink to comment# October 19, 2012

That would be awesome. However, far as I can tell, LESS doesn’t allow for multiple selectors in mixin names.

Matt

# February 22, 2013

Yeah a simple thought that could be done using nesting and ampersands, so:


.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 }

I haven’t tested this either :O

Matt

# February 22, 2013

Aww the preview didn’t match the result, take two:

.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)")";
  }
}

Jon Stuebe

# December 20, 2011

Not sure if you guys have heard of it but there’s a great pack of mixins an such that the twitter bootstrap was built off of.

Reply ↓

# December 22, 2011

these would look muuuuuuch nicer as stylus :)

Reply ↓

Michael

# December 22, 2011

Thanks for sharing. Nice set of Mixins.

I’m wondering about the opacity mixin: What’s the reason for using vendor prefixes. They seem to be unnecessary. See http://caniuse.com/#search=opacity

I use the following opacity mixin in my base.less file:

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

Reply ↓

Stephen

# January 7, 2012

Great LESS compiler for Windows and Linux for free :
http://wearekiss.com/simpless

Reply ↓

Krist

# March 6, 2012

No need .border-radiuses().
If you need to call custom border radius, just call..

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

Reply ↓

Matt Orley

# September 20, 2012

Its great to have the box-sizing mixin. Other sets I’ve seen havent included it.
Going to town resetting a less file for my genesis theme. Thanks for making me feel SMARTER today…

Reply ↓

Why

# September 22, 2012

It’s radii not radiuses, haha

Reply ↓

Anthuan Vasquez

# October 4, 2012

LESS Elements is a set of useful mixins for the LESS http://lesselements.com/

On GitHub https://github.com/dmitryf/elements

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

Reply ↓

Nicklas

Permalink to comment# January 31, 2013

Out of all the mixin sets i checked out today, this one is by far the best one. It’s not overly cluttered with things i will never (ever!) use, it contains just about everything i’ll need and it’s very nicely done. Thanks for the link!

hafiz

# October 24, 2012

LESS !! please give me less css code of a web page, to my email. i am begaineer. it will be help full to me.

Reply ↓

a.baker

# November 23, 2012

for the lazy ;)

.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 */
}

Reply ↓

André Dal Molin

# November 23, 2012

I’m having problem when creating an mixing for box-shadow. My one is the same of yours, so I presume you passed by the same problem.
When using multiple box-shadows (comma separated) in one element (like ’2px 2px 3px 4px #000, inset -2px 1px 1px 0 #000′). LessCSS don’t compile and gives an error.

There is a way to go around this? I mean, to treat the value as a string or something else.
Thanks!!

Reply ↓

a.baker

# November 28, 2012

The comma separates the variables

use this ;)

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

iSimon

# December 3, 2012

Is there a way to write multiple transition with the .transition() mixin?
I’m trying to find how to make a mixin with undefined number of arguments and put all inside the rules with @arguments special variable.

Reply ↓

iSimon

# December 3, 2012

p>I’ve just find how!

From LESS version 1.3.1 they’ll introduce a new special variable @arguments-list that will take arguments as a raw string. Here’s the usage:

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

The ‘…’ means “don’t know how much arguments you’ll pass to my mixin, take ‘em all” ;)

Reply ↓

Steve Klein

# December 3, 2012

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

Of the two, the second one is the one Webkit now recognizes (as well as Firefox and the Spec) correct? If so, which browsers only support the former version?

Reply ↓

Antoine Lépée

# January 4, 2013

An excellent replacement for box-shadow LESS mixin
by 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;
}

Reply ↓

Antoine Lépée

# January 4, 2013

It can easily replace those three ;-)

.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

# February 4, 2013

Here is a working example of using LESS mixins with Bootstrap : bit.ly/VzonQH

Reply ↓

Balázs

# March 22, 2013

Firefox doesn’t like 0 for delay value. You have to add units: 0s

Bug 662171

So you should update to
.animation (@name, @duration: 300ms, @delay: 0s, @ease: ease) {

Reply ↓

Joseph Shambrook

# April 26, 2013

Made a quick one for User Select.

.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;
}

Reply ↓

Erick Sahara

# April 30, 2013

Thanks, i’m using in my projects ;)

Reply ↓

treehouse : what would you like to learn today?

Snippets

Useful CSS3 LESS Mixins

Comments

Leave a Comment