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

1. 20013/04/17
20x20 Less VS Sass
Mine is Longer...
Hoang C. Huynh
@aetheros
mercoledì 17 aprile 13

2. Less VS Sass 2
WE ALL STANDARDS
mercoledì 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 YOUTH
mercoledì 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 Better
mercoledì 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
§ Customization
mercoledì 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 Flexibility
mercoledì 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 DIFFERENCE
mercoledì 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 DIFFERENCE
mercoledì 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 based
mercoledì 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 friendly
mercoledì 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: TIE
mercoledì 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: TIE
mercoledì 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: SASS
mercoledì 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 thy
mercoledì 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 5px
mercoledì 17 aprile 13

20. Question Time 20
Question Time!
...We will be using Boostrap+Sass...
mercoledì 17 aprile 13