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

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 &gt; 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