20013/04/17
Mine is Longer...Less VS Sass
Hoang C. Huynh@aetheros
20x20
mercoledì 17 aprile 13
Less VS Sass 2
WE ALL STANDARDS
mercoledì 17 aprile 13
Less VS Sass 3
CSS’ TROUBLESOME YOUTH
Historical Outcomes§ Fragmentation§ Inconsistency§ Vendor Captivity§ “Wish I Could” Syndrome
§ Variables§ Object Oriented§ Inheritance§ Functions§ Business Logic
mercoledì 17 aprile 13
2009 - Alexis Sellier
Less VS Sass 4
What we are talking about?
§ These are not frameworks nor toolkits.§ These are preprocessors, that try to fill the gaps
present in the standard CSS development
http://sass-lang.com/http://lesscss.org/2007 - Hampton Catlin
Code Less, Code Better
mercoledì 17 aprile 13
FIrst Thing FIrst 5
WHY PREPROCESS?
§ Error DetectionMisplaced {}, missing commas, misspelled attributes or inconsistent values
§ Code MinificationCompact of Selector and shorthand values, comments and spaces discard
§ Code OrganizationPhysical inclusion of files, namespacing, folder organization
§ Customization
mercoledì 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 Flexibility
mercoledì 17 aprile 13
Less VS Sass 7
§ Mixins: LESS Elements, Less Mixins§ Layout: 960, Frameless, Semantic,
Less Framework, Even.less, Centage§ ...§ Killer App: Twitter Bootstrap
ECOSYSTEM DIFFERENCE
§ Mixins: GroundworkCSS, Bourbon§ Grids: Neat, Gridset, Zen Grids§ ...§ Killer Framework: Compass§ Killer App: Foundation
mercoledì 17 aprile 13
Less VS Sass 8
PHILOSOPHICAL DIFFERENCE
“It’s just CSS” “It’s more than CSS”
§ Declarative style of coding§ CSS Friendly Syntax§ Declare what you want to see
§ Imperative style of coding§ Compiler Directive§ Declare how you want things to be
done
mercoledì 17 aprile 13
Less VS Sass 9
Oldies but Goodies
§ SASS is part of the Ruby family§ Ruby comes with MacOSX
gem install sass mv style.css style.scss sass --watch style.scss:style.css
§ SASS has two syntaxes: SCSS & the former SASS
$main_color: #FF03DE;
.content-navigation { border-color: $main_color;}
$main_color: #FF03DE
.content-navigation border-color: $main_color
No handles, no commas, indentation based
mercoledì 17 aprile 13
Less VS Sass 10
WHY AM I SO POPULAR?
§ 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...
§ LESS is part of the Javascript family§ To compile, Node.JS is required and
the package is available through NPN
npm install -g lesslessc -x styles.less > styles.css
§ LESS compilers comes in many flavors, even PHP doh!
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 friendly
mercoledì 17 aprile 13
Less VS Sass 12
Variables
@nice-blue: #5B83AD;@light-blue: (@nice-blue + #111);
#header { color: @light-blue; }
$nice-blue: #5B83AD;$light-blue: ($nice-blue + #111);
#header { color: $light-blue; }
#header { color: #6c94be; }
Winner: TIE
mercoledì 17 aprile 13
Less VS Sass 13
Nesting
Winner: SASS
table.hl { margin: 2em 0; &:hover { text-align: right; }li { font: { family: serif; weight: bold; }}
}
table.hl { margin: 2em 0;}table.hl:hover { text-align: right;}
table.hl li { font-family: serif; font-weight: bold; font-size: 1.2em;}
table.hl { margin: 2em 0; &:hover { text-align: right; }li {
font-family: serif; font-weight: bold;
}}
“&” is theparent selector
mercoledì 17 aprile 13
Less VS Sass 14
Mixins
.bordered(@pix: 2px) { border-top: dotted 1px black; border-bottom: solid @pix black;}#menu a { .bordered();}.post a { .bordered(4px);}
@mixin bordered($pix: 2px) { border-top: dotted 1px black; border-bottom: solid $pix black;}#menu a { @include bordered();}.post a { @include bordered(4px);}
#menu a { border-top: dotted 2px black; border-bottom: solid 4px black;}
.post a { border-top: dotted 2px black; border-bottom: solid 4px black;}
Winner: TIE
mercoledì 17 aprile 13
Less VS Sass 15
Inheritance
Winner: SASS (for now)
.module-a { color: #123456;}.module-b {{ .module-a(); border: 1px solid red;}
.module-a { color: #123456;}.module-b {
@extend .module-a;border: 1px solid red;
}
.module-a, .module-b { color: #123456;}.module-b { border: 1px solid red;}
.module-a { color: #123456;}.module-b {color: #123456;border: 1px solid red;
}
LESS 1.4 will support the Extend directivein the same way that SASS do, but as a pseudoclass
mercoledì 17 aprile 13
Less VS Sass 16
Advanced Logic
Winner: SASS
§ GUARDED MIXINS.mixin(params) when (dir=top){ /* Conditional stuff */}
§ RECURSION.loop(@index) when (@index > 0) { (~".my-element:nth-child(@{index})") { animation-name: "load-@{index}"; } .loop(@index - 1);}.loop (0) {}@nbElements: 10;.loop (@nbElements);
§ NO CONCATENATION
§ IF ELSE@mixin my-mixin($parameters){ @if $my-parameter == value { /* Conditional stuff */ }}§ LOOPS@for $i from 1 through 10 {
/* My stuff here */}
§ CONCATENATION#{$my-selector} { #{$my-property}: $my-value;}
mercoledì 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 thy
mercoledì 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!
#dettaglioIniziative #content .vscroller .days li .month .list .activity .hour {font-weight: 700; line-height: 50px; font-size: 18px; float: left;
}
§ Nice SASS / LESS sources can compile in ugly code!
mercoledì 17 aprile 13
In the End 19
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!
FInal Takeaway
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
Don’t forget to check sometimes the new hero in town,he may really surprise you :)
mercoledì 17 aprile 13
Question Time 20
Question Time!
...We will be using Boostrap+Sass...
mercoledì 17 aprile 13