• Like
PechaKucha Less VS Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

PechaKucha Less VS Sass

  • 1,759 views
Published

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

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

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • you may be interested in https://gist.github.com/chriseppstein/674726 by compass creator chris eppstein
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,759
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
13
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 20013/04/17 20x20 Less VS Sass Mine is Longer... Hoang C. Huynh @aetherosmercoledì 17 aprile 13
  • 2. Less VS Sass 2 WE ALL STANDARDSmercoledì 17 aprile 13
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Question Time 20 Question Time! ...We will be using Boostrap+Sass...mercoledì 17 aprile 13