Doing More With

How a meta-language can help you take control of your stylesheets and help improve your style productivity.

David Engel

• UofM grad• .NET and PHP developer• Tipping Canoe alumnus• Experienced “backend” developer

PHP, C#, C++, MySQL, TransactSQL, Sphinx• Relatively new to “frontend” development

CSS, jQuery, LESS, UX, design

CSS

Cascading Style Sheets

• describes look & formatting of a document that has been created using markup

• separate style and content• avoid specificity by harnessing the cascade

OOCSS

Object Oriented CSS

• separate structure and skin• separate container and content

OOCSS

#button { width: 100px; height: 25px; background: #ccc; border: 1px solid #333; border-radius: 5px;}

#box { width: 200px; height: 400px; background: #ccc; border: 1px solid #333; border-radius: 5px;}

<a id="button" href="">blah</a><div id="box">blah</div>

OOCSS

becomes….button { width: 100px; height: 25px;}.box { width: 200px; height: 400px;}

.skin { background: #ccc; border: 1px solid #333; border-radius: 5px;}

<a class="button skin" href="">blah</a><div class="box skin">blah</div>

OOCSS

Use classes for styling hooks!

Use ids for behavioral hooks!

DRY CSS

Don’t Repeat Yourself (Jeremy Clarke)1. Group reusable CSS properties together2. Use logical names for groups 3. Add selectors (not a fan of ALL-CAPS)

#WHITE-BACKGROUND,.large-white-background,.medium-white-background{ background-color: #fff; border-color: #bbb;}

DRY CSS

What are we still missing?• Descendent selectors break OOCSS – so what?

(the “OO” part of OOCSS is garbage anyways)

• No variables• No mixins• No inheritance

LESS

• variables• mixins• nesting• operations• functions• switches• overloads

• comparitors• type/unit checking• color functions• math functions• string embedding• Namespaces• Javascripting!!!

LESS: Variables

@maxim-green:#8dc63f;

.color-green{ color:@maxim-green;}

LESS: Mixins

.rounded-corners{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#header { .rounded-corners;}

• Gives us inheritance!

LESS: Mixins

.rounded-corners (@radius) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners(5px);}

Parametric mixins extend this functionality

LESS: Mixins

.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}#header { .rounded-corners;}

Parametric mixins can also have default values

LESS: Nesting

#header {h1 { font-size: 26px;

font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}

Nesting gives us a kind of namespacing for specificity of inheritance

LESS: Nesting

@red : red;#header {

@red: #BF2E1A;h1 {color: @red; // yields #BF2E1A}

}h1 {color: @red; // yields red}

… and Scope

LESS: Operations

@red: # BF2E1A;@main-margin: 4px;

#footer{ color: @red + #001100; margin-left: @main-margin * 3;}

• add, subtract, divide and multiply properties

LESS: Functions

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @x @y @blur @color; -moz-box-shadow: @x @y @blur @color; -webkit-box-shadow: @x @y @blur @color;}.box-shadow(3px, 7px);

Take arguments into your mixins…

LESS: Functions

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments;}.box-shadow(3px, 7px);

…or use the @arguments variable to take it all!

LESS: Imperative Programming

.color-mixin (dark, @color) { color: darken(@color, 10%);}.color-mixin (light, @color) { color: lighten(@color, 10%);}.color-mixin (@_, @color) { display: block;}

This is a kind of switch (note the “all” selector)…

LESS: Imperative Programming

@light-switch: light;@dark-switch: dark;.light-class { .color-mixin(@light-switch, #888);}.dark-class { .color-mixin(@dark-switch, #888);}

…that we can call like so:

LESS: Overloads

.fade-mixin (@a-color) { color: @a-color;}.fade-mixin (@a-color, @b-color) { color: fade(@a-color, @b-color);}#solid-color{ .fade-mixin(blue);}#faded-color{ .fade-mixin(blue, green);}

“Arity” for the geeks (and Java and .NET folks)

LESS: Guarded mixins

.back-white{background-color:white;}

.back-black{background-color:black;}

.back-red{background-color:red;}

.mixin (@a) when (@a > 10), (@a < -10){ .back-white;}.mixin (@a) when (@a = 10) and (@a = true){ .back-red;}.mixin (@a) when (@a < 11) and (@a > -11) and not(@a = 10){ .back-black;}

• uses “when” and can use “and” “,” and “not”• can also use the keywords “true” and “false”

LESS: Guarded mixins

@media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.mixin (@a) when (@media = print) { ... }

• Comparitors can be very useful• Eg. Code reuse between media types

LESS: Type checking

.color-mixin (@a) when (isnumber(@a)) { color: @a + #001100;}.color-mixin (@a) when (iscolor(@a)) {

color: @a}h1{ .color-mixin(red);}h2{ .color-mixin(#842210);}

• iscolor• isnumber

• isstring• iskeyword

• isurl

LESS: Unit checking

.mixin (@a) when (ispixel(@a)) {}

.mixin (@a) when (isem(@a)) {}

.mixin (@a) when (ispercentage(@a)) {}

• ispixel • ispercentage • isem

LESS: Colour Functionslighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* than @color

saturate(@color, 10%); // return a color 10% *more* saturated than @colordesaturate(@color, 10%); // return a color 10% *less* saturated than @color

fadein(@color, 10%); // return a color 10% *less* transparent than @colorfadeout(@color, 10%); // return a color 10% *more* transparent than @colorfade(@color, 50%); // return @color with 50% transparency

spin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2); // return a mix of @color1 and @color2

LESS: Math Functions

ceilfloor

roundpercentage

LESS: Extract Colour Properties

hue(@color); saturation(@color); lightness(@color); alpha(@color);

eg.

@old-color:#27BA19;@new-color: hsl(hue(@old-color), 45%, 90%);

LESS: Embedding Strings

• For those of you familiar with XSLT or Ruby• Use curly braces to embed the text• Use tilde ~ to escape strings that require quotes

@base-url: "http://www.maximinc.com/";@green-color: #8dc63f;#header{ background: @ green-color url("@{base-url}images/img.png");}#footer{ filter: ~"alpha(opacity = (@{opacityPercentage}))";}

LESS: Javascripting!!!

• Use backticks to embed your JS in the CSS• Escape strings, embed, interpolate, etc.• I haven’t played with this feature yet, but here’s an

untested example:

@var1: `"LESS ".toLowerCase()`;@var2: `"ooooooh".toUpperCase() + '!'`;@var3: ~`"@{var1: }" + "@{var2: }" + '!'`;

LESS Elements

• .gradient• .bw-gradient• .bordered• .drop-shadow• .rounded• .border-radius• .opacity• .transition-duration• .rotation

• .scale• .transition• .inner-shadow• .box-shadow• .columns• .translate

LESS: Precompilers

LESS needs to be pre-compiled into CSS using…

ORto compile on the fly while developing use…

<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

• simpless• lessphp

• less.app• …others

LESS: SIMPLESS

• SimpLESS compiles less into minified css• works with Twitter bootstrap• self-updates• compiles on the fly (monitored polling)• multi-platform• free• open source

LESS: SIMPLESS

This is what I do…1. I code my LESSS in a separate project2. I let SimpLESS monitor the local file to

compile CSS on the fly3. I commit minified CSS to my main project4. I reference the minified CSS using with the

SVN version tagged on in my html<link media="screen" href=http://www.example.com/css/style.min.css?1994

type="text/css" rel="stylesheet“>

LESS: Eclipse plugin

I personally use the Xtext plugin – here are some install instructions…

http://www.normalesup.org/~simonet/soft/ow/eclipse-less.en.html

You can use the LESS compiler in Eclipse, however I manage all my compilation externally as I also use LESS with .NET and Classic ASP code (yes!)

Useful linksLESS

http://www.lesscss.orgSimpLESS

http://wearekiss.com/simplessLessElements

http://lesselements.comWinnipeg PHP

http://winnipegphp.comTipping Canoe

http://www.tippingcanoe.comDavid Engel

davidengel.dev@gmail.com (developed using LESS)

http://www.maximinc.com