Dallas Drupal Days 2012  - Introduction to less sass-compass
Upcoming SlideShare
Loading in...5

Dallas Drupal Days 2012 - Introduction to less sass-compass






Total Views
Views on SlideShare
Embed Views



1 Embed 51

http://hire.chrisjlee.net 51



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Dallas Drupal Days 2012  - Introduction to less sass-compass Dallas Drupal Days 2012 - Introduction to less sass-compass Presentation Transcript

    • Introduction toLess / Sass / CompassPresented byChris Lee@levelten_chris
    • Prerequisites ● Strong understanding of CSS ● Familiarity with control structures, functions, variables ● Lazy Desire to be more Efficient ● Familiarity CSS3 ● Interest in Theming
    • Whats in it for me?... Goals● Understanding of High Level Purpose of Preprocessing languages● Learn how to get started● How this works with Drupal... Yes, theres a module for that!
    • CSSLess / Sass /Compass
    • Why should i use less/sass?● Web is complex. No longer simple.● Front End Performance● DRY principle● Frameworks / OOCSS● Cross-Browser Compatibility● Its easy!
    • Gaining Front End Performance● Reduce HTTP Number of Requests● Reduce, reuse, and recycle css● Compress assets
    • Demonstration: VariablesCreate a variable file using sassopen "demo1"
    • Getting started Less / Sass1. Theres a module for it.2. CLI: node.js / ruby gems3. Client Side GUIsAny 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/sassyOthers● Live CSS http://drupal.org/project/live_css● Sass http://drupal.org/project/sass
    • Method 2: Command LineProcessors● Node js $ npm install less $ sudo apt-get install node-less● ruby gem $ gem install sass $ gem install compass
    • Method 3: Client Side GUIsSimpLessMac / Winhttp://wearekiss.com/simpless
    • Method 3: Client Side GUIsScout (mac)http://mhs.github.com/scout-app/
    • Method 3: Client Side GUIsCompass.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 // sass / scss// @file style.less.css // @file style.scssbody { body { .header { .header { background: #fc0; background: #fc0; } }} }
    • Same Syntax: Less / Sass / Compass● Importing files// less // sass or scss// @file style.less.css // @file style.scss@import "file"; @import "foo";@import file.less; @import "foo.scss";@import http://foo. @import "http://foo.com/foo;com/foo; @import url(foo);@import url(file);
    • Mixin"Mixins allow you to define styles that can bere-used throughout the stylesheet withoutneeding to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules,and anything else allowed elsewhere in a Sassdocument. They can even take argumentswhich allows you to produce a wide variety ofstyles with very few mixins."- Sass-Lang.com
    • Mixin TLDR;
    • Mixin// Less // Sass.border-radius(@r:0px) { @mixin border-radius($r:0px) { -moz-border-radius: @r; -moz-border-radius: $r; -o-border-radius: @r; -o-border-radius: $r; -khtml-border-radius:@r; -khtml-border-radius:$r; -webkit-border-radius:@r; -webkit-border-radius:$r; border-radius: @r; border-radius: $r;} }
    • Mixin// Less // Sass.border-radius(@r:0px) { @mixin border-radius($r:0px) { -moz-border-radius: @r; -moz-border-radius: $r; -o-border-radius: @r; -o-border-radius: $r; -khtml-border-radius:@r; -khtml-border-radius:$r; -webkit-border-radius:@r; -webkit-border-radius:$r; border-radius: @r; border-radius: $r;} }// "Invoke" the mixin // Invoke the mixin.myDiv { .myDiv { .border-radius(2px+2px); @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 filesRandom Live Demonstration Time...- Demo2 - What is a project file- Demo3 - Creating a project with compass
    • Frameworks
    • Less Frameworks● Bootstrap http://twitter.github.com/bootstrap/● Centage http://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 tasksHow 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: Opacitydiv.box { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); opacity: 0.9;}
    • Compass Example: url helpersdiv.box { background: image-url(lolcat-bg.jpg);}
    • Compass Example: url helpersdiv.box { background: sites/all/themes/foo/images /lolcat-bg.jpg?4324343;}
    • Learn moreLess● 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