pechakucha less vs sass

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


Less VS Sass 3

CSS’ TROUBLESOME YOUTH

Historical Outcomes§ Fragmentation§ Inconsistency§ Vendor Captivity§ “Wish I Could” Syndrome

§ Variables§ Object Oriented§ Inheritance§ Functions§ Business Logic


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


http://sass-lang.com/

http://sass-lang.com/

http://lesscss.org/

http://lesscss.org/

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


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


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


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


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


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!


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


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


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


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


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


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;}


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


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!


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 :)


Question Time 20

Question Time!

...We will be using Boostrap+Sass...


pechakucha less vs sass

Technology