Download - PechaKucha Less VS Sass
![Page 1: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/1.jpg)
20013/04/17
Mine is Longer...Less VS Sass
Hoang C. Huynh@aetheros
20x20
mercoledì 17 aprile 13
![Page 2: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/2.jpg)
Less VS Sass 2
WE ALL STANDARDS
mercoledì 17 aprile 13
![Page 3: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/3.jpg)
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
![Page 4: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/4.jpg)
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
![Page 5: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/5.jpg)
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
![Page 6: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/6.jpg)
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
![Page 7: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/7.jpg)
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
![Page 8: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/8.jpg)
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
![Page 9: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/9.jpg)
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
![Page 10: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/10.jpg)
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
![Page 11: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/11.jpg)
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
![Page 12: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/12.jpg)
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
![Page 13: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/13.jpg)
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
![Page 14: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/14.jpg)
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
![Page 15: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/15.jpg)
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
![Page 16: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/16.jpg)
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
![Page 17: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/17.jpg)
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
![Page 18: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/18.jpg)
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
![Page 19: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/19.jpg)
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
![Page 20: PechaKucha Less VS Sass](https://reader033.vdocuments.site/reader033/viewer/2022051311/54418364b1af9fff4b8b474a/html5/thumbnails/20.jpg)
Question Time 20
Question Time!
...We will be using Boostrap+Sass...
mercoledì 17 aprile 13