LESS CSS

Never heard of LESS? Now you have!

Transcript

1. LESS CSS Do more with LESS.
2. What is LESS? • A superset of CSS, meaning that anything that is valid CSS, is also valid LESS. • Adds things to CSS that allows you to make it more DRY (Don't repeat yourself), like functions (mixins) and variables. • Do calculations just like in JS or PHP, and assign their results. • Allows nested CSS, which makes its syntax make more sense, and helps prevent need to for overrides and use of the !important keyword by making your CSS apply to specific parts of the document. • LESS can be used either as-is, by including a Javascript library in your page, or can be compiled into normal CSS.
3. Benefits & Drawbacks • Reusable & DRY. • Open source. • Follows HTML structure of your page. • Can avoid specificity problems. • Compiler does minimization too. • Less work to adjust stylesheets completely if used right with variables. • Not operating system specific or constrained. • Requires no server addons. • Well supported and maintained. Harder to debug syntax errors and track down errors with browser- provided line-numbers. (although compilers warn you of errors). Must be compiled to use (either by JS, or a compiler app) It's more files, but not many. (But usually not any extra HTTP requests)
4. Variables Variables are awesome because you can set a value once and alter it later. The best example of this is for adjusting the whole color scheme of a stylesheet in a simple set of variables. Define the colours you're going to use once, use the variables in your styles, and you can redefine the look of your entire site by just changing the variables. // Define the color scheme. @baseColor:#000000; @linkColor:#FF55FF; @logoColor:#BADA55; @textColor:white; // Use them in your stylesheet body { background: @baseColor; width:960px; color:@textColor; } div.banner { background: @logoColor; width:220px; border-top: dotted 1px black; border-bottom: solid 2px black; }
5. Mixins Mixins are like functions in a programming language - you define them once, and they can be used over and over again, promoting re- use and less wastage. LESS mixins basically take the CSS you supply inside them, and allow you to include that CSS inside a rule without having to type it all again. A basic example can be seen here. // Code like this: .bordered() { border-top: dotted 1px black; border-bottom: solid 2px black; } // When used like this: div.slide { background: @backgroundColor ; width:220px; .bordered(); } // Will compile & output this: div.slide { background: @backgroundColor ; width:220px; border-top: dotted 1px black; border-bottom: solid 2px black; }
6. Parametric Mixins 'Parametric mixins' are a fancy synonym for functions with arguments. You can define variables that can be passed in and will be applied to the CSS inside the rule. A good example of this is a border- radius mixin that outputs CSS with all the browser prefixes. // Define the mixin. .border-radius(@radius:3px) { border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; -o-border-radius:@radius; } // Call it div.rounded { .border-radius(6px); } // Outputs: div.rounded { border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; -o-border-radius:@radius; }
7. Nested Rules Nested rules are really useful, reducing the amount of repetitive typing you do, and mimicking your HTML's structure in CSS. Nested rules also have some handy shortcuts for doing things like :hover and :active rules. This helps eliminate repetitive typing of the base elements (ul li). // Nested unordered list styles. ul { margin: 0px 0px 0px 0px; li { border-bottom:1px solid #ccc; a { color:red; &:hover { opacity:0.75; } } } } // A lot more terse than: ul {...} ul li {...} ul li a {...} ul li a:hover { ...}
8. Operations and calculation Although it still doesn't solve many problems, being able to do calculations can reduce the amount of calculations that you have to do manually, this, can only be a good thing, right? It also means that again, by adjusting variables can dramatically alter the layout of your site easily. You'll see this used a lot for things like responsive design and grid systems. // Variable calculations. @columnWidth: 60px; @gutterWidth: 10px; @total:@columnWidth*12 + @gutterWidth*11 ; /* Will have width of 830px */ /* Will also have height of 200px */ #container { width:@total; height: 20px + 180px ; }
9. Stupidly useful colour functions. /* Taken from http://lesscss.org - these are totally self explanatory! */ lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color saturate(@color, 10%); // return a color 10% *more* saturated than @color desaturate(@color, 10%); // return a color 10% *less* saturated than @color fadein(@color, 10%); // return a color 10% *less* transparent than @color fadeout(@color, 10%); // return a color 10% *more* transparent than @color fade(@color, 50%); // return @color with 50% transparency spin(@color, 10); // return a color with a 10 degree larger in hue than @color spin(@color, -10); // return a color with a 10 degree smaller hue than @color mix(@color1, @color2); // return a mix of @color1 and @color2
10. Compiling LESS files. • Less.js compiles attached LESS files on runtime. • The bundled lessc compiler program works for unix systems (Linux, Mac) on the command line and is easy. • There's a PHP Library that'll do it. • There's a Drupal module that'll use the PHP library and do it for you. • You can get apps to do it for you, like Less.app for mac, and WinLess for windows (Sorry Linux users - not sure there's any GUI apps yet).
11. Preboot Heard of twitter bootstrap? well this is where it came from. Mark Dotto's bootstrap library is one small .less file that you can include in your own LESS stylesheets, bringing a whole load of basic variables, useful mixins and even a foundation grid system to table, all by writing: @import 'bootstrap.less'; at the top of your own stylesheet. It's a great starting point as it doesn't actually set any styles for you, just allows you to utilise them.
12. SASS - A competitor, but the same. SASS is a stylesheet pre-processor similar to LESS that is commonly used by people programming with the Ruby on Rails framework. SASS is described as a meta-language, and is not strictly a superset of CSS like LESS is. Its syntax is similar, and it even has some of the same functionality and syntax, but is a lot harder to set up and can take more getting used to than LESS. SASS has a lot of supporters in the Ruby community and will argue with you about why you're using LESS, just remember: do not feed the trolls. "SASS is better than LESS!"
13. These are just the really useful bits. Visit http://lesscss.org and RTFM
14. There is no reason why we can't use LESS right now in our drupal and non-drupal projects*. * There may actually be reasons, i am not a doctor, i'm not even sure i'm a real developer. What's PHP?