SASS is more than LESS

1,083 views
992 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,083
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Give a general explanation about the basic concept of CSS preprocessing
  • Give a specific example of working with the UI style guide (as defined in the LiveEngage working process with UI people)
  • Give a simple explanation about the basic work with CSS preprocessing before it was called like this – give the example of the .NET request handlers and PHP from 2006
  • Remember to explain that the adoption can be done in steps
  • Adoption should be done carefully and in steps
  • General explanation about the work flowRemember to give a small overview about the syntax of both preprocessors and the file extensionsExplain what we are going to see in the examples
  • Explain the idea behind partial properties
  • Remember to state that mixins can receive parameters from the caller
  • Explain why client side preprocessing should not be used (although its appeal)Give a small overview of each preprocessor history from my experience
  • Show what the meaning of efficiency in this example
  • Explain the additional functionality which compass gives
  • Explain the exampleflow and why SASStreats it in a weird way
  • Talk about the presentation given a year a go and about the process of making it
  • Explain the full process we will have for development and deployment
  • SASS is more than LESS

    1. 1. CSS Pre-ProcessingItai Koren, March 2013DISCLOSURE:• Ive worked with LESS for two years and switched to SASS.• Ive worked with SASS for 2-3 month.• Those slides are based entirely on a presentation I gave about a year ago explaining why I chose SASS over LESS
    2. 2. SASS is more than LESSItai Koren, February 2012DISCLOSURE:• Ive worked with LESS for two years and switched to SASS.• Ive worked with SASS for 2-3 month.• Those slides are based entirely on a presentation I gave about a year ago explaining why I chose SASS over LESS
    3. 3. CSS Pre-ProcessingItai Koren, March 2013DISCLOSURE:• Ive worked with LESS for two years and switched to SASS.• Ive worked with SASS for 2-3 month.• Those slides are based entirely on a presentation I gave about a year ago explaining why I chose SASS over LESS
    4. 4. Agenda • What are CSS preprocessors? • Why Use a CSS Preprocessor? • What is the Catch (or Possible Issues)? • How Do CSS Preprocessors Work and what can it do for us (basic examples)? • SASS or LESS? • Should We Try It?
    5. 5. What are CSS preprocessors?• Converts code written in the preprocessed language into the same old CSS• Not bound by the limitations of CSS because they aren’t CSS• The preprocessed language gives much more functionality than CSS• Popular CSS preprocessors are SASS, LESS, and Stylus (Here I’ll only refers to the first two which are the most popular)
    6. 6. Why Use a CSS Preprocessor?• Not bound by the limitations of CSS because they aren’t CSS (sounds familiar?)• Developers looks for more abstraction• We like variables, conditions and methods• It allows us to write more flexible and maintainable CSS• Will make our CSS DRY (Dont Repeat Yourself) as opposed to WET (Write Everything Twice)
    7. 7. What’s the Catch (or Possible Issues)?• All developers in the project must use the same preprocessor• The preprocessed outputted files should not be edited directly• Development process should include a simple preprocessing ability• WARNINNG! Developers who started working with CSS preprocessor will never agree to go backThis is it, and therefore, many of the medium/large scale projectstoday use a CSS Preprocessor – Should we?
    8. 8. But we must rememberthough that …
    9. 9. How Do CSS Preprocessors Work? • Developers use the preprocessor language to create their structured CSS • The preprocessor processes the created files and outputs a CSS • The produced CSS works as ordinary CSS Stop bullshit and show us some code
    10. 10. What can it do for us (basic examples)? Variables - changing the value of a variable once is much more maintainable than changing the many instances of it’s value spread over a CSS file /* -- .scss -- */ $color: #efefff; body {background: $color;} /* -- .less -- */ @color: #efefef; body {background: @color;} /* -- resulting css -- */ body {background: #efefff;}
    11. 11. What can it do for us (basic examples)? Interpolation - extends variables in that you aren’t limited to the values of CSS properties /* -- .scss -- */ $side: left; border-#{$side}: 1px solid #000; /* -- resulting css -- */ border-left: 1px solid #000; /* -- .less -- */ @images-url: "http://example.com"; background-image: url("@{images-url}/images/bg.png"); /* -- resulting css -- */ background-image: url("http://myexample.com/images/bg.png");
    12. 12. What can it do for us (basic examples)? Math – Operations, animations, moving towards responsive design and more /* -- .scss -- */ $navbar-width: 700px; $items: 7; #navbar li {width: $navbar-width/$items - 10px;} /* -- resulting css -- */ #navbar li {width: 90px} /* -- .less -- */ @base-color: #111; #header {color: @base-color * 5;} /* -- resulting css -- */ #header {color: #555;}
    13. 13. What can it do for us (basic examples)? Mixins - allows easy reuse of blocks of code /* -- .scss -- */ @mixin rounded-corners { $radius: 5px; border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } #navbar li { @include rounded-corners; } #footer { @include rounded-corners; }
    14. 14. What can it do for us (basic examples)? Mixins - allows easy reuse of blocks of code (Continue) /* -- .less -- */ .rounded-corners { @radius: 5px; border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header {.rounded-corners;} #footer { .rounded-corners;}
    15. 15. What can it do for us (basic examples)? Mixins - allows easy reuse of blocks of code (Continue) /* -- resulting css -- */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
    16. 16. What can it do for us (basic examples)? Nesting - Allow nested formatting /* -- .scss or .less -- */ #navbar { width: 70%; height: 30px; ul { list-style: none; } li { float: right; a { text-decoration: none; } &:hover { text-decoration: underline; } } } /* -- resulting css -- */ #navbar {width: 70%; height: 30px;} #navbar ul {list-style: none;} #navbar li {float: right;} #navbar li a {text-decoration: none;} #navbar li a:hover {text-decoration: underline;}
    17. 17. SASS or LESS? Here are some facts first:• LESS has a client side JavaScript implementation, which should never be used for production (Example)• SASS (Syntactically Awesome Stylesheets) is a rubygem (package) - Since 2006 (influenced by YAML)• LESS (Leaner CSS) was a rubygem but converted to JavaScript (nodejs). Has also a PHP implementation (LessPHP) - since 2009 (influenced by SASS)
    18. 18. SASS or LESS?• We already know that preprocessing is probably good for us :)• It also can define a good working process with UI peopleSo now, Which CSS Preprocessor Is better? Lets see..
    19. 19. SASS or LESS? LESS is easier to learn BUT.... SASS has conditional statements (LESS doesnt)/* -- .scss -- */@mixin my-mixin($parameters) { /* Basic stuff here */ @if $direction == top { /* Conditional stuff here */ }}
    20. 20. SASS or LESS? SASS has loop statements (LESS doesnt)/* -- .scss -- */@for $i from 1 through 10 { /* My stuff here */ .my-element:nth-child($i) { animation-name: loading-$i; }}
    21. 21. SASS or LESS? SASS extends more efficient than LESS/* -- .less -- */.module-less_b { .module-less_a(); /* Copies everything from .module-a down here */}.module-sass_b { /* Some unique styling */ @extend .module-a;}/* -- resulting css -- */.module-less_a { /* A bunch of stuff */}.module-less_b { /* Same bunch of stuff */ /* + Some unique styling */}.module-sass_a, .module-sass_b { /* A bunch of stuff */}.module-sass_b { /* Some unique styling */}
    22. 22. SASS or LESS? BUT the winning argument is that SASS has COMPASS, LESS doesn’tCompass is a collection of helpful tools and "battle-tested best practices” forSASSSASS is much more robust than LESS and this what makes Compasspossible (LESS does not have a similar solution)
    23. 23. SASS or LESS? COMPASS has a mixin called background. Its so robust, you can pass whatever you want and it will output what you need/* -- .scss -- */.babam { @include background( image-url("foo.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px) );}/* -- resulting css -- */.babam { background: url(/foo.png), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff)); background: url(/foo.png), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px); background: url(/foo.png), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px); background: url(/foo.png), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff100px); background: url(/foo.png), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px); background: url(/foo.png), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff100px);}
    24. 24. SASS or LESS? One weird thing in SASS, is the way variable scope is treated$color: black;.scoped { $color: white; color: $color;}.unscoped { // LESS = black (global) // SASS = white (overwritten by local) color: $color;} Not so intuitive but acceptable
    25. 25. Stats (always nice to look at) 2012/02/03 2013/03/09Number of open issues on 392 98LESSNumber of open issues on 104 68SASS 272 178Pending pull requests on 86 6LESSPending pull requests on 32 2SASS 69 22Number of commits in the 11 95last two months in LESSNumber of commits in the 48 20last two months in SASS 31 10Number of members in > 1000LESS networkNumber of members in < 500SASS network < 500
    26. 26. Should We Try It?
    27. 27. Should We Try It? So….• We should use both, SASS & COMPASS• We should have a solution for development phase (file monitoring - IDEA Plugin? External? Scout? There is even a firebug extension for FF)• We should have a solution for the build phase (probably using GRUNT to run the SASS preprocessor)
    28. 28. Further Resources• http://coding.smashingmagazine.com/2011/09/09/an- introduction-to-less-and-comparison-to-sass/• http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs- less-vs-stylus-a-preprocessor-shootout/• http://thesassway.com/• http://thesassway.com/beginner/getting-started-with-sass-and- compass• http://thesassway.com/advanced/pure-sass-functions• http://sass-lang.com/• http://www.manning.com/netherland/SaCiA_meap_ch01.pdf
    29. 29. Thank You

    ×