A set of useful mixins for LESS, the CSS pre-processor: http://lesscss.org
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
dss.less

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).
Licensed under the MIT License

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;