dallas drupal days 2012 - introduction to less sass-compass

41
Introduction to Less / Sass / Compass Presented by Chris Lee @levelten_chris

Upload: chris-lee

Post on 27-Jan-2015

118 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Dallas Drupal Days 2012  - Introduction to less sass-compass

Introduction to Less / Sass / Compass

Presented by Chris Lee@levelten_chris

Page 2: Dallas Drupal Days 2012  - Introduction to less sass-compass

Prerequisites

● Strong understanding of CSS

● Familiarity with control structures, functions, variables

● Lazy Desire tobe more Efficient

● Familiarity CSS3● Interest in Theming

Page 3: Dallas Drupal Days 2012  - Introduction to less sass-compass

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!

Page 4: Dallas Drupal Days 2012  - Introduction to less sass-compass

Less / Sass / Compass

CSS

Page 5: Dallas Drupal Days 2012  - Introduction to less sass-compass

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!

Page 6: Dallas Drupal Days 2012  - Introduction to less sass-compass

Gaining Front End Performance

● Reduce HTTP Number of Requests

● Reduce, reuse, and recycle css

● Compress assets

Page 7: Dallas Drupal Days 2012  - Introduction to less sass-compass

Demonstration: Variables

Create a variable file using sass

open "demo1"

Page 8: Dallas Drupal Days 2012  - Introduction to less sass-compass

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!

Page 9: Dallas Drupal Days 2012  - Introduction to less sass-compass

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

Page 10: Dallas Drupal Days 2012  - Introduction to less sass-compass

Method 2: Command Line Processors

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

● ruby gem

$ gem install sass$ gem install compass

Page 11: Dallas Drupal Days 2012  - Introduction to less sass-compass

Method 3: Client Side GUIs

SimpLessMac / Winhttp://wearekiss.com/simpless

Page 13: Dallas Drupal Days 2012  - Introduction to less sass-compass

Method 3: Client Side GUIs

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

Page 14: Dallas Drupal Days 2012  - Introduction to less sass-compass

How does one pick a preprocessor?

● Get Excited! Dive in.

● Figure out workflow

Page 15: Dallas Drupal Days 2012  - Introduction to less sass-compass

Syntax

Page 16: Dallas Drupal Days 2012  - Introduction to less sass-compass

Differences between Less / Sass?● Very little differences

● Small syntax issues

● Workflow

● Frameworks / Library advantages

Page 17: Dallas Drupal Days 2012  - Introduction to less sass-compass

IntroductoryPreprocessor Concepts

● Nested● Mixins● Control Structures● Importing

Page 18: Dallas Drupal Days 2012  - Introduction to less sass-compass

Same Syntax: Less / Sass / Compass● Nested Structures

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

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

Page 19: Dallas Drupal Days 2012  - Introduction to less sass-compass

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);

Page 20: Dallas Drupal Days 2012  - Introduction to less sass-compass

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

Page 21: Dallas Drupal Days 2012  - Introduction to less sass-compass

Mixin

TLDR;

Page 22: Dallas Drupal Days 2012  - Introduction to less sass-compass

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;}

Page 23: Dallas Drupal Days 2012  - Introduction to less sass-compass

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);}

Page 24: Dallas Drupal Days 2012  - Introduction to less sass-compass

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

Page 25: Dallas Drupal Days 2012  - Introduction to less sass-compass

WHAT IT ADDS?!@!

Page 26: Dallas Drupal Days 2012  - Introduction to less sass-compass

2px + 2px = 4px

Page 27: Dallas Drupal Days 2012  - Introduction to less sass-compass

Lighten / Darkens

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

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

Page 28: Dallas Drupal Days 2012  - Introduction to less sass-compass

Sass project files

Random Live Demonstration Time...

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

Page 29: Dallas Drupal Days 2012  - Introduction to less sass-compass

Frameworks

Page 30: Dallas Drupal Days 2012  - Introduction to less sass-compass

Less Frameworks

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

● Centagehttp://centage.peruste.net/

Page 31: Dallas Drupal Days 2012  - Introduction to less sass-compass

Sass Frameworks

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

com/zurb/foundation

Page 32: Dallas Drupal Days 2012  - Introduction to less sass-compass

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

Page 33: Dallas Drupal Days 2012  - Introduction to less sass-compass

Compass Example: Opacity

@import "compass/css3/opacity"

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

Page 34: Dallas Drupal Days 2012  - Introduction to less sass-compass

Compass Example: Opacity

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

Page 35: Dallas Drupal Days 2012  - Introduction to less sass-compass

Compass Example: url helpers

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

Page 36: Dallas Drupal Days 2012  - Introduction to less sass-compass

Compass Example: url helpers

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

}

Page 38: Dallas Drupal Days 2012  - Introduction to less sass-compass

Questions?

Page 39: Dallas Drupal Days 2012  - Introduction to less sass-compass

Questions?

Arial 48pt. Google Powerpoint

Page 40: Dallas Drupal Days 2012  - Introduction to less sass-compass

Questions?

Page 41: Dallas Drupal Days 2012  - Introduction to less sass-compass

Thanks!

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