Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
07.02.13                              SASS und SMACSS in größeren Projekten                                SCALABLE       ...
07.02.13                                SASS und SMACSS in größeren Projekten                              SO, WHATS WRONG...
07.02.13                                         SASS und SMACSS in größeren Projekten                                    ...
07.02.13                                          SASS und SMACSS in größeren Projekten                                   ...
07.02.13                               SASS und SMACSS in größeren Projekten                                SHITTY CODE AL...
07.02.13                              SASS und SMACSS in größeren Projekten                        #ae#it#ithae .iwatosaat...
07.02.13                                      SASS und SMACSS in größeren Projekten                                       ...
07.02.13                              SASS und SMACSS in größeren Projekten                              CATEGORIZING CSS ...
07.02.13                                 SASS und SMACSS in größeren Projekten                                            ...
07.02.13                                 SASS und SMACSS in größeren Projekten                                          LA...
07.02.13                                    SASS und SMACSS in größeren Projekten                                         ...
07.02.13                            SASS und SMACSS in größeren Projekten                                       STATE     ...
07.02.13                      SASS und SMACSS in größeren Projekten                              (THEMES)                 ...
07.02.13                                                  SASS und SMACSS in größeren Projekten                           ...
07.02.13                                SASS und SMACSS in größeren Projekten                              SOME CONVENTION...
07.02.13                                  SASS und SMACSS in größeren Projekten                                       EXAM...
07.02.13                                       SASS und SMACSS in größeren Projekten                                      ...
07.02.13                               SASS und SMACSS in größeren Projekten                                              ...
07.02.13                               SASS und SMACSS in größeren Projekten                              Whats your first...
07.02.13                                   SASS und SMACSS in größeren Projekten                                         C...
07.02.13                                 SASS und SMACSS in größeren Projekten                                     NESTED ...
07.02.13                              SASS und SMACSS in größeren Projekten                                    SUB-MODULES...
07.02.13                                  SASS und SMACSS in größeren Projekten                     Markup moves fast. Try...
07.02.13                                 SASS und SMACSS in größeren Projekten                                       SUB-C...
07.02.13                                     SASS und SMACSS in größeren Projekten                                      A ...
07.02.13                                   SASS und SMACSS in größeren Projekten                                      SMUR...
07.02.13                                           SASS und SMACSS in größeren Projekten                                  ...
07.02.13                           SASS und SMACSS in größeren Projekten                      WORKING WITH SASS           ...
07.02.13                                 SASS und SMACSS in größeren Projekten                                            ...
07.02.13                                   SASS und SMACSS in größeren Projekten                                          ...
07.02.13                                    SASS und SMACSS in größeren Projekten                                   %PLACE...
07.02.13                           SASS und SMACSS in größeren Projekten                              SASS VARIABLESlocalh...
07.02.13                                       SASS und SMACSS in größeren Projekten                               SHITTY ...
07.02.13                                   SASS und SMACSS in größeren Projekten                        SASS/COMPASS COLOR...
07.02.13                                     SASS und SMACSS in größeren Projekten                              TRY TO DEF...
07.02.13                                  SASS und SMACSS in größeren Projekten                                     2. USE...
07.02.13                                              SASS und SMACSS in größeren Projekten                               ...
07.02.13                      SASS und SMACSS in größeren Projektenlocalhost:4567/?print-pdf#/                            ...
07.02.13                                SASS und SMACSS in größeren Projekten                              JS BINDINGS, TH...
07.02.13                                   SASS und SMACSS in größeren Projekten                                        KU...
07.02.13                         SASS und SMACSS in größeren Projekten                              QUESTIONS?localhost:45...
07.02.13                      SASS und SMACSS in größeren Projektenlocalhost:4567/?print-pdf#/                            ...
Upcoming SlideShare
Loading in …5
×

Scaleable and maintainable css:sass

1,076 views

Published on

  • Be the first to comment

