CSS Preprocesser Madness

LESS/SCSS/Compass/Bootstrap

Mario NobleCharles Mata

About Us

Because you may become crazy for it.Or over it.

Or maybe just watching this "Powerpoint" will drive you insane.

Why Madness?

Preprocessors AKA - The "People's Patch"

Our alternative to the cross browser wars.At least for the time being...

Learn CSS and good practices first

Preprocessors are not a replacement for good coding, planning and design.

What is preprocessing?

Preprocessing is essentially creating the equivalent of a Photoshop file or a suped up mailing template for your css.

It gives you added umph to your work.

Sometimes making it easier.Occasionally it might be overkill.

Why do it?

Do you like to type the same thing over and over?Do you enjoy trying to hunt down a tiny bit of code somewhere in thousands of lines of code and then using find and replace hoping it'll work?

No?

Use preprocessing.

Most of all - DRY practices

Don't Repeat Yourself

Other reasons

● CSS 3 browser prefixes● Responsive design● Other people are using it, so you want to

have a clue.● Efficiency● Better organization● Faster sites and better SEO

Disadvantages

● Learning curve● Team Maintenance● Yet another layer● Code bloat● Selectoritis

Methods and Approaches

● SASS/SCSS● LESS● Stylus● cleverCSS● cssCrush● prefixer (http://prefixr.com/)● force browser to interpret PHP as CSS

We're going over the two most popular preprocessors tonight

LESS and SASS/SCSS

We'll be glossing over some stuff in the interest of time and clarity

Which is best?

Let's go over what they share

Each of them now share most of each others capabilities with some minor differences in syntax.

The following examples are from Chris Eppstein's gits on: https://gist.github.com/674726

Thanks Chris!

Variables (placeholders)

Sass | Less-----------------+-----------------$color: red; | @color: red;div { | div { color: $color; | color: @color;} | }

Becomesdiv { color: #ff0000; }

Nesting (outlining)Sass | Less-------------------+-----------------p { | p { a { | a { color: red; | color: red; &:hover { | &:hover { color: blue; | color: blue; } } }} }

Becomes p a {color: red;} p a:hover {color: blue;}

Mixins (mini-templates)Sass | Less----------------------------------+----------------------------------@mixin bordered { | .bordered { border-top: dotted 1px black; | border-top: dotted 1px black; border-bottom: solid 2px black; | border-bottom: solid 2px black;} | } | #menu a { | #menu a { @include bordered; | .bordered;} | }

Becomes.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}#menu a { border-top: dotted 1px black; border-bottom: solid 2px black;}

Mixins with arguments (adverbs/adjectives)

Sass | Less----------------------------------+----------------------------------@mixin bordered($width: 2px) { | .bordered(@width: 2px) { border: $width solid black; | border: @width solid black;} | } | #menu a { | #menu a { @include bordered(4px); | .bordered(4px);} | }

Becomes#menu a { border: 4px solid #000000;}

Numbers

Sass:

1cm * 1em => 1 cm * em2in * 3in => 6 in * in(1cm / 1em) * 4em => 4cm2in + 3cm + 2pc => 3.514in3in / 2in => 1.5

Less:

1cm * 1em => Error2in * 3in => 6in(1cm / 1em) * 4em => Error2in + 3cm + 2pc => Error3in / 2in => 1.5in

Imports (Get that there file!)

@import "somefile.less";@import "somefile";

@import "somefile.scss";@import "somefile";

@import "somedirectory/somefile.scss";

Interpolation (stick it in there)SCSS style

/* style.scss */

$side: top;$radius: 10px;

.rounded- { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius;}

LESS style

@base-url: "http://assets.fnord.com";

background-image: url("@{base-url}/images/bg.png");

Becomes:

background-image: url("http://assets.fnord.com/images/bg.png");.someclass { color: #333;}

Escaping (take it literally)LESS.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}SASS.class { filter: #{"'ms:alwaysHasItsOwnSyntax.For.Stuff()'"};}

Becomes: .class {filter: ms:alwaysHasItsOwnSyntax.For.Stuff();}

Comments

Both LESS and SCSS use the same comment structure.

// is a note in the authoring file

/* some note */ is published to the compiled file.

@media query tweakingLESS (for SASS/SCSS replace @ with $ for variables)

@break-small: 320px;@break-large: 1200px;

.profile-pic { float: left; width: 250px; @media screen and (max-width: @break-small) { width: 100px; float: none; } @media screen and (min-width: @break-large) { float: right; }}

Becomes:

.profile-pic { float: left; width: 250px;}@media screen and (max-width: 320px) { .profile-pic { width: 100px; float: none; }}@media screen and (min-width: 1200px) { .profile-pic { float: right; }}

Differences

As with anything, there are advantages and disadvantages of going with various options.

LESS and SASS are no different.

Or rather they are in some ways...

Extra features of SASS/SCSS

● Can properly "extend" other classes.● True if, for, while and each control directives

(Logic)● Global scoping of variables● Compass (sprites)● Origin line reporting● Good Rails integration● Various output styles● Real functions that return values

Extra features of LESS

● Namespacing● Guards and Pattern Matching● Easy compile "on the fly" with a single

JavaScript file.● Variables as constants● Twitter Bootstrap● Usual scope practices● JavaScript evaluation

To compile locally or on the server?

Considerations:

PerformanceCoordinationCachingServer install

Let's demo some Bootstrap n' Stuff!

Go Charles go!

Hands on part!Let's do LESS first

Get the example material or use your ownhttp://files.meetup.com/1962521/basicHtmlCss.zip

Get the basic jshttp://lesscss.org - bonus points - download twitter bootstrap

Get a complierMac OSX http://incident57.com/less/Windows http://winless.org/Linux/Mac/PC http://wearekiss.com/simpless

Get an editor or download the code hintershttp://www.sublimetext.com/

Already have the LESS stuff?To install SASS/SCSS

Go here: http://sass-lang.com/tutorial.htmlDownload the Windows Installer if you're on Windows.http://rubyinstaller.org/After that, go to http://compass-style.org/install/Follow instructions to install both SASS and Compass

Download either Scouthttp://mhs.github.com/scout-app/Compass app is good too. Just paid.

Configure your editorI recommend SublimeText along with the Package Installer to install SCSS/LESS code hinting.

"Converting" your existing CSS

Really just nests it.

LEASThttp://toki-woki.net/p/least/

SASS# Convert Sass to SCSS$ sass-convert style.css style.scss

LESS useful tools if using the js to compile.After you put this into your files:<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>Put this after your file name in the url:#!watchChrome users: --allow-file-access-from-files in shortcut or use a local servermac : terminal ; open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Compiling

You can use tools or the command line.

SCSS users may need to delve into their config.rb file or just use the tools.

LESS users might just want to use the tools to setup publish paths.

@myvariable or $myvariable

Let's have fun with variables

// and /* */

Comments

@mixin mymixin { }@include mymixin { }

.somemixin { }.anotherclass { .somemixin }

Mixins

@mixin mymixin($hello); @include mymixin(10px);

.somemixin(@hello).somemixin (10px);

Mixins with parameters

width: $navbar-width/$items - 10px;

color: @base-color * 3;

Numbers

border-#{$side}-radius: $radius;

border-@{side}-radius: $radius;

Interpolation

Gotchas

LESS

Keep your import structure flat.

SCSS

Watch out for imports with .less or not.

Congratz!!!! You has mad skillz nowz!

Q&A