less is better

LESS IS BETTERCurtis McHale

@curtismchale - curtismchale.ca - wpthemetutorial.com

Friday, 15 March, 13

What is LESS

Friday, 15 March, 13

What is LESS

Different way to write plain old CSS

Friday, 15 March, 13

One Example

Friday, 15 March, 13

One Example

Friday, 15 March, 13

One Example

Friday, 15 March, 13

BUT WHY????

Friday, 15 March, 13

WHY

Friday, 15 March, 13

WHY

File separation

Friday, 15 March, 13

WHY

File separation

widgets.less

Friday, 15 March, 13

WHY

File separation

widgets.less

forms.less

Friday, 15 March, 13

WHY

File separation

widgets.less

forms.less

layout.less

Friday, 15 March, 13

WHY

File separation

widgets.less

forms.less

layout.less

and still serve 1 file to the browser

Friday, 15 March, 13

Save Time

Friday, 15 March, 13

Save Time

Allows for variables

Friday, 15 March, 13

Save Time

Allows for variables

Friday, 15 March, 13

Save Time

Friday, 15 March, 13

Save Time

Mixins

Friday, 15 March, 13

Save Time

Mixins

Friday, 15 March, 13

Save Time

Mixins

Friday, 15 March, 13

Save Time

Friday, 15 March, 13

Save Time

Nested Rules

Friday, 15 March, 13

Save Time

Nested Rules

Friday, 15 March, 13

Save Time

Nested Rules

Friday, 15 March, 13

Save Time

Friday, 15 March, 13

Save Time

Functions and Operations

Friday, 15 March, 13

Save Browser Time

Friday, 15 March, 13

Save Browser Time

Compile and Serve Minified Files

Friday, 15 March, 13

Save Browser Time

Compile and Serve Minified Files

Friday, 15 March, 13

Save Browser Time

Compile and Serve Minified Files

http://curtismchale.ca saves 3kb minified

Friday, 15 March, 13

Save Browser Time

Compile and Serve Minified Files

http://curtismchale.ca saves 3kb minified

translates to 300mb for 100,000 visitors

Friday, 15 March, 13

Some Issues

Friday, 15 March, 13

Some Issues

Friday, 15 March, 13

Some Issues

Friday, 15 March, 13

Some Issues

Friday, 15 March, 13

Some Issues

Friday, 15 March, 13

Some Issues

Friday, 15 March, 13

Over Nesting

Friday, 15 March, 13

Over Nesting

Friday, 15 March, 13

Over Nesting

Friday, 15 March, 13

Over Nesting

Friday, 15 March, 13

Over Nesting

Friday, 15 March, 13

Over Nesting

Friday, 15 March, 13

Nesting Best Practices

Friday, 15 March, 13

Comment Please

Friday, 15 March, 13

Comment Please

Friday, 15 March, 13

Comment Please

Friday, 15 March, 13

Comment Please

Friday, 15 March, 13

COMPILING

Friday, 15 March, 13

With Javascript

Friday, 15 March, 13

With Javascript

Friday, 15 March, 13

With Javascript

Friday, 15 March, 13

During Development

Friday, 15 March, 13

During Development

Friday, 15 March, 13

During Development

Friday, 15 March, 13

During Development

Friday, 15 March, 13

THEME EXAMPLES

Friday, 15 March, 13

var.less

Friday, 15 March, 13

layout.less

Friday, 15 March, 13

layout.less

Friday, 15 March, 13

LESS IS BETTERCurtis McHale

@curtismchale - curtismchale.ca - wpthemetutorial.com

Friday, 15 March, 13