Dallas Drupal Days 2012

Introduction to css preprocessors.

http://hire.chrisjlee.net

Transcript

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

   View Slide

2. Prerequisites
   ● Strong understanding of
   CSS
   ● Familiarity with control
   structures, functions,
   variables
   ● Lazy Desire to
   be more Efficient
   ● Familiarity CSS3
   ● Interest in Theming
   

   View Slide

3. 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!
   

   View Slide

4. Less / Sass /
   Compass
   CSS
   

   View Slide

5. 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!
   

   View Slide

6. Gaining Front End Performance
   ● Reduce HTTP Number of Requests
   ● Reduce, reuse, and recycle css
   ● Compress assets
   

   View Slide

7. Demonstration: Variables
   Create a variable file using sass
   open "demo1"
   

   View Slide

8. 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!
   

   View Slide

9. 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
   

   View Slide

10. Method 2: Command Line
    Processors
    ● Node js
    $ npm install less
    $ sudo apt-get install node-less
    ● ruby gem
    $ gem install sass
    $ gem install compass
    

    View Slide

11. Method 3: Client Side GUIs
    SimpLess
    Mac / Win
    http:
    //wearekiss.
    com/simpless
    

    View Slide

12. Method 3: Client Side GUIs
    Scout (mac)
    http://mhs.
    github.
    com/scout-app/
    

    View Slide

13. Method 3: Client Side GUIs
    Compass.app
    Mac / win /
    linux
    http://compass.
    handlino.com/
    

    View Slide

14. How does one pick a preprocessor?
    ● Get Excited! Dive in.
    ● Figure out workflow
    

    View Slide

15. Syntax
    

    View Slide

16. Differences between Less / Sass?
    ● Very little differences
    ● Small syntax issues
    ● Workflow
    ● Frameworks / Library advantages
    

    View Slide

17. Introductory
    Preprocessor Concepts
    ● Nested
    ● Mixins
    ● Control Structures
    ● Importing
    

    View Slide

18. Same Syntax: Less / Sass / Compass
    ● Nested Structures
    // less
    // @file style.less.css
    body {
    .header {
    background: #fc0;
    }
    }
    // sass / scss
    // @file style.scss
    body {
    .header {
    background: #fc0;
    }
    }
    

    View Slide

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

    View Slide

20. 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
    

    View Slide

21. Mixin
    TLDR;
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. WHAT IT ADDS?!@!
    

    View Slide

26. 2px + 2px = 4px
    

    View Slide

27. Lighten / Darkens
    // less
    lightness (@color, 10%);
    darkness (@color, 10%);
    // scss
    @include lighten($color, 10%);
    @include darken($color, 10%);
    

    View Slide

28. Sass project files
    Random Live Demonstration Time...
    - Demo2 - What is a project file
    - Demo3 - Creating a project with compass
    

    View Slide

29. Frameworks
    

    View Slide

30. Less Frameworks
    ● Bootstrap
    http://twitter.github.com/bootstrap/
    ● Centage
    http://centage.peruste.net/
    

    View Slide

31. Sass Frameworks
    ● Compass - http://compass-style.org/
    ● Bourbon - http://thoughtbot.com/bourbon/
    ● Foundation - https://github.
    com/zurb/foundation
    

    View Slide

32. 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
    

    View Slide

33. Compass Example: Opacity
    @import "compass/css3/opacity"
    div.box {
    $opacity: .9;
    opacity($opacity);
    }
    

    View Slide

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

    View Slide

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

    View Slide

36. Compass Example: url helpers
    div.box {
    background: 'sites/all/themes/foo/images
    /lolcat-bg.jpg?4324343';
    }
    

    View Slide

37. 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.html
    Compass
    ● http://compass-style.org/
    

    View Slide

38. Questions?
    

    View Slide

39. Questions?
    Arial 48pt. Google
    Powerpoint
    

    View Slide

40. Questions?
    

    View Slide

41. Thanks!
    Slides:
    http://goo.gl/71wK5
    

    View Slide