Uvod do CSS preprocesorov LESS, SCSS, SASS. Ich vlastnosti, a priklady pouzitia.

1. © ANASOFT 2016
CSS PREPROCESORY
Michal Krchňavý
Senior .NET Developer

2. © ANASOFT 2016
AGENDA
• CSS preprocesory
• čo to je?
• druhy a porovnanie
• ako nám vedia pomôcť
• čo dokážu
• Ako ich vieme použiť vo Visual studiu
• Ako ich použiť v projekte moderne a cool

3. © ANASOFT 2016
DRUHY A POROVNANIE
• LESS
• SASS -> Syntax SCSS (Sassy CSS) - v3
• SASS -> Syntax SASS (Syntactically Awesome Stylesheets)
• starý syntax
• bez zátvoriek, silne závisel od odsadzovania textu
• inšpirovaný zo syntaxe 'Haml'
• Sample: https://cdn.tutsplus.com/net/uploads/legacy/421_sass/1.png
• Stylus
• Jade
24.6.2016
3

4. © ANASOFT 2016
DRUHY A POROVNANIE
• LESS
• *.less
• ccs 14000 github stars
• väčšia komunita
• http://lesscss.org/
• online playground: http://lesstester.com/
• podporuje kompiláciu v prehliadači pomocou less.js
• Bootstrap v <= 3
• najjednoduchší na naučenie
• SCSS
• *.scss
• ccs 8000 github stars
• http://sass-lang.com/
• online playground: http://www.sassmeister.com/
• teraz už aj Bootstrap (V4), Foundation
• Stylus
• *.styl
• http://stylus-lang.com/
• online playground: http://stylus-lang.com/try.html
05.11.2013
4

5. © ANASOFT 2016
DEMO #1
Jednoduché demo
(nech viete o čom hovorím)
prazdne: http://codepen.io/zemacik/pen/beBoKa?editors=1100
LESS
hotove: http://codepen.io/zemacik/pen/OXbxPX?editors=1100
SCSS
hotove: http://codepen.io/zemacik/pen/beBoxa?editors=1100
5

6. © ANASOFT 2016
VLASTNOSTI A DEMO #2
• Premenné
• Mixiny
• Extend
• Vnáranie, a rodič
• Vnáranie media queries
• Matematické funkcie
• Funkcie na prácu s farbami
• Podmienky, cykly
• @import
6

7. © ANASOFT 2016
AKO BUILDOVAŤ
• špeciálne UI aplikácie
• napr. Prepros, CodeKit, Koala a ďalšie.
• editory a IDE
• natívna podpora alebo rozšírenia
• Grunt, Gulp, Webpack a iné ....
• príkazový riadok
• nutnosť mať vhodné nástroje
• Stylus a LESS (Javascript), SASS (Ruby)
• kompilácia v prehliadači (LESS)
7

8. © ANASOFT 2016
VÝHODY/ NEVÝHODY
Výhody:
• znovupoužiteľnosť blokov
• zlepšujú kvalitu kódu
• spravovateľnosť, a organizácia
• metodiky organizácie CSS kódu: OOCSS, BEM, SMACSS
• rýchlosť vývoja
• rýchlejšie písanie kódu (mixiny, premenné)
• použitie existujúcich knižníc
• frameworky ako Bootstrap, Foundation
• mixin knižnice: Bourbon, Compass nebo LESShat
• Vlastné knižnice mixinov
Nevýhody:
• pridanie ďalšieho nutného kroku do build procesu
• treba sa učiť ďalší jazyk / syntax
8

9. © ANASOFT 2016
AKÝ PREPROCESOR VYBRAŤ ?
• LESS
• veľmi jednoduchý na naučenie
• maximálne rešpektuje povahu CSS (deklaratívnosť)
• podmienky a cykly nie sú veľmi elegantné
• SASS
• imperatívny charakter:
• podmienky a cykly odpovedajú bežným programovacím jazykom
• niekedy čítať existujúce SASS je zverstvo, a ťažké na porozumenie
Takže:
• Pre vývojárov skôr SASS alebo Stylus
• Dizajnérom a začiatočníkom LESS
• Pre nás ? LESS
9

10. © ANASOFT 2016
POUŽITIE VO VISUAL STUDIU
• Visual Studio 2013
• preprocesory štandartne neboli podporované
• rozšírenie WebEssentials 2013 od Mads Kristensen
• kompilácia pri uložení súboru
• split view (less|css) alebo (scss|css)
• jednoduché a účinné
• Visual Studio 2015
• všetko je inak (podpora bola odstránená z Web essentials 2015)
• Mads vytvoril ďalšie rozšírenie Web compiler
• kompiluje LESS, Sass Stylus, JSX, ES6 and CoffeeScript)
• na pozadí používa Task runner explorer
• https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c
• (LESS) nuget: System.Web.Optimization.Less (nie je od MS)
• LessBundle v BundleConfig.cs
• Grunt, Gulp
- CI, Build servery
- ???
10

11. © ANASOFT 2016
DEMO #3
Web compiler
Visual Studio 2015 extension
https://github.com/zemacik/AnaWorkshop-CssPrep-Demos
11

12. © ANASOFT 2016
DEMO #4
Moderný spôsob
https://github.com/zemacik/AnaWorkshop-CssPrep-Demos
12

13. © ANASOFT 2016
KONIEC
Ďakujem za pozornosť
13