Drupal and SASS, in Dutch.

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