KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #claude-code #codex #dsh #dsh-plugin #ai-agent #ai-agents #deepseek-harness #agent-skills #macos #cli

LESS-Dynamic-Stylesheet

★ 96 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

LESS DSS (dynamic stylesheet)
=============

It's a set of useful mixins for LESS, the CSS pre-processor: <a href="http://lesscss.org" target="_blank">lesscss.org</a>.
 I recommend a "<a href="http://incident57.com/codekit/" target="_blank">CodeKit</a>" app for the auto compress (OS X).
 Licensed under the [MIT License](http://opensource.org/licenses/MIT)

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

<ul>
 <h3>Backgrounds Group</h3>
 <hr/>

<li>.gradient-h</li>
 <code>.gradient-h ( #fff, #aaa );</code>

<li>gradient-v</li>
 <code>.gradient-v ( #fff, #aaa );</code>

<li>.gradient-vline</li>
 <code>.gradient-vline ( #fff, #ddd, #aaa, #ddd );</code>

<li>.gradient-v3colors</li>
 <code>.gradient-v3colors ( #00b3ee, #7a43b6, 50%, #c3325f );</code>

<li>.gradient-radial</li>
 <code>.gradient-radial ( #fff, #aaa );</code>

<li>.gradient-direction</li>
 <code>.gradient-direction ( #fff, #aaa, 120 );</code>

<li>.bg-clip</li>
 <code>.bg-clip ( border-box );</code>
 
 <code>.bg-clip ( border );</code>

<h3>Box Group</h3>
 <hr/>

<li>.box-align</li>
 <code>.box-align ( baseline );</code>

<li>.box-direction</li>
 <code>.box-direction ( normal );</code>

<li>.box-orient</li>
 <code>.box-orient ( horizontal );</code>

<li>.box-pack</li>
 <code>.box-pack ( center );</code>

<li>.box-sizing</li>
 <code>.box-sizing ( content-box );</code>

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

<h3>Border Group</h3>
 <hr/>

<li>.border-image</li>
 <code>.border-image ( "../img/picture.img", 30 30 repeat );</code>

<li>.rounded</li>
 <code>.rounded ( 10px );</code>
 
 <code>.rounded ( 3px 2px 4px 10px );</code>
 
 <code>.rounded ( top, 5 );</code>
 
 <code>.rounded ( right, 5 );</code>
 
 <code>.rounded ( bottom, 5 );</code>
 
 <code>.rounded ( left, 5 );</code>

<h3>Transform Group</h3>
 <hr/>

<li>.transform</li>
 <code>.transform ( perspective(0) translate3d(50px, 40px, 80px) scale3d(1, 2, 0) rotate3d(0, 1, 0, 45deg) );</code>

<li>.matrix</li>
 <code>.matrix ( 0.9, 0.2, -0.5, 0.9, 0, 0 );</code>

<li>.matrix3d</li>
 <code>.matrix3d ( "1, 0, 0, 0, 0, 0.60, 0, -0.0009, 0, 0, 1, 0, 0, 0, 0, 1" );</code>

<li>.rotate</li>
 <code>.rotate ( 45 );</code>
 
 <code>.rotate ( x, 45 );</code>
 
 <code>.rotate ( y, 45 );</code>
 
 <code>.rotate ( z, 45 );</code>

<li>.rotate3d</li>
 <code>.rotate ( 15, 10, 5, 45 );</code>
 
 <li>.scale</li>
 <code>.scale ( 0.8 );</code>
 
 <code>.scale ( x, 0.4 );</code>
 
 <code>.scale ( y, 1.3 );</code>
 
 <code>.scale ( z, .7 );</code>

<li>.scale3d</li>
 <code>.scale3d ( .4, .5, 1.2 );</code>

<li>.translate</li>
 <code>.translate ( 20, 40 );</code>
 
 <code>.translate ( x, 20 );</code>
 
 <code>.translate ( y, 40 );</code>
 
 <code>.translate ( z, 60 );</code>

<li>.translate3d</li>
 <code>.translate3d ( 20, 40, 60 );</code>

<li>.perspective</li>
 <code>.perspective ( 250 );</code>
 
 <code>.perspective ( 250, px );</code>

<li>.perspective-origin</li>
 <code>.perspective-origin ( 50% 50% );</code>

<li>.transform-origin</li>
 <code>.transform-origin ( 30%, 40%, 0 );</code>

<li>.transform-style</li>
 <code>.transform-style ( preserve-3d );</code>

<h3>Transition</h3>
 <hr/>

<li>.transition</li>
 <code>.transition ( width, .7s );</code>
 
 <code>.transition ( property, 0.2s, ease-out, 0 );</code>

<h3>Animation Group</h3>
 (checkout: http://daneden.me/animate/)
 <hr/>

<li>.animate</li>
 <code>.animate ( wobble );</code>
 
 <code>.animate ( wobble, 2s, ease, 0, 1, normal );</code>

<li>.animation-state</li>
 <code>.animation-state ( running );</code>

<h3>Column</h3>
 <hr/>

<li>.columns</li>
 <code>.columns ( 2, normal );</code>

<h3>Misc Group</h3>
 <hr/>

<li>.opacity</li>
 <code>.opacity ( 0.7 );</code>

<li>.font</li>
 <code>.font ( italic, normal, bold, 14px, 1, "'Lucida Grande', Helvetica, Arial, Verdana, sans-serif" );</code>

<li>.font-face</li>
 <code>.font-face ( MyFontName, "../assets/fonts/sofia-pro" );</code>

<li>.square</li>
 <code>.square ( 400 );</code>

<li>.resizable</li>
 <code>.resizable ( vertical );</code>

<li>.center-block</li>
 <code>.center-block;</code>

<li>.clearfix</li>
 <code>.clearfix;</code>
</ul>

LESS-Dynamic-Stylesheet

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README