Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org

branch: master
README.md

LESS DSS (dynamic stylesheet)

It's a set of useful mixins for LESS, the CSS pre-processor: lesscss.org.
I recommend a "CodeKit" app for the auto compress (OS X).

Examples how to use the functions contained in "less.dss" (v1.8.1) file:

    Backgrounds Group


  • .gradient-h
  • .gradient-h ( #fff, #aaa );

  • gradient-v
  • .gradient-v ( #fff, #aaa );

  • .gradient-vline
  • .gradient-vline ( #fff, #ddd, #aaa, #ddd );

  • .gradient-v3colors
  • .gradient-v3colors ( #00b3ee, #7a43b6, 50%, #c3325f );

  • .gradient-radial
  • .gradient-radial ( #fff, #aaa );

  • .gradient-direction
  • .gradient-direction ( #fff, #aaa, 120 );

  • .bg-clip
  • .bg-clip ( border-box );
    .bg-clip ( border );

  • .bg-size
  • .bg-size ( 100%, 50% );


    Box Group


  • .box-align
  • .box-align ( baseline );

  • .box-direction
  • .box-direction ( normal );

  • .box-orient
  • .box-orient ( horizontal );

  • .box-pack
  • .box-pack ( center );

  • .box-sizing
  • .box-sizing ( content-box );

  • .box-shadow
  • .box-shadow ( "0 0 5px blue, inset 2px 2px 10px rgba (0,0,0, .2), 0 1px 4px #000" ); (multi)
    .box-shadow ( in, 0 1px 4px #ddd ); (inset)
    .box-shadow ( out, 0 1px 4px rgba(0,0,0, .5) ); (outset)
    .box-shadow ( 0 1px 4px, #ccc, 45% ); (alpha)


    Border Group


  • .border-image
  • .border-image ( "../img/picture.img", 30 30 repeat );

  • .rounded
  • .rounded ( 10px );
    .rounded ( 3px 2px 4px 10px );
    .rounded ( top, 5 );
    .rounded ( right, 5 );
    .rounded ( bottom, 5 );
    .rounded ( left, 5 );


    Transform Group


  • .transform
  • .transform ( perspective(0) translate3d(50px, 40px, 80px) scale3d(1, 2, 0) rotate3d(0, 1, 0, 45deg) );

  • .matrix
  • .matrix ( 0.9, 0.2, -0.5, 0.9, 0, 0 );

  • .matrix3d
  • .matrix3d ( "1, 0, 0, 0, 0, 0.60, 0, -0.0009, 0, 0, 1, 0, 0, 0, 0, 1" );

  • .rotate
  • .rotate ( 45 );
    .rotate ( x, 45 );
    .rotate ( y, 45 );
    .rotate ( z, 45 );

  • .rotate3d
  • .rotate ( 15, 10, 5, 45 );

  • .scale
  • .scale ( 0.8 );
    .scale ( x, 0.4 );
    .scale ( y, 1.3 );
    .scale ( z, .7 );

  • .scale3d
  • .scale3d ( .4, .5, 1.2 );

  • .translate
  • .translate ( 20, 40 );
    .translate ( x, 20 );
    .translate ( y, 40 );
    .translate ( z, 60 );

  • .translate3d
  • .translate3d ( 20, 40, 60 );

  • .skew
  • .skew ( 30, 4 );
    .skew ( x, 20 );
    .skew ( y, -30 );

  • .perspective
  • .perspective ( 250 );
    .perspective ( 250, px );

  • .perspective-origin
  • .perspective-origin ( 50% 50% );

  • .transform-origin
  • .transform-origin ( 30%, 40%, 0 );

  • .transform-style
  • .transform-style ( preserve-3d );


    Transition


  • .transition
  • .transition ( width, .7s );
    .transition ( property, 0.2s, ease-out, 0 );


    Animation Group

    (checkout: http://daneden.me/animate/)

  • .animate
  • .animate ( wobble );
    .animate ( wobble, 2s, ease, 0, 1, normal );

  • .animation-state
  • .animation-state ( running );


    Column


  • .columns
  • .columns ( 2, normal );


    Misc Group


  • .opacity
  • .opacity ( 0.7 );

  • .font
  • .font ( italic, normal, bold, 14px, 1, "'Lucida Grande', Helvetica, Arial, Verdana, sans-serif" );

  • .font-face
  • .font-face ( MyFontName, "../assets/fonts/sofia-pro" );

  • .size
  • .size ( 400, 200 );

  • .square
  • .square ( 400 );

  • .resizable
  • .resizable ( vertical );

  • .hide-text
  • .hide-text;

  • .center-block
  • .center-block;

  • .clearfix
  • .clearfix;
Something went wrong with that request. Please try again.