Who I am

Say hello to the CSS WG

A new kind of dependency hell

As a consequence of this design, feature modules couldn't progress unless the core modules progressed, and the core modules couldn't be complete until all the feature modules were complete. Nothing could move forward until everything moved forward. It was a new kind of dependency hell.

Taking a Modular Approach

There's lots of work going on

Calculations (CSS Values)

Example

CSS Variables Cascading Variables

The proposed spec is NOT about variables and I seriously wonder if we should not change the title of the document. You may call the feature it introduces "variables" but at the deeper level, that's not about variables.

[CSS Cascading Variables is] a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and variables, which allow an author to then use those values in other properties elsewhere in the document.

First requested in 1998, first W3C proposal: 2008, first public draft April 2012

A decade of BBC News

2001

Lines of CSS: 1493
Total File size: 31.85KB (1 file)

2007

Lines of CSS: 2270 Up 52%
Total File size: 61.93KB (12 files)

2012

Lines of CSS: 19712 Up 860%!
Total File size: 336.30KB (12 files)

How much code?

How much code?

Why do we need these things?

Dilbert.com

Enter CSS Pre-processors

Nesting Rules

Nesting is really useful for @media

Variables

• Define a property/value/string anywhere
• Use it again
• ...
• Profit!
• Less uses @, Sass uses $

$ or @

Neither implementation matches the current W3C spec, so why does it matter?

It doesn't matter, just be aware

Mixins

Mixins contd…

Mixins.less

Clever @importing is the key

Bootstrap.less

Bootstrap's responsive.less

Modular CSS = DRY Code

Re-using CSS has always between projects has always been a challenge, tips and tricks from one project get lost and re-written for another. CSS pre-processors can change that

• Want a responsive grid and a bunch of gradients? grid.less and mixins.less from Twitter Bootstrap and you're done. For Sass? Try Mooxins
• Build yourself a pattern library like ClearLess by ClearLeft
• How about all the gradients from Lea Verou's CSS3 pattern gallery? Download css-patterns-less
  

Going deeper

Extensible classes

Variable scoping

Now for the funkier stuff

Loops & Logic

Sass

Generating Rules

And then Less gets left behind

@content

A mixin include can now accept a block of content. The style block will be passed to the mixin and can be placed at the point @content is used

Directive Interpolation

You can now output values of variables into standard CSS directives such a @font-face and @media

This allows for complicated mixins in a much simpler syntax

Even more features in Sass 3.2

• Mixins can be defined in a nested context i.e. within @media queries
• CSS Selectors Level 4 are now supported
• min() and max() math functions
• Placeholder selectors: an extension to @extend and mixins

Compass

• All of those basic Less mixins rolled into one
• Sprites, vendor prefixes, grids, gradients, it's all there
• Also things not possible with less: extra math functions like log(), sqrt(), pow(), plus tint() and shade()

A big (little) update

• Much improved rule engine: Bootstrap compiled went from 6221 lines to 5270. ~18% improvement
• New colour functions: tint, shade, multiply, screen, overlay, hardlight, difference, exclusion, average, negation, softlight, red, green, blue, contrast
• Directive Interpolation, just like Sass 3.2
• Supports new value units dpi, vmin, vm, dppx and dpcm
• Still doesn't resolve the extensible class issue

Is one better than the other?

Get Started

Command line

npm install -g less
lessc style.less style.css

gem install sass
gem install compass
sass --watch style.scss:style.css

PM> Install-Package dotless

PM> Install-Package BundleTransformer.SassAndScss

Get Started contd...

PHP

require "lessc.inc.php";
$less = new lessc;
echo $less->compile(".block { padding: 3 + 4px }");

require_once('SassParser.php');
$parser = new SassParser($settings);
$result = $parser->toCss($input);

Get Started contd...

Wordpress

Theme designers can write their CSS in Less or Sass and make use of in-theme bootstrappers so no plugins are required

Less

Use WP-LESS

// wp-content/themes/your-theme/functions.php
require dirname(__FILE__) . ‘/vendor/wp-less/bootstrap-for-theme.php’;
$less = WPLessPlugin::getInstance();
$less->dispatch();

Sass

Use WP-SASS

require_once( 'wp-sass/wp-sass.php' );
// enqueue a .scss style sheet
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/style.scss' );

Get Started Contd...

Javascript

Less is written in JavaScript, so you can run it client-side

<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>

Get Started - Tools

Find out more

Lesscss.org

sass-lang.com

Stylus
learnboost.github.com/stylus - A third way by @tjholowaychuk

smacss.com - A great e-book on modular CSS by Jonathan Snook