Presentatie drupal sass
- 1. DRUPAL & SASS STRUCTUUR IN JE THEME CSS Door Kees Kodde / @kees_ik
- 2. AGENDA Wat is SASS? Eh, whatsinitforme?? Gewoon beginnen Beetje diepgang Hoe toepassen in Drupal Wrapup
- 3. WAT IS SASS? ff googelen... naaah
- 4. DIT IS SASS sass-lang.com: CSS with superpowers ..."CSS extension language"... Syntactically Awesome Style Sheets
- 5. DIT IS SASS "CSS PREPROCESSOR" J&J: CSS als programmeertaal Structuur en hergebruik van code Variabelen Berekeningen Bibliotheken
- 6. DIT IS SASS SASS bestaat uit .scss bestanden die gecompileerd worden tot .css
- 7. WAT IS DAN LESS? http://www.lesscss.org/: LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions Grofweg dezelfde doelstellingen. SASS is robuuster en leidend. Beiden hebben elkaars best practices overgenomen. Voor nu: SASS.
- 8. WAAROM SASS, waarom zou ik? Structuur Minder broncode Recycling Teams / minder conflicten Foutcontrole compiler Lage learningcurve Private codecomments Structuur, broncode & hergebruik gaan we ff verder op in:
- 9. FILES / DIRECTORIES Ongelimiteerd files opknippen in kleinere. Structureren in directories. De compiler voegt deze weer samen.
- 10. CODE NESTING Je kunt CSS queries nesten. Dit geeft meer overzicht en minder broncode. CSS: u.eu{ lmn ls-tl:nn; itsye oe } u.eul a{ lmn i pdig 5x adn: p; } u.eul aatv{ lmn i .cie clr rd oo: e; } SCSS: u.eu{ lmn ls-tl:nn; itsye oe l a{ i pdig 5x adn: p; &atv{ .cie clr rd oo: e; } } }
- 11. MIXINS Mixins zijn herbruikbare stukjes SCSS, waar ook voorwaarden aan meegegeven kunnen worden. Definitie: @ii mk-ap(fnsz:1p){ mxn aehpy$otie 4x tx-lg:cne; etain etr fn-aiy cmcsn; otfml: oi-as clr pn; oo: ik fn-ie $otie otsz: fnsz; } Gebruiken: .aem-ap { mk-ehpy @nld mk-ap; icue aehpy } .aem-ape { mk-ehpir @nld mk-ap(5x; icue aehpy2p) }
- 12. GEEN NADELEN? extra layer of "complexity" Gecompileerde CSS groter
- 13. GEWOON BEGINNEN Wat heb je nodig: SCSS parser Browserplugin FF: Firesass Chrome: Devtools (experimenteel!)
- 14. SCSS PARSER Compass Compass Compass Taalspecifieke implementaties, bv PHPHamlP (PHP) LibSASS (C/C++) node-sass (NodeJS) IDE/Editor plugin
- 15. COMPASS (= THE BOMB) Ruby gem, commandline tool $sd gmisalcmas uo e ntl ops ../. ./.. Scesul isaldcmas01. ucsfly ntle ops-.22 4gm isald es ntle $cmascet mpoet ops rae yrjc $cmaswthmpoet ops ac yrjc >>Cmasi pligfrcags PesCr- t So. > ops s oln o hne. rs tlC o tp
- 16. COMPASS GUI Scout app: http://mhs.github.io/scout-app/ (osx + win) Koalla app: http://koala-app.com/ (osx, win, lin) Compass app: http://compass.kkbox.com/ (osx, win) $ Voors: 1 click install niet-commandline nerds cross platform Tegens: Config niet altijd te delen Verschillen in output
- 17. SERVER- OF CLIENTSIDE? Kort: clientside (= op developer machine). Langer: Serverside goed mogelijk, Ruby + compass als service. Nadelen server: Geen direct zicht op foutmeldingen Niet per se hetzelfde resultaat als clientside resources Voordelen server: Los van code repo Compilatie altijd(?) hetzelfde
- 18. TEAMS + REPO Compiler + compiler settings afstemmen. Kan bv zijn dat jouw IDE een prima SASS compiler heeft, die toch afwijkende opbouw genereert.
- 19. BEETJE DIEPGANG Bestaand project Compass config Commandline Compass framework Librairy Afbeeldingen
- 20. BESTAAND PROJECT Folders voor .css, .scss hernoem bestaande .css naar .scss $c pdna/rjc/hm d a/arpoettee $cmascet .-br -ss-i "tl/as -csdr"tl/s" ops rae -ae -asdr syess" -s-i syecs $cmaswth ops ac En gebruik alle SASS goedheid die je maar kunt bedenken!
- 21. CONFIGURATIE OPTIES config.rb #Stti t tero o yu poetwe dpoe: e hs o h ot f or rjc hn elyd ht_ah="" tppt / csdr="tl/s" s_i syecs ss_i ="tl/cs asdr syess" iae_i ="mgs mgsdr iae" jvsrpsdr="aacit" aacit_i jvsrps #(a b oerde vatecmadln) cn e vridn i h omn ie: #otu_tl =:xaddo :etdo :opc o :opesd uptsye epne r nse r cmat r cmrse otu_tl =:xadd uptsye epne #O #otu_tl =:opc uptsye cmat #P #T dsbedbgigcmet ta dslyteoiia o ial eugn omns ht ipa h rgnl #lcto o yu slcos Ucmet oain f or eetr. nomn: ln_omns=tu iecmet re http://compass-style.org/help/tutorials/configuration-reference/
- 22. COMMANDLINE Maak project met basis HTML/CSS $sd cmascet ~Stsnewrjc uo ops rae /ie/iupoet -uigbupitsmni -ss-i cs-csdrcmie/s -sn lern/eatc -asdr s -s-i opldcs Hergenereer alle bestanden P $cmascmie-fre-otu-tl cmrse ops opl -oc -uptsye opesd Extract alle compass mixins $cmasupc cmas ops nak ops Valideer CSS (gem!) $cmasvldt ops aiae Statistische gegevens project $cmassas ops tt http://compass-style.org/help/tutorials/command-line/
- 23. COMPASS FRAMEWORK Compass Core @mixins: 1. 2. 3. 4. 5. CSS3 Typography Utilities Layout Reset http://compass-style.org/reference/compass/
- 24. VOORBEELD @FONT-FACE CSS @mot"ops/s3 ipr cmascs" / O @mot"ops/s3fn-ae * * r ipr cmascs/otfc" / @nld fn-ae"ikoehi" icue otfc(Rjsvred, fn-ie(rfrjsvredtf,"h/ikoehi.t") otfls"h/ikoehi.t" rfrjsvredof); SCSS @otfc { fn-ae fn-aiy "ikoehi" otfml: Rjsvred; sc ul'fnsrfrjsvredtf)fra(tutp', r: r(/ot/h/ikoehi.t' omt'reye) ul'fnsrfrjsvredof)fra(oetp'; r(/ot/h/ikoehi.t' omt'pnye) } http://compass-style.org/reference/compass/css3/font_face/
- 25. BIBLIOTHEKEN Veelgebruikt: http://bourbon.io/ $gmisalbubn e ntl oro Scesul isaldto-.81 ucsfly ntle hr01. Scesul isaldbubn318 ucsfly ntle oro-.. In je project: $sd bubnisal uo oro ntl Include SCSS: @mot"oro/oro" ipr bubnbubn;
- 26. BOURBON @FONT-FACE CSS @mot"oro/oro" ipr bubnbubn @nld fn-ae"ikoehi" icue otfc(Rjsvred, fn-ie(rfrjsvredtf,"h/ikoehi.t") otfls"h/ikoehi.t" rfrjsvredof); SCSS @otfc { fn-ae fn-aiy "ikoehi" otfml: Rjsvred; fn-egt nra; otwih: oml fn-tl:nra; otsye oml sc ul"r(/ot/h/ikoehi.t' fra(tutp',ul'fnsrfrjs r: r(ul'fnsrfrjsvredtf) omt'reye) r(/ot/h/ik sc ul"r(/ot/h/ikoehi.t' fra(tutp', r: r(ul'fnsrfrjsvredtf) omt'reye) ul'fnsrfrjsvredof)fra(oetp'.o?ifx)fra(ebde r(/ot/h/ikoehi.t' omt'pnye)et#ei" omt"med ul"r(/ot/h/ikoehi.t' fra(tutp', r(ul'fnsrfrjsvredtf) omt'reye) ul'fnsrfrjsvredof)fra(oetp'.of)fra(wf", r(/ot/h/ikoehi.t' omt'pnye)wf" omt"of) ul"r(/ot/h/ikoehi.t' fra(tutp', r(ul'fnsrfrjsvredtf) omt'reye) ul'fnsrfrjsvredof)fra(oetp'.t" fra(tutp", r(/ot/h/ikoehi.t' omt'pnye)tf) omt"reye) ul"r(/ot/h/ikoehi.t' fra(tutp', r(ul'fnsrfrjsvredtf) omt'reye) ul'fnsrfrjsvredof)fra(oetp'.v#ikoehi" fra( r(/ot/h/ikoehi.t' omt'pnye)sgRjsvred) omt" }
- 27. SPRITES SCSS @mot"ops/tlte/pie" ipr cmasuiiissrts; @mot"cn/.n" ipr ios*pg; @nld aliossrts icue l-cn-pie; / "cn"=drae / ios inm CSS .cn-pie .cn-cnerr .cn-cnif,.cn-cno { iossrt, iosio-ro, iosio-no iosio-k bcgon:ul'iae/cn-add91.n' n-eet akrud r(/mgsiossd95afpg) orpa; } .cn-cnerr{bcgon-oiin 0-6x} iosio-ro akrudpsto: 9p; .cn-cnif {bcgon-oiin 00} iosio-no akrudpsto: ; .cn-cno {bcgon-oiin 0-8x} iosio-k akrudpsto: 4p; http://compass-style.org/help/tutorials/spriting/sprite-layouts/
- 28. SASS ❤ DRUPAL? Relevante projecten: https://drupal.org/project/compass Themes https://drupal.org/project/sasson https://drupal.org/project/aurora meer
- 29. COMPASS MODULE heeft ruby + compass nodig admin menu entry voor compile
- 30. SASS (BASE)THEMES reeds in scss geschreven vaak gebaseerd op (optionele) on-server compiler
- 31. TOEPASSEN? Minder geschikt voor grotere projecten Denk aan OTAP Security: PHP heeft root level command uitvoering nodig
- 32. HOE DAN WEL? (sub)theme styling in SASS Gegenereerde CSS includen in .info SASS compilatie op O, deploy naar TAP Compilatie dus in repo SASS ❤ DRUPAL!
- 33. WRAPUP SASS brengt structuur aan in CSS code hoe groter het project, hoe meer baat past goed bij GIT(flow) helpt bij generatie sprites geschikt voor Drupal industrie standaard lage drempel, nu beginnen
- 34. VRAGEN?
- 35. BEDANKT! LINKS Compass: http://compass-style.org/ Install: http://thesassway.com/beginner/getting-started-withsass-and-compass Presentatie: http://www.slideshare.net/keesje76/presentatiedrupal-sass KEES KODDE Mail: kees.kodde@sogeti.nl / Twitter: @kees_ik