Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Modern Sass Artchitecture

A Modern Sass Artchitecture

Stuart Robson

November 19, 2015
Tweet

More Decks by Stuart Robson

Other Decks in Programming

Transcript

  1. MODERN SASS ARCHITECTURE > folder and file structure > naming

    conventions > composing declarations > maintaining variables > documentation > when not to use Sass 4 — // Modern Sass Architecture - #ASOSTechUI 2016
  2. All we had was a single CSS file, longer than

    a sleepless night. — Hugo Giraudel 17 — // Modern Sass Architecture - #ASOSTechUI 2016
  3. A place for everything, and everything in its place —

    Mrs Beeton 49 — // Modern Sass Architecture - #ASOSTechUI 2016
  4. 7-1 Pattern — Hugo Giraudel 51 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  5. BASE/ > reset or normalize > typography settings > primitive

    or atomic defaults > code for common HTML elements 55 — // Modern Sass Architecture - #ASOSTechUI 2016
  6. COMPONENTS/ > smaller modules of a site > tabs, carousel,

    accordian 58 — // Modern Sass Architecture - #ASOSTechUI 2016
  7. LAYOUTS/ > the layout of a site > header, footer,

    aside, main 61 — // Modern Sass Architecture - #ASOSTechUI 2016
  8. PAGES/ > the page specific code of a site >

    Sass files named after the page > _front-page.scss > _contact-page.scss 64 — // Modern Sass Architecture - #ASOSTechUI 2016
  9. VENDOR/ > files written by others > external frameworks or

    libraries 67 — // Modern Sass Architecture - #ASOSTechUI 2016
  10. CONFIG/ > Sass code that doesn't compile CSS > tools

    and helpers > mixins, variables, functions 70 — // Modern Sass Architecture - #ASOSTechUI 2016
  11. CONFIG/ |- config/ |-|- _variables.scss |-|- _functions.scss |-|- _mixins.scss |-|-

    _helpers.scss 71 — // Modern Sass Architecture - #ASOSTechUI 2016
  12. All we had was a single Sass variables file, longer

    than a sleepless night. — Stu Robson 75 — // Modern Sass Architecture - #ASOSTechUI 2016
  13. #header-navigation { float: left; } .main-navigation-link { list-style: none; }

    .main-navigation-signup-link { color: red; } 86 — // Modern Sass Architecture - #ASOSTechUI 2016
  14. .block { [...] } .block__element { [...] } .block--modifier {

    [...] } .block__element--modifier { [...] } 91 — // Modern Sass Architecture - #ASOSTechUI 2016
  15. .nav { float: left; } .nav__link { list-style: none; }

    .nav__link--signup { color: red; } 93 — // Modern Sass Architecture - #ASOSTechUI 2016
  16. HOW TO WRITE YOUR SASS 98 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  17. HOW TO WRITE YOUR CSS 99 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  18. > single line or multi-line > ordering alphabetically or type

    > level of nesting 101 — // Modern Sass Architecture - #ASOSTechUI 2016
  19. .component { background-color: #BADA55; border: 1px solid #000; height: 300px;

    width: 400px; } 102 — // Modern Sass Architecture - #ASOSTechUI 2016
  20. .component { background-color: #BADA55; border: 1px solid #000; height: 300px;

    height: 270px; width: 400px; } 103 — // Modern Sass Architecture - #ASOSTechUI 2016
  21. .component { background-color: #BADA55; border: 1px solid #000; height: 300px;

    width: 400px; .component__title { color: #070707; font-size: 2.4em; .component__title__link { text-decoration: none; } } } 104 — // Modern Sass Architecture - #ASOSTechUI 2016
  22. .component { background-color: #BADA55; border: 1px solid #000; height: 300px;

    width: 400px; } .component__title { color: #070707; font-size: 2.4em; } .component__title__link { text-decoration: none; } 105 — // Modern Sass Architecture - #ASOSTechUI 2016
  23. .component { // variables // extends // mixins // functions

    // CSS // parent selectors // media queries } 107 — // Modern Sass Architecture - #ASOSTechUI 2016
  24. .component { $border-color: $color--alt-1; @include box-sizing(content); border: 1px solid $border-color;

    &:hover { border: none; } @include mq(768) { font-size: 2em; } } 108 — // Modern Sass Architecture - #ASOSTechUI 2016
  25. .border { border-top: 1px solid #f01e1e; } 124 — //

    Modern Sass Architecture - #ASOSTechUI 2016
  26. $red: #f01e1e; .border { border-top: 1px solid $red; } 125

    — // Modern Sass Architecture - #ASOSTechUI 2016
  27. DON'T BE CUTE $text-sizing: ( mercury: ( large: ( font-size:

    0.75rem, // 12px line-height: 1.125rem // 18px ) ), venus: ( large: ( font-size: 0.9375rem, // 15px line-height: 1.5rem // 24px ), medium: ( font-size: 0.875rem, // 14px line-height: 1.3125rem // 21px ), fromAdaptiveToFluid: ( font-size: 0.875rem, // 14px line-height: 1.3125rem // 21px ) ) } 128 — // Modern Sass Architecture - #ASOSTechUI 2016
  28. I always say, keep a diary and someday it'll keep

    you. — Mae West 131 — // Modern Sass Architecture - #ASOSTechUI 2016
  29. // ==================== .classname ==================== // created by: Stuart Robson (

    [email protected] ) // creation data: October 21, 2015 // upadate by: Stuart Robson ( [email protected] ) // update data: November 05, 2015 // 1. Your text // =========================================================== 134 — // Modern Sass Architecture - #ASOSTechUI 2016
  30. // ----------------------------------------------------------------- // note: Only use this on the home

    page. // ----------------------------------------------------------------- 138 — // Modern Sass Architecture - #ASOSTechUI 2016
  31. // todo: add support for IE7 139 — // Modern

    Sass Architecture - #ASOSTechUI 2016
  32. CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU

    144 — // Modern Sass Architecture - #ASOSTechUI 2016
  33. WHEN NOT TO USE SASS 146 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  34. .component { background-color: #3C3C3C; background-image: -webkit-gradient(linear, left top, right top,

    from(#3C3C3C), to(#999999)); background-image: -webkit-linear-gradient(left, #3C3C3C, #999999); background-image: linear-gradient(left, #3C3C3C, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3C3C3C', endColorStr='#999999', gradientType='1'); } 147 — // Modern Sass Architecture - #ASOSTechUI 2016
  35. @mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) { background-color: $startColor; background-image: -webkit-gradient(linear,

    left top, right top, from($startColor), to($endColor)); background-image: -webkit-linear-gradient(left, $startColor, $endColor); background-image: -moz-linear-gradient(left, $startColor, $endColor); background-image: -ms-linear-gradient(left, $startColor, $endColor); background-image: -o-linear-gradient(left, $startColor, $endColor); background-image: linear-gradient(left, $startColor, $endColor); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$startColor}', endColorStr='#{$endColor}', gradientType='1'); } 148 — // Modern Sass Architecture - #ASOSTechUI 2016
  36. .component { font-size: 16px; font-size: 1rem; } 151 — //

    Modern Sass Architecture - #ASOSTechUI 2016
  37. MODERN SASS ARCHITECTURE > folder and file structure > naming

    conventions > composing declarations > maintaining variables > documentation > when not to use Sass 154 — // Modern Sass Architecture - #ASOSTechUI 2016
  38. CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU

    155 — // Modern Sass Architecture - #ASOSTechUI 2016