20013/04/17 20x20                   Less VS Sass                            Mine is Longer...                             ...
Less VS Sass                           2                         WE ALL   STANDARDSmercoledì 17 aprile 13
Less VS Sass                                          3                         Historical Outcomes                       ...
Less VS Sass                                                                 4                         http://lesscss.org/...
FIrst Thing FIrst                                                                       5                                 ...
FIrst Thing FIrst                                                   6                                                     ...
Less VS Sass                                                                              7       §      Mixins: LESS Ele...
Less VS Sass                                                                         8                         “It’s just ...
Less VS Sass                                                                         9                                    ...
Less VS Sass                                                                                   10                         ...
Less VS Sass                                                       11                                                WHY A...
Less VS Sass                                                           12                                                 ...
Less VS Sass                                                                         13                                   ...
Less VS Sass                                                         14                                                   ...
Less VS Sass                                                                            15                                ...
Less VS Sass                                                                   16                                         ...
In the End                                                        17                                         SO? WHICH ONE...
In the End                                                                                     18   GRAVE DANGER YOU ARE I...
In the End                                                                       19      FInal Takeaway      For the most ...
Question Time                                            20                                        Question Time!         ...
Upcoming SlideShare
Loading in...5
×

PechaKucha Less VS Sass

1,892

Published on

A Pechakucha session to briefly explain the difference between LESS and SASS, CSS preprocessors

Published in: Technology, Education
1 Comment
6 Likes
Statistics
Notes
  • you may be interested in https://gist.github.com/chriseppstein/674726 by compass creator chris eppstein
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,892
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

PechaKucha Less VS Sass

  1. 1. 20013/04/17 20x20 Less VS Sass Mine is Longer... Hoang C. Huynh @aetherosmercoledì 17 aprile 13
  2. 2. Less VS Sass 2 WE ALL STANDARDSmercoledì 17 aprile 13
  3. 3. Less VS Sass 3 Historical Outcomes § Fragmentation § Inconsistency § Vendor Captivity § “Wish I Could” Syndrome § Variables § Object Oriented § Inheritance § Functions § Business Logic CSS’ TROUBLESOME YOUTHmercoledì 17 aprile 13
  4. 4. Less VS Sass 4 http://lesscss.org/ http://sass-lang.com/ 2009 - Alexis Sellier 2007 - Hampton Catlin § These are not frameworks nor toolkits. § These are preprocessors, that try to fill the gaps present in the standard CSS development What we are talking about? Code Less, Code Bettermercoledì 17 aprile 13
  5. 5. FIrst Thing FIrst 5 WHY PREPROCESS? § Error Detection Misplaced {}, missing commas, misspelled attributes or inconsistent values § Code Minification Compact of Selector and shorthand values, comments and spaces discard § Code Organization Physical inclusion of files, namespacing, folder organization § Customizationmercoledì 17 aprile 13
  6. 6. FIrst Thing FIrst 6 WHY PREPROCESS? § Write less code and follow DRY principles § Write maintainable code and, hopefully, more readable ( ...it’s not easy to get both... ) § Juggle complexity and bounce it back to who’s “able” to handle it § Power and Flexibilitymercoledì 17 aprile 13
  7. 7. Less VS Sass 7 § Mixins: LESS Elements, Less Mixins § Mixins: GroundworkCSS, Bourbon § Layout: 960, Frameless, Semantic, § Grids: Neat, Gridset, Zen Grids Less Framework, Even.less, Centage § ... § ... § Killer Framework: Compass § Killer App: Twitter Bootstrap § Killer App: Foundation ECOSYSTEM DIFFERENCEmercoledì 17 aprile 13
  8. 8. Less VS Sass 8 “It’s just CSS” “It’s more than CSS” § Declarative style of coding § Imperative style of coding § CSS Friendly Syntax § Compiler Directive § Declare what you want to see § Declare how you want things to be done PHILOSOPHICAL DIFFERENCEmercoledì 17 aprile 13
  9. 9. Less VS Sass 9 Oldies but Goodies § SASS is part of the Ruby family gem install sass mv style.css style.scss § Ruby comes with MacOSX sass --watch style.scss:style.css § SASS has two syntaxes: SCSS & the former SASS $main_color: #FF03DE; $main_color: #FF03DE .content-navigation { .content-navigation border-color: $main_color; border-color: $main_color } No handles, no commas, indentation basedmercoledì 17 aprile 13
  10. 10. Less VS Sass 10 WHY AM I SO POPULAR? § LESS is part of the Javascript family npm install -g less § To compile, Node.JS is required and lessc -x styles.less > styles.css the package is available through NPN § LESS compilers comes in many flavors, even PHP doh! § LESS can run directly on the client browser! <link  rel="stylesheet/less"  type="text/css"  href="styles.less"> <script  src="less.js"  type="text/javascript"></script> ...WHICH IS THE WORST, but Designers seem to like it...mercoledì 17 aprile 13
  11. 11. Less VS Sass 11 WHY AM I SO POPULAR? § LESS is young and is catching up with SASS very fast, fueled by the rapid growth of Node.JS and Bootstrap § The LESS universe is lagging behind a lack of syntactic polishness and fragmentation of modules, add ons and forks, but that it is not definitely a bad thing. § Documentation is more noob friendlymercoledì 17 aprile 13
  12. 12. Less VS Sass 12 Variables @nice-blue: #5B83AD; $nice-blue: #5B83AD; @light-blue: (@nice-blue + #111); $light-blue: ($nice-blue + #111); #header { color: @light-blue; } #header { color: $light-blue; } #header { color: #6c94be; } Winner: TIEmercoledì 17 aprile 13
  13. 13. Less VS Sass 13 Nesting table.hl { table.hl { margin: 2em 0; margin: 2em 0; “&” is the &:hover { &:hover { parent selector text-align: right; text-align: right; } } li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; } } } } } table.hl { table.hl li { margin: 2em 0; font-family: serif; } font-weight: bold; table.hl:hover { font-size: 1.2em; text-align: right; } Winner: SASS }mercoledì 17 aprile 13
  14. 14. Less VS Sass 14 Mixins .bordered(@pix: 2px) { @mixin bordered($pix: 2px) { border-top: dotted 1px black; border-top: dotted 1px black; border-bottom: solid @pix black; border-bottom: solid $pix black; } } #menu a { #menu a { .bordered(); @include bordered(); } } .post a { .post a { .bordered(4px); @include bordered(4px); } } #menu a { .post a { border-top: dotted 2px black; border-top: dotted 2px black; border-bottom: solid 4px black; border-bottom: solid 4px black; } } Winner: TIEmercoledì 17 aprile 13
  15. 15. Less VS Sass 15 Inheritance .module-a { .module-a { color: #123456; color: #123456; } } .module-b {{ .module-b { .module-a(); @extend .module-a; border: 1px solid red; border: 1px solid red; } } LESS 1.4 will support the Extend directive in the same way that SASS do, but as a pseudoclass .module-a { .module-a, .module-b { color: #123456; color: #123456; } } .module-b { .module-b { color: #123456; border: 1px solid red; border: 1px solid red; } Winner: SASS (for now) }mercoledì 17 aprile 13
  16. 16. Less VS Sass 16 Advanced Logic § GUARDED MIXINS § IF ELSE .mixin(params) when (dir=top){ @mixin my-mixin($parameters){ /* Conditional stuff */ @if $my-parameter == value { } /* Conditional stuff */ } } § RECURSION § LOOPS .loop(@index) when (@index &gt; 0) { @for $i from 1 through 10 { (~".my-element:nth-child(@{index})") { animation-name: "load-@{index}"; /* My stuff here */ } } .loop(@index - 1); } .loop (0) {} § CONCATENATION @nbElements: 10; #{$my-selector} { .loop (@nbElements); #{$my-property}: $my-value; § NO CONCATENATION } Winner: SASSmercoledì 17 aprile 13
  17. 17. In the End 17 SO? WHICH ONE SHOULD WE PICK? DOES IT REALLY MATTER? § In a couple of month both preprocessors will be 90% similar § Know your Client and your project, simply pick the one that suits better for thymercoledì 17 aprile 13
  18. 18. In the End 18 GRAVE DANGER YOU ARE IN, IMPATIENT YOU ARE § Learn / Master CSS first, You must § To think re-usable, You have § Build Components not Views You will § K.I.S.S! Presentation not logic CSS is! § Nice SASS / LESS sources can compile in ugly code! #dettaglioIniziative #content .vscroller .days li .month .list .activity .hour { font-weight: 700; line-height: 50px; font-size: 18px; float: left; }mercoledì 17 aprile 13
  19. 19. In the End 19 FInal Takeaway For the most of the average designer / developer, the general knowledge of a preprocessor should really suffice, so in the end is just a matter of preferences. Don’t get cocky and pick the right tool! Don’t forget to check sometimes the new hero in town, he may really surprise you :) border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius 5pxmercoledì 17 aprile 13
  20. 20. Question Time 20 Question Time! ...We will be using Boostrap+Sass...mercoledì 17 aprile 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×