Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
39 views

Using LESS For Better HTML

The document provides an overview of LESS (Leaner Style Sheets), a CSS pre-processor that adds features like variables, mixins, operations and functions to regular CSS allowing for more maintainable and reusable CSS code. It discusses what LESS is, why it should be used, how to use it with various tools and frameworks, details of its features and language, and how it can enable leaner HTML by moving styling information out of markup and into CSS files.

Uploaded by

Mike
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
39 views

Using LESS For Better HTML

The document provides an overview of LESS (Leaner Style Sheets), a CSS pre-processor that adds features like variables, mixins, operations and functions to regular CSS allowing for more maintainable and reusable CSS code. It discusses what LESS is, why it should be used, how to use it with various tools and frameworks, details of its features and language, and how it can enable leaner HTML by moving styling information out of markup and into CSS files.

Uploaded by

Mike
Copyright
© © All Rights Reserved
Available Formats
Download as PPSX, PDF, TXT or read online on Scribd
You are on page 1/ 48

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!

You might also like