Useful CSS3 LESS Mixins

.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

  1. User Avatar
    Adi
    Permalink to comment#

    Beautiful. And completely useful, thanks!

  2. User Avatar
    Chris K.
    Permalink to comment#

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

    Good work!

  3. User Avatar
    Nathan Shubert
    Permalink to comment#

    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?

    • User Avatar
      Atticus White
      Permalink to comment#

      I know this is like 5 years later lol, but probably the fact that he has a default value for it.

  4. User Avatar
    Ralph Leo Bennett (DeviateDefiant)
    Permalink to comment#

    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?

    • User Avatar
      Thomas Q Brady
      Permalink to comment#

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

    • User Avatar
      Matt
      Permalink to comment#

      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

    • User Avatar
      Matt
      Permalink to comment#

      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)")";
        }
      }
      
    • User Avatar
      Kev Adamson
      Permalink to comment#

      You can add “,GradientType=0” after youe ieEndColor for vertical gradient, and “,GradientType=1” for horizontal gradient.

      I have 2 versions for this: .gradient-v and .gradient-h

  5. User Avatar
    Jon Stuebe
    Permalink to comment#

    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.

  6. User Avatar
    TJ
    Permalink to comment#

    these would look muuuuuuch nicer as stylus :)

  7. User Avatar
    Michael
    Permalink to comment#

    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;
    }
  8. User Avatar
    Stephen
    Permalink to comment#

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

  9. User Avatar
    Krist
    Permalink to comment#

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

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

    :)

  10. User Avatar
    Matt Orley
    Permalink to comment#

    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…

  11. User Avatar
    Why
    Permalink to comment#

    It’s radii not radiuses, haha

  12. User Avatar
    Anthuan Vasquez
    Permalink to comment#

    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

    • User Avatar
      Nicklas
      Permalink to comment#

      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!

  13. User Avatar
    hafiz
    Permalink to comment#

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

  14. User Avatar
    a.baker
    Permalink to comment#

    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 */
    }
    
  15. User Avatar
    André Dal Molin
    Permalink to comment#

    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!!

    • User Avatar
      a.baker
      Permalink to comment#

      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;
      }
      
  16. User Avatar
    iSimon
    Permalink to comment#

    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.

  17. User Avatar
    iSimon
    Permalink to comment#

    <

    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” ;)

  18. User Avatar
    Steve Klein
    Permalink to comment#

    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?

  19. User Avatar
    Antoine Lépée
    Permalink to comment#

    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;
    }
    
    • User Avatar
      Antoine Lépée
      Permalink to comment#

      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);
      }
      
  20. User Avatar
    Ash
    Permalink to comment#

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

  21. User Avatar
    Joseph Shambrook
    Permalink to comment#

    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;
    }
  22. User Avatar
    Erick Sahara
    Permalink to comment#

    Thanks, i’m using in my projects ;)

  23. User Avatar
    alfieindesigns
    Permalink to comment#

    Great article! Very useful!
    Thanks and God bless always!

  24. User Avatar
    Aaron Miller
    Permalink to comment#

    Just wanted to let you know that you forgot to add the following for your gradients:

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

    Don’t forget linear-gradient without the prefixes :)

  25. User Avatar
    Grzegorz
    Permalink to comment#

    What can I do in case when I want to use to different mixins in one selector, sth like this:

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

    ?

  26. User Avatar
    LlewellynCollins
    Permalink to comment#

    Another cool less function is mixin overloading. Basically a different implementation of a mixin depending on how many parameters are passed in. Link to stackoverflow Your text to link here…

  27. User Avatar
    skip405
    Permalink to comment#

    Thanks, Chris, I would also add the unprefixed properties :)

  28. User Avatar
    Zack
    Permalink to comment#

    I find this one useful as well.

    .cover () {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
  29. User Avatar
    Chris
    Permalink to comment#

    How do you create multi transition’s so that the out put is something like this?

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

    I have something like this,

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

    There should be a better way to write it I am just not sure how.

    • User Avatar
      Gregor Adams
      Permalink to comment#

      You can checkout my mixin librabry: more-or-less

      The mixin looks really simple yet requires three other mixins to work (.vendorize(), .for() and .in()).
      The entire library is built on my .vendorize() mixin which makes the library very strong and easy to maintain.

      vendorize mixin
      in-mixin
      for-mixin

      The good thing is that all values are checked and vendorized if needed. This allows to use the mixin for transitions on the e.g. transform or box-shadow properties.
      The needed vendor-prefixes are defined in this variable @vendorPrefixes: -webkit-, -moz-, -o-, '';

      The mixin requires Less 1.7.0 to work

      mixin

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

      Input

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

      output

      .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;
      }
      
  30. User Avatar
    Gregor Adams
    Permalink to comment#

    New BIG mixin library available. It is ‘almost’ as strong as ‘lesshat’ …but… WITHOUT inline-javascript.
    Find it here: more-or-less

    It is fully modular and allows to import mixins similar to ‘compass’

    @import 'css3/transition';
    

    Basic CSS3 mixin example

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

    Usage

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

    The .vendorize mixin is able to prefix properties or values (e.g. for transitions)

    The library even allows mixins like this one… (allows endless number of layers)
    All values are prefixed if needed.

    .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));
    
  31. User Avatar
    mehrdad
    Permalink to comment#

    wrote this for transform what do you think?
    $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 + “)”;
    }

  32. User Avatar
    scott taggart
    Permalink to comment#

    suppose I have my own jumbotron override:
    .jumbotron {
    background-color: #ff4400;
    }
    and then I want to have a custom override of that where I inherit the above class and only override its background color using its color a sa parameter to “lighten()”. I can’t figure out the syntax:
    .Myjumbotron {
    .jumbotron;
    /* not sure what goes below for “parent.background-color” */
    background-color: lighten(parent.background-color, 30%);
    }

    Thanks!

  33. User Avatar
    Jesse
    Permalink to comment#

    Scale should be this for X and Y support. This is backwards compatible, because of @ratio_y:@ratio_x.

    .scale(@ratio_x:1.5, @ratio_y:@ratio_x){
      .transform(scale(@ratio_x, @ratio_y));
    }
    
  34. User Avatar
    invader365
    Permalink to comment#

    You know, there’s an extensive less library called anchorLESS,

    it’s almost like jquery but for css. And all that you need is a single less file!

    You can find it here: invader365.github.io/anchorLESS

    Source at: Github

    enjoy ;)

  35. User Avatar
    Brian
    Permalink to comment#

    Bravo! Bravo!

  36. User Avatar
    RomanK
    Permalink to comment#

    Here is LESS mixin for linear gradient I usually use:

    .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));
    }
    
  37. User Avatar
    Herman Nz
    Permalink to comment#

    Wow! Thanks for the nice stuff ! let me copy for my css-library

  38. User Avatar
    Deepak
    Permalink to comment#

    Excellent collection !!
    Keep on adding more like this in here

    less for css sprites is missing :(

  39. User Avatar
    Piotrek
    Permalink to comment#

    But how to implement color shade in .drop-shadow mixin when calling? I can only change the opacity… :(

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag