Grow your CSS skills. Land your dream job.

Last updated on:

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. Adi
    Permalink to comment#

    Beautiful. And completely useful, thanks!

  2. Permalink to comment#

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

    Good work!

  3. 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?

  4. 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?

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

    • 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

    • 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)")";
        }
      }
      
    • 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. 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. TJ
    Permalink to comment#

    these would look muuuuuuch nicer as stylus :)

  7. 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. Permalink to comment#

    Great LESS compiler for Windows and Linux for free :

    http://wearekiss.com/simpless

  9. 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. 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. Why
    Permalink to comment#

    It’s radii not radiuses, haha

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

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

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

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

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

  17. 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?

  18. 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;
    }
    
    • 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);
      }
      
  19. Permalink to comment#

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

  20. 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;
    }
  21. Erick Sahara
    Permalink to comment#

    Thanks, i’m using in my projects ;)

  22. alfieindesigns
    Permalink to comment#

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

  23. 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 :)

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

    ?

  25. 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…

  26. skip405
    Permalink to comment#

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

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

    • 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;
      }
      
  29. 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));
    
  30. 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 + “)”;
    }

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

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".