Using LESS for more maintainable,
semantic, and lean web sites
Venkat Talluri
Introduction to LESS
Tools and usage
Features in detail
Enabling leaner HTML
Outline
The dynamic stylesheet language huh?
Most popular CSS preprocessor
Based on CSS
Compiles to CSS
Server-side & client-side
Adds sorely needed maintainability features
lesscss.org
Developed byAlexis Sellier (cloudhead)
What is LESS?
Code reuse (DRY)
More maintainable
Easier to read the structure more closely
resembles corresponding HTML
Superset of CSS low barrier of entry
Better browser compatibility
Written in JavaScript portable!
Youre a hipster
Fun! No, really, it is its what CSS should be!
Why use LESS?
No standards
W3C adopt LESS!
Browser error/inspection doesnt match original
code
Not a silver bullet to solve browser compatibility
issues
Developers still able to mess things up pretty bad
CSS bloat
Excessive CSS size if youre not careful
Potential browser performance issue
Error reporting could be better
Pitfalls
Bootstrap
Rails
Tapestry
ASP.NET
Node.js
PHP
Django
Play
Anything!
Integration
with
LESSHAT
Lots of Love for LESS
LESS Elements
Bootstrap!
Extras: Mixin
Libraries
TOOLS AND USAGE
Best: native framework integration
Compilation handled automatically
JavaScript engines: V8, Rhino, Nashorn
E.g. any Java/JVM based language
Alternate implementations
PHP, Python, Ruby (originally)
Edit LESS files directly, automatically
converted to CSS
Browser should get optimized, compressed
CSS
Usage:
Integrated
Edit LESS files, convert to CSS
Use tools when no native integration is
available
Must recompile manually if LESS files are
modified
Keep generated CSS in version control
compression results in full-file changes ick!
Add to build pipeline? Limited support..
Typically run in the background and
automatically update CSS when LESS files are
changed
Browser should get optimized, compressed
CSS
Usage: Tools
Cross-platform
SASS
LESS
JS
Coffeescript
Minify
LESS 1.5!
Tools: Koala
MAC only
SASS
LESS
JS
Coffeescript
Tools: CodeKit
Crossplatform
LESS only
Issues with
LESS > 1.3?
Otherwise,
great
Tools: SimpLESS
Lots more
See the lesscss.org site for some of them
Node.js command line: lessc
Tools
Directly edit LESS files
Browser downloads LESS files directly
Compilation to CSS done via JavaScript
Use <link rel=stylesheet/less
Use inline <style type="text/less">
Most risky
Slowest
Development mode!
Usage: InBrowser
Easiest way to get started! (Dont do this in
production!)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/less">
@h1color: red;
body > h1 { color: @h1color; }
</style>
<script type="text/javascript"
src=https://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js">
</script>
</head>
<body><h1>Hello, LESS</h1></body>
</html>
Usage: InBrowser
LANGUAGE
DETAILS
Superset of CSS
Valid CSS should be valid LESS
Imperfect?
Basic Structure
CSS-style comments
Included in output by default
C-style single-line comments, too!!
Comments
Define variables beginning with @
My only gripe!
@var: value; syntax
Can hold different types of units, LESS is smart
about units: px, em, hex/RGB colors
Variables
Variables interpolated in strings
Make sure you know your data type!
Interpolated in selectors & rules
Must use the @{var} syntax
Variable
Interpolation
Variables scoped logically within braces
Variables from mixins available in scope where
used
Variable Scope
LESS allows nested selectors
Compiled logically to combine selectors in
resulting CSS
@media handled appropriately
Nesting
Ampersand used to concatenate to parent
selector
Will concatenate just about anything
Easy to nest too deep not necessary to mimic
HTML
Nesting
Ampersand also used to reverse nesting order
.parent & will actually go at the beginning, not
reversed order better!
Old browser support
Nesting
Mixins will copy style information into context
One of the most important features to avoid
duplication
Mixins
Mixins support parameters
Default values
Variables can be scoped within mixin definition
Mixins
Parameterless mixins are hidden from output
More complicated usage scenarios supported
Nested mixins unlocked with scoped
variables
Mixins
Enclose rules in namespaces
Use hidden mixins to keep from output
Namespaces
Mixins matched based on critera
@_ for any value, will always be included
Match on parameter count
Ive never had a need for this
Pattern matching
Basic inclusion/exclusion rules for mixins
Uses the when keyword after mixin
declaration
Also: when (isnumber(@a)) and (@a > 0)
{ ... }
Guards
Supports: > >= = =< <
And functions:
iscolor
isnumber
isstring
iskeyword
isurl
ispixel
ispercentage
isem
Isunit
Ive never had a need for this, either not a
hipster!
Guards
@import both CSS and LESS files
Omit .less extension, if desired, for LESS files
CSS files not processed
Imports make variables available in context
Imports
Joins to existing style rules a way out of CSS
bloat by adding selectors to parent definition
Introduced in LESS 1.4
Last remaining deficiency vs. SASS? !!
Cant have parameters like mixins
:extend
Extend matches all outputs of specific params
Extend multiple comma sparated
:extend
LESS is smart about math
Units remain intact, can mix some types
Can use hex color values in operations
Operations
Lots of built-in functions
Color:
lighten, darken, desaturate,
Math:
ceil, floor, round,
See lesscss.org for more information
Functions
LEAN HTML
Performant web sites
Lean HTML
Mobile device friendly
Smaller downloads
Fewer DOM elements
What about full-blown AJAX sites?
Easier to generate with JS
Why lean HTML?
Easier to restyle content separated from
styling
Good for multiple developers
Philosophical change:
Include appropriate HTML
Think in terms of components
Aligns with recent development:
Angular, React, etc..
Avoid including styling information
LESS enables this by moving styling to CSS
Why lean HTML?
Styling directly included in markup
Solution?
renaming CSS classes, do not change usage
patterns
CSS Antipatterns
Regardless of the terminology, style
information is directly included in the markup
Why?
It would require lots of duplicate CSS to do
otherwise
Grid systems - eek!
Chock full o anti-patterns
CSS Antipatterns
Avoid needless classes
Avoid lots of unnecessary nesting
Modern browsers make styling much easier
Include lean HTML
Never use IDs, at least not for styling
No performance benefit
Maintainability
Target (use selectors)
This is what CSS is built for
You already know jQuery & CSS selectors, right?
Apply style rules
In your CSS, marry the targeted elements to the styling
information
This is what LESS makes easy to do!
Target & Apply
Using mixins and :extend functionality, move
the choice of styling to the rules, not the HTML
Based on minimal HTML, easy to apply
selectors
LESS for styling
Rethink your
HTML
SASS
SCSS similar to CSS syntax
Compass is said to be awesome
Old SASS syntax == bad!
Uses $ for vars, smart!
Stylus
Syntax different than CSS
Plain-old CSS
Alternatives to
LESS
CSS pre-processors are for hipsters!
Questions? Comments?
Editor: kzantow.github.io/fiddle-less
less2css.org
Thanks!
Try it!
