proč less?

21
LESS 21. února 2014 #frontendisti Martin Michálek @machal

Upload: martin-michalek

Post on 25-May-2015

444 views

Category:

Technology


2 download

DESCRIPTION

Proč LESS a pro koho? Proč LESS používám? Nevolte podle syntaxe 4 tipy pro pokročilejší

TRANSCRIPT

Page 1: Proč LESS?

LESS

21. února 2014#frontendisti

Martin Michálek @machal

Page 2: Proč LESS?

LESS

– Pro koho? – Proč LESS používám? – Nevolte podle syntaxe – 4 tipy pro pokročilejší

Page 3: Proč LESS?

!

Proč LESS a pro koho?

Page 4: Proč LESS?
Page 5: Proč LESS?

Designér

Programátor

Page 6: Proč LESS?

Deklarativní

ImperativníPHP, JavaScript, Ruby, Python…

CSS, SQL…

Page 7: Proč LESS?

„Jak by to vyřešili autoři CSS?”

„CSS je shit. Pojďme to vyřešit jinak!”

Page 8: Proč LESS?

!

Proč LESS používám?

Page 9: Proč LESS?

Dobře se to učí!

Page 10: Proč LESS?

<script  src="less.js"></script>  <script>less.watch();</script>

Page 11: Proč LESS?
Page 12: Proč LESS?

Co třeba umí SASS/Stylus a neumí LESS?

— @extend (už umí)

— if/else (mixin guards)

— cykly (recursive mixins)

— seamless mixins (mixins)

— …

Page 13: Proč LESS?

Nevolte podle

syntaxe

Page 14: Proč LESS?

SASS whitespace peklo

/*      Font  face  */  !@font-­‐face      font-­‐family:  "ForoExtraBold"      src:  url("../fonts/ForoXBol-­‐webfont.eot")      src:  url('../fonts/ForoXBol-­‐webfont.eot?#iefix')  format('embedded-­‐opentype'),            url('../fonts/ForoXBol-­‐webfont.woff')  format('woff'),            url('../fonts/ForoXBol-­‐webfont.ttf')  format('truetype'),            url('../fonts/ForoXBol-­‐webfont.svg#ForoExtraBold')  format('svg')

!

!

Page 15: Proč LESS?

Sublime + Emmet + Hayaku

Page 16: Proč LESS?

4 tipy pro pokročilejší

Page 17: Proč LESS?

Vlastnosti @import

@import  (less)  "fancybox.css";

Page 18: Proč LESS?

CSS guards

Page 19: Proč LESS?

Mixiny jako funkce

Page 20: Proč LESS?

BEM