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

PechaKucha Less VS Sass

on

  • 2,225 views

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

Statistics

Views

Total Views
2,225
Views on SlideShare
2,153
Embed Views
72

Actions

Likes
6
Downloads
10
Comments
1

3 Embeds 72

http://bologna.grusp.org 68
http://www.linkedin.com 3
http://jfeeds.carsmantra.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

PechaKucha Less VS Sass PechaKucha Less VS Sass Presentation Transcript

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