Dallas Drupal Days 2012 - Introduction to less sass-compass

Introduction to Less / Sass / Compass

Presented by Chris Lee@levelten_chris

Prerequisites

● Strong understanding of CSS

● Familiarity with control structures, functions, variables

● Lazy Desire tobe more Efficient

● Familiarity CSS3● Interest in Theming

What's in it for me?... Goals● Understanding of High Level Purpose of

Preprocessing languages

● Learn how to get started

● How this works with Drupal...

Yes, there's a module for that!

Less / Sass / Compass

CSS

Why should i use less/sass?● Web is complex.

No longer simple.

● Front End Performance

● DRY principle

● Frameworks / OOCSS

● Cross-Browser Compatibility

● It's easy!

Gaining Front End Performance

● Reduce HTTP Number of Requests

● Reduce, reuse, and recycle css

● Compress assets

Demonstration: Variables

Create a variable file using sass

open "demo1"

Getting started Less / Sass

1. There's a module for it.

2. CLI: node.js / ruby gems

3. Client Side GUI's

Any other methods? Let us all know!

Method 1: Drupal Modules

● Less http://drupal.org/project/less● Prepro http://drupal.org/project/prepro● Sassy http://drupal.org/project/sassy

Others● Live CSS http://drupal.org/project/live_css● Sass http://drupal.org/project/sass

Method 2: Command Line Processors

● Node js$ npm install less$ sudo apt-get install node-less

● ruby gem

$ gem install sass$ gem install compass

Method 3: Client Side GUIs

SimpLessMac / Winhttp://wearekiss.com/simpless

Method 3: Client Side GUIs

Scout (mac)http://mhs.github.com/scout-app/

Method 3: Client Side GUIs

Compass.appMac / win / linuxhttp://compass.handlino.com/

How does one pick a preprocessor?

● Get Excited! Dive in.

● Figure out workflow

Syntax

Differences between Less / Sass?● Very little differences

● Small syntax issues

● Workflow

● Frameworks / Library advantages

IntroductoryPreprocessor Concepts

● Nested● Mixins● Control Structures● Importing

Same Syntax: Less / Sass / Compass● Nested Structures

// less// @file style.less.cssbody { .header { background: #fc0; }}

// sass / scss// @file style.scssbody { .header { background: #fc0; }}

Same Syntax: Less / Sass / Compass● Importing files

// sass or scss// @file style.scss

@import "foo";@import "foo.scss";@import "http://foo.com/foo;@import url(foo);

// less// @file style.less.css

@import "file";@import 'file.less';@import http://foo.com/foo;@import url(file);

Mixin

"Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins."

- Sass-Lang.com

Mixin

TLDR;

Mixin// Less.border-radius(@r:0px) { -moz-border-radius: @r; -o-border-radius: @r; -khtml-border-radius:@r; -webkit-border-radius:@r; border-radius: @r;}

// Sass@mixin border-radius($r:0px) { -moz-border-radius: $r; -o-border-radius: $r; -khtml-border-radius:$r; -webkit-border-radius:$r; border-radius: $r;}

Mixin// Less.border-radius(@r:0px) { -moz-border-radius: @r; -o-border-radius: @r; -khtml-border-radius:@r; -webkit-border-radius:@r; border-radius: @r;}

// "Invoke" the mixin.myDiv {

.border-radius(2px+2px);}

// Sass@mixin border-radius($r:0px) { -moz-border-radius: $r; -o-border-radius: $r; -khtml-border-radius:$r; -webkit-border-radius:$r; border-radius: $r;}

// Invoke the mixin.myDiv { @include border-radius(2px+2px);}

Mixin: CSS Output.myDiv { -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius:4px; border-radius: 4px;}

WHAT IT ADDS?!@!

2px + 2px = 4px

Lighten / Darkens

// lesslightness (@color, 10%);darkness (@color, 10%);

// scss@include lighten($color, 10%);@include darken($color, 10%);

Sass project files

Random Live Demonstration Time...

- Demo2 - What is a project file- Demo3 - Creating a project with compass

Frameworks

Less Frameworks

● Bootstrap http://twitter.github.com/bootstrap/

● Centagehttp://centage.peruste.net/

Sass Frameworks

● Compass - http://compass-style.org/● Bourbon - http://thoughtbot.com/bourbon/● Foundation - https://github.

com/zurb/foundation

What is compass?

● sass mixin library● sass meta framework● reduce low level tasks

How do i install this?

● Install with a rubygem$ gem install compass

Compass Example: Opacity

@import "compass/css3/opacity"

div.box { $opacity: .9; opacity($opacity);}

Compass Example: Opacity

div.box { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9;}

Compass Example: url helpers

div.box { background: image-url('lolcat-bg.jpg');}

Compass Example: url helpers

div.box {background: 'sites/all/themes/foo/images/lolcat-bg.jpg?4324343';

}

Learn more

Less● http://lesscss.org/ ● http://leafo.net/lessphp/docs/Sass● http://sass-lang.com/● http://sass-lang.com/docs/yardoc/file.

SASS_REFERENCE.htmlCompass● http://compass-style.org/

Questions?

Questions?

Arial 48pt. Google Powerpoint

Questions?

Thanks!

Slides:http://goo.gl/71wK5