{ CSS Preprocessing }With LESS & Sass

By: Brady Sammonsbradysammons.com | brady@brightroll.com | @soulrider911

{ Terms }

{Preprocessing}Preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a preprocessed language, then compiling the code to pure CSS syntax that we are all use to.

{ Compile }A compiler is a computer program(s) that transforms source code written in a programming language (the source language) into another computer language (the target language).

{ Sass }Syntactically Awesome Stylesheets - Sass is an extension of CSS, adding nested rules, variables, mixins, operators, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass is based in Ruby

Designed by Hampton Catlin developed by Nathan Weizenbaum – 2007

{ LESS }Write less do more - Less language provides the following mechanisms: variables, nesting, mixins, operators and functions; then converted into standard css via javascript or an application. Less is based in javascript.

Designed by Alexis Sellier 2009, was influenced by SASS.

{ How Does it Work? }

{ The Machine }

LESS / SASS Metalanguage Document Ruby / JS Output CSS

MR. COMPILER

{ Who Cares? }

{ A Few Reasons Why }• It Saves time

• This is what CSS should have been to begin with

• Makes your CSS less repetitive (DRY)

• Easier to maintain

• Easier to read

• Make your websites look better

• More fun to code

• Extendable - Compass, LessHat

{ Possible Deterrents }• Change of workflow

• Another syntax to learn

• Rely’s upon a compiler software

• Harder to debug

• Less documentation that CSS alone

• Don’t know how to set it up

{ Differences }@ LESS VS $ Sass

{ Example } Sass $

$ltgreen: #79c777;

#header { Font-Size: 1.1em; h2 { color: $ltgreen; }}

LESS @

@ltgreen: #79c777;

#header { Font-Size: 1.1em; h2 { color: @ltgreen; }}

#header { Font-Size: 1.1em;}#header h2 { color: #79c777;}

CSS (compiled)

{ Comparison }

SASS ($)LESS (@)

Operators#header{ width: (@headerW - 50) * 2;}

#header{ width: ($headerW - 50) * 2;}

Frameworks

Language Base

LESSHat, LESS ELEMENTS

Javascript (originally Ruby)

COMPASS

Ruby

Functions lighten(#ff0000, 10%);Saturate(#ff0000, 20%);

lighten(#ff0000, 10%);Saturate(#ff0000, 20%);

Mixins@mixin ÁXLG%R[{ width: 50%; ER[�VL]LQJ: ERUGHU�ER[;}

�ÁXLG%R[{ width: 50%; ER[�VL]LQJ: ERUGHU�ER[;}

Parametric Mixins

�URXQGHG(#UDGLXV���px){ �ZHENLW�ERUGHU�UDGLXV: #UDGLXV; �PR]�ERUGHU�UDGLXV: #UDGLXV; ERUGHU�UDGLXV: #UDGLXV;}

#PL[LQ�URXQGHG(�UDGLXV���px){ �ZHENLW�ERUGHU�UDGLXV: �UDGLXV; �PR]�ERUGHU�UDGLXV: �UDGLXV; ERUGHU�UDGLXV: �UDGLXV;}

Variables @plainRed: #ff0000;#VRIW%OXH: #bce7f3;

$plainRed: #ff0000;�VRIW%OXH: #bce7f3;

{ Compiling Apps }

LESS SASSBOTH

Less.app Codekit

Fire.app

Scout

Livereload

{ Some Live Code }

{ Game On }