Scaleable and maintainable css:sass

  1. 1. 07.02.13 SASS und SMACSS in größeren Projekten SCALABLE AND MAINTAINABLE CSS/SASS Eckhard Rotte, (@erotte) appfertigung.comlocalhost:4567/?print-pdf#/ 1/42
  2. 2. 07.02.13 SASS und SMACSS in größeren Projekten SO, WHATS WRONG WITH SASS? Nothing.localhost:4567/?print-pdf#/ 2/42
  3. 3. 07.02.13 SASS und SMACSS in größeren Projekten BUT: Our apps constantly increase in complexity (Blah…) responsive, mobile etc. CSS still sucks everybody is still doing their own thinglocalhost:4567/?print-pdf#/ 3/42
  4. 4. 07.02.13 SASS und SMACSS in größeren Projekten SASS/COMPASS No constraints. No rules. Its very easy to create complex bullshit SASS/CSS!localhost:4567/?print-pdf#/ 4/42
  5. 5. 07.02.13 SASS und SMACSS in größeren Projekten SHITTY CODE ALERT! #ae pg #it ls +oun1,re clm(8tu) #ithae ls-edr tx-lg:rgt etain ih .iwatos ve-cin fot rgt la: ih a +niebok iln-lc hih:2p egt 5x &ato-lt #cinfa bcgon:tasaetiaeulgtb.n akrud rnprn mg-r(b-aspg) &atv .cie bcgon-oiin 00 akrudpsto: &hvr :oe bcgon-oiin 0-0x akrudpsto: 5p &ato-rue #cingopd bcgon:#d akrud celocalhost:4567/?print-pdf#/ 5/42
  6. 6. 07.02.13 SASS und SMACSS in größeren Projekten #ae#it#ithae .iwatosaato-ltatv:oe pg ls ls-edr ve-cin #cinfa.ciehvr { bcgon-oiin 00 akrudpsto: }localhost:4567/?print-pdf#/ 6/42
  7. 7. 07.02.13 SASS und SMACSS in größeren Projekten SMACSS Scalable and Modular Architecture for CSS by Jonathan Snook (@snookca) coding and naming conventions a style guide a guidelines framework classification systemlocalhost:4567/?print-pdf#/ 7/42
  8. 8. 07.02.13 SASS und SMACSS in größeren Projekten CATEGORIZING CSS RULES Base Layout Modules State (Theme)localhost:4567/?print-pdf#/ 8/42
  9. 9. 07.02.13 SASS und SMACSS in größeren Projekten BASE basic element styles the defaults resets should not contain nested rules hm,bd,fr { tl oy om mri:0 agn ; pdig 0 } adn: ; ipttp=et { nu[yetx] bre:1xsld#d; odr p oi ce } a{clr #3;} oo: 09 ahvr{clr #3;} :oe oo: 0Clocalhost:4567/?print-pdf#/ 9/42
  10. 10. 07.02.13 SASS und SMACSS in größeren Projekten LAYOUT (outer) layout container styles page sections grid usually: single selectors, #ids may include contextual selectors #edr #otr{ hae, foe wdh at; it: uo mri 0at; agn uo } .-ie { lfxd #edr #otr{ hae, foe wdh 90x it: 6p; } }localhost:4567/?print-pdf#/ 10/42
  11. 11. 07.02.13 SASS und SMACSS in größeren Projekten MODULES are reuseable, modular, fragments, components, sections, widgets e.g. buttons, a product list, sidebar nav or teaser boxlocalhost:4567/?print-pdf#/ 11/42
  12. 12. 07.02.13 SASS und SMACSS in größeren Projekten STATE hidden or visible? collapsed or expanded? emphasized or quiet?localhost:4567/?print-pdf#/ 12/42
  13. 13. 07.02.13 SASS und SMACSS in größeren Projekten (THEMES) ...localhost:4567/?print-pdf#/ 13/42
  14. 14. 07.02.13 SASS und SMACSS in größeren Projekten EXAMPLE FILE STRUCTURE +apiainss plcto.as / @mot / iprs +bs/ ae | _etnscsss stig.s.as / SS cni vrals / AS ofg aibe | _ee.s.as rstcsss | _ooscsss clr.s.as | _lmn_ealscsss eeetdfut.s.as +lyu/ aot | _etnscsss stig.s.as / SS lyu/rdvrals / AS aotgi aibe | _otiescsss cnanr.s.as +mdls oue/ +ohr te/ http://railslove.com/blog/2012/03/28/smacss-and-sass-the-future-of-stylesheets/localhost:4567/?print-pdf#/ 14/42
  15. 15. 07.02.13 SASS und SMACSS in größeren Projekten SOME CONVENTIONS AND RULES use classes avoid #ids avoid element selectors avoid nesting .namespace-your-selectors semantic markup is overrated create modules create more modules! ...localhost:4567/?print-pdf#/ 15/42
  16. 16. 07.02.13 SASS und SMACSS in größeren Projekten EXAMPLE / alyu rl * * aot ue / .aotfxd{.} lyu-ie ..; / yumysotntepei * * o a hre h rfx / .-ie {.} lfxd ..; / amdl.n pei nee!* * oue o rfx edd / .a {.} tb ..; / amdl wt sae* * oue ih tt / .a.satv {.} tbi-cie ..localhost:4567/?print-pdf#/ 16/42
  17. 17. 07.02.13 SASS und SMACSS in größeren Projekten COMPONENTS parts of a module .esg { msae bre:1xsld#3; odr p oi 33 .esg-edr{ msaehae fn-egt bl; otwih: od } .esg-oy msaebd fn-ie 1p otsz: 4x } }localhost:4567/?print-pdf#/ 17/42
  18. 18. 07.02.13 SASS und SMACSS in größeren Projekten CSS .erho { sacbx wdh 10; it: 0% } .erho ipttp=et { sacbx nu[yetx] wdh 5% it: 0; } SCSS .erho { sacbx wdh 10; it: 0% ipttp=et { nu[yetx] wdh 5% it: 0; } } CHALLENGE we need a variant of .searchbox in the Sidebar, with a full width input field.localhost:4567/?print-pdf#/ 18/42
  19. 19. 07.02.13 SASS und SMACSS in größeren Projekten Whats your first instinct?localhost:4567/?print-pdf#/ 19/42
  20. 20. 07.02.13 SASS und SMACSS in größeren Projekten COMMON SOLUTION: #iea .erho ipttp=et{ sdbr sacbx nu[yetx] wdh 10; it: 0% } so far so good. Next exercise: we need another variant with a fixed width!localhost:4567/?print-pdf#/ 20/42
  21. 21. 07.02.13 SASS und SMACSS in größeren Projekten NESTED RULES SPECIFITY WARS START HERE .erho { sacbx wdh 10; it: 0% ipttp=et { nu[yetx] wdh 5% it: 0; } } #iea .erho ipttp=et{ sdbr sacbx nu[yetx] wdh 10; it: 0% } .erho-ie { sacbxfxd wdh 20x it: 0p; } .erho-ie ipttp=et, sacbxfxd nu[yetx] #iea .erho-ie ipttp=et { sdbr sacbxfxd nu[yetx] wdh 10x it: 5p; }localhost:4567/?print-pdf#/ 21/42
  22. 22. 07.02.13 SASS und SMACSS in größeren Projekten SUB-MODULES .erho { sacbx wdh 10; it: 0% ipttp=et { nu[yetx] wdh 5% it: 0; } } .erho-ulnd sacbxotie{ bre:1xsld#3 odr p oi 33 } .erho-ie { sacbxfxd wdh 20x it: 0p; } .erho-ie ipttp=et { sacbxfxd nu[yetx] wdh 10x it: 5p; } <i cas"erho sacbxfxd> dv ls=sacbx erho-ie" <nu tp=tx"../ ipt ye"et . > <dv /i>localhost:4567/?print-pdf#/ 22/42
  23. 23. 07.02.13 SASS und SMACSS in größeren Projekten Markup moves fast. Try to avoid conditional styling based on location create a Sub-Module of the module instead.localhost:4567/?print-pdf#/ 23/42
  24. 24. 07.02.13 SASS und SMACSS in größeren Projekten SUB-CLASSING CSS .erho.erho-ie { sacbxsacbxfxd wdh 20x it: 0p; } SCSS .erho { sacbx &sacbxfxd{ .erho-ie wdh 20x it: 0p; } } SASS .erho sacbx &sacbxfxd .erho-ie wdh 20x it: 0p;localhost:4567/?print-pdf#/ 24/42
  25. 25. 07.02.13 SASS und SMACSS in größeren Projekten A SASS MODULE .erho sacbx wdh 10 it: 0% ipttp=et nu[yetx] wdh 5% it: 0 &sacbxfxd .erho-ie wdh 20x it: 0p ipttp=et nu[yetx] wdh 10x it: 5p &sacbxotie .erho-ulnd bre:1xsldrd odr p oi elocalhost:4567/?print-pdf#/ 25/42
  26. 26. 07.02.13 SASS und SMACSS in größeren Projekten SMURF Scalable, Modular, reUsable Rails Frontends by Jakob Hilden (@jkwebs) additional coding conventions for SMACSS a Ruby gem called "Smurfville" for generating live styleguides more accurate definitions of submodules, components and modifierslocalhost:4567/?print-pdf#/ 26/42
  27. 27. 07.02.13 SASS und SMACSS in größeren Projekten EXAMPLE / - mdl - / - oue - .-o mbx / cmoet / opnns .-o-hae mbx-edr .-o-bd mbx-oy / mdfes / oiir &n-odr .obre &rgt .ih / sae / tts &i-iald .sdsbe / - sboue- / - umdl - .-o_teto mbxatnin / adtoa cmoet ta ol eit i tesboue / diinl opnn, ht ny xss n h umdl .-o_teto-tae mbxatnin-esr http://railslove.com/blog/2012/11/09/taking-sass-to-the-next-level-with-smurf-and-extendlocalhost:4567/?print-pdf#/ 27/42
  28. 28. 07.02.13 SASS und SMACSS in größeren Projekten WORKING WITH SASS EXTENDABLES collecting selectorslocalhost:4567/?print-pdf#/ 28/42
  29. 29. 07.02.13 SASS und SMACSS in größeren Projekten SASS .utn bto clr #3 oo: 33 .utnrd bto-e @xed.utn etn bto bcgon:rd akrud e clr wie oo: ht generated CSS .utn .utnrd{ bto, bto-e clr #333 } oo: 333; .utnrd{ bto-e bcgon:rd akrud e; clr wie } oo: ht;localhost:4567/?print-pdf#/ 29/42
  30. 30. 07.02.13 SASS und SMACSS in größeren Projekten @extend + you can re-use code + smaller CSS output – may blow up your selectors to gigantic, comma separated selector stacks – is not transparent, everything may get inherited – has some strange side effects with complex selectorslocalhost:4567/?print-pdf#/ 30/42
  31. 31. 07.02.13 SASS und SMACSS in größeren Projekten %PLACEHOLDER SELECTOR wont be compiled until its @extended %lafx ceri oefo:nn; vrlw oe *om 1 zo: ; aie foe sd, otr @xed%lafx etn ceri; #rdcnanr gi-otie @xed%lafx etn ceri; produces aie foe,#rdcnanr{ sd, otr gi-otie oefo:nn; vrlw oe *om 1 zo: ; }localhost:4567/?print-pdf#/ 31/42
  32. 32. 07.02.13 SASS und SMACSS in größeren Projekten SASS VARIABLESlocalhost:4567/?print-pdf#/ 32/42
  33. 33. 07.02.13 SASS und SMACSS in größeren Projekten SHITTY CODE ALERT AGAIN! / -btos / utn $utnfn-ie $aefn-ie bto-otsz: bs-otsz; $utnlgtclr #f3d bto-ih-oo: 577; $utnbcgon-oo:#a74 bto-akrudclr 134; $utntx-oo:wie bto-etclr ht; $erhbto-akrudclr $cetclr sac-utnbcgon-oo: acn-oo; $erhbto-ih-oo:#8F3 sac-utnlgtclr 4BE; $erhbto-etclr wie sac-utntx-oo: ht; $di-utnlgtclr #dae amnbto-ih-oo: abb; $di-utnbcgon-oo:#ce4 amnbto-akrudclr 89a; $di-utntx-oo:wie amnbto-etclr ht; // $egbusbcgon-oo:$utnbcgon-oo; nihor-akrudclr bto-akrudclr $egbussprtrclr $utnlgtclr nihor-eaao-oo: bto-ih-oo; $otrtx-oo:$eimga; foe-etclr mdu-ry $e-aigbre-oo:#222 ntrtn-odrclr ddd; // $ae-etclr #6; pgrtx-oo: 66 $ae-oo:#333 pgrclr bbb; $ae-ihih-oo:#ccc pgrhglgtclr 444;localhost:4567/?print-pdf#/ 33/42
  34. 34. 07.02.13 SASS und SMACSS in größeren Projekten SASS/COMPASS COLOR MANIPULATION IS GREAT! / Mksaclrlgtr / ae oo ihe. +ihe(clr $mut lgtn$oo, aon) / Mksaclrdre. / ae oo akr +akn$oo,$mut dre(clr aon) +auae$oo,$mut strt(clr aon) +eauae$oo,$mut dstrt(clr aon) +i(clr1 $oo-,[wih] mx$oo-, clr2 $egt) You need to now details about the design- and color concept!localhost:4567/?print-pdf#/ 34/42
  35. 35. 07.02.13 SASS und SMACSS in größeren Projekten TRY TO DEFINE BASE VARIABLES ONLY. move specific variables into the modules $rmr-oo piayclr $eodr-oo scnayclr $ptclr so-oo $etclr tx-oo $aegp bs-a $rdwdh gi-it You need to now details about the design- and color concept!localhost:4567/?print-pdf#/ 35/42
  36. 36. 07.02.13 SASS und SMACSS in größeren Projekten 2. USE LOCAL VARIABLES / cni / ofg / smweei tegis. / oehr n h rd.. $aegp 1p bs-a: 0x / clr / oos $ibu:#F5A c-le 059 $ptoo:#aae soclr fae %utn bto $gbu:$ibu b-le c-le $gbu-ak dre(c-le 2) b-ledr: akn$ibu, 0 pdig 2x$aegp15 adn: p bs-a*. +akrudiaelna-rdet$gbu,$gbu-ak) bcgon-mg(iergain(b-le b-ledr) .utn bto @xed%utn etn bto &bto-e .utnrd $e-tr:sae$ptclr 1) rdsat hd(so-oo, 6 $e-tp dre(so-oo,2) rdso: akn$ptclr 6 +akrudiaelna-rdet$e-tr,$e-tp) bcgon-mg(iergain(rdsat rdso)localhost:4567/?print-pdf#/ 36/42
  37. 37. 07.02.13 SASS und SMACSS in größeren Projekten IT MAY GET A KIND OF DOCUMENTATION .ycas{ m-ls bre:1xrdsld odr p e oi; hih:24x egt 4p; pdig 6x adn: p; wdh 38x it: 6p; } vs. .ycas{ m-ls $odrwdh 1x bre-it: p; $adn:6x pdig p; $egt 26x hih: 5p $it:30x wdh 8p; bre:$odrwdhrdsld odr bre-it e oi; hih:$egt-2*(pdig+$odrwdh; egt hih $adn bre-it) pdig $adn; adn: pdig wdh $it -2*(pdig+$odrwdh; it: wdh $adn bre-it) } http://www.hagenburger.net/BLOG/Document-Your-CSS-Sass-With-Variables.htmllocalhost:4567/?print-pdf#/ 37/42
  38. 38. 07.02.13 SASS und SMACSS in größeren Projektenlocalhost:4567/?print-pdf#/ 38/42
  39. 39. 07.02.13 SASS und SMACSS in größeren Projekten JS BINDINGS, THE RAILS WAY (lazy slide) =ln_ooi!, cas t bnrd, ikt D t #, ls: bn t-e dt:{eaiu:pndao aa bhvor oe-ilg} < he=# cas"t bnrd dt-eair"pndao" a rf"" ls=bn t-e" aabhvo=oe-ilg> / jur hle / Qey epr $bhvor=fnto(eaiu,cnet { .eaiu ucinbhvor otx) rtr $dt-eaiu~bhvor cnet eun ([aabhvor=+eaiu+], otx) } $bhvorpndao.lc(ucin(vn){ .eaiu(oe-ilg)cikfnto eet eetpeeteal(; vn.rvnDfut) /..oe tedao! /. pn h ilg }) );localhost:4567/?print-pdf#/ 39/42
  40. 40. 07.02.13 SASS und SMACSS in größeren Projekten KUDOS TO Jonathan Snook (@snookca) Jakob Hilden (@jkwebs) Nico Hagenburger (@Hagenburger) Examples in this Presentation are mostly shameless clones or stolen!localhost:4567/?print-pdf#/ 40/42
  41. 41. 07.02.13 SASS und SMACSS in größeren Projekten QUESTIONS?localhost:4567/?print-pdf#/ 41/42
  42. 42. 07.02.13 SASS und SMACSS in größeren Projektenlocalhost:4567/?print-pdf#/ 42/42

×