LESS for dynamic CSS

LESS is a way to build dynamic CSS with simple constants, functions, and imports.

http://lesscss.org

We can define shared CSS code, for example shared methods for rounded corners, color gradients, and borders. This makes our styles easier to write, easier to read for other designers, and consistent across our entire site.

Example

CSS LESS 
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;

.radius(8px);

background: #AAAAFF;
background: -webkit-gradient(linear, left top, left bottom, from(#AAAAFF), to(#444488));
background: -moz-linear-gradient(top, #AAAAFF, #444488);

.gradient(@light-blue, @medium-blue);

border-color: #000044;
border-style: solid;
border-width: 4px;

.border(@dark-blue);


What's Next?

blog comments powered by Disqus