Save 37% off PRO during our Black Friday Sale! »

A Modern Sass Artchitecture

A Modern Sass Artchitecture

F479fe45ac0f50c0bdbe35c5757986f7?s=128

Stuart Robson

November 19, 2015
Tweet

Transcript

  1. MODERN SASS ARCHITECTURE 1 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  2. STUART ROBSON FRONT-END DEVELOPER www.alwaystwisted.com 2 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  3. MODERN SASS ARCHITECTURE 3 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  4. 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
  5. FOLDER AND FILE STRUCTURE 5 — // Modern Sass Architecture

    - #ASOSTechUI 2016
  6. 6 — // Modern Sass Architecture - #ASOSTechUI 2016

  7. 7 — // Modern Sass Architecture - #ASOSTechUI 2016

  8. 8 — // Modern Sass Architecture - #ASOSTechUI 2016

  9. 9 — // Modern Sass Architecture - #ASOSTechUI 2016

  10. 10 — // Modern Sass Architecture - #ASOSTechUI 2016

  11. 11 — // Modern Sass Architecture - #ASOSTechUI 2016

  12. 12 — // Modern Sass Architecture - #ASOSTechUI 2016

  13. RESPONSIVE WEB DESIGN 13 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  14. 14 — // Modern Sass Architecture - #ASOSTechUI 2016

  15. 15 — // Modern Sass Architecture - #ASOSTechUI 2016

  16. 16 — // Modern Sass Architecture - #ASOSTechUI 2016

  17. All we had was a single CSS file, longer than

    a sleepless night. — Hugo Giraudel 17 — // Modern Sass Architecture - #ASOSTechUI 2016
  18. SPLITTING OUT OUR CSS 18 — // Modern Sass Architecture

    - #ASOSTechUI 2016
  19. 19 — // Modern Sass Architecture - #ASOSTechUI 2016

  20. 20 — // Modern Sass Architecture - #ASOSTechUI 2016

  21. 21 — // Modern Sass Architecture - #ASOSTechUI 2016

  22. 22 — // Modern Sass Architecture - #ASOSTechUI 2016

  23. FILES EVERYWHERE 23 — // Modern Sass Architecture - #ASOSTechUI

    2016
  24. 24 — // Modern Sass Architecture - #ASOSTechUI 2016

  25. 25 — // Modern Sass Architecture - #ASOSTechUI 2016

  26. 26 — // Modern Sass Architecture - #ASOSTechUI 2016

  27. 27 — // Modern Sass Architecture - #ASOSTechUI 2016

  28. 28 — // Modern Sass Architecture - #ASOSTechUI 2016

  29. SASS GIVES YOU EXTRA 29 — // Modern Sass Architecture

    - #ASOSTechUI 2016
  30. 30 — // Modern Sass Architecture - #ASOSTechUI 2016

  31. 31 — // Modern Sass Architecture - #ASOSTechUI 2016

  32. 32 — // Modern Sass Architecture - #ASOSTechUI 2016

  33. 33 — // Modern Sass Architecture - #ASOSTechUI 2016

  34. 34 — // Modern Sass Architecture - #ASOSTechUI 2016

  35. 35 — // Modern Sass Architecture - #ASOSTechUI 2016

  36. 36 — // Modern Sass Architecture - #ASOSTechUI 2016

  37. 37 — // Modern Sass Architecture - #ASOSTechUI 2016

  38. 38 — // Modern Sass Architecture - #ASOSTechUI 2016

  39. 39 — // Modern Sass Architecture - #ASOSTechUI 2016

  40. 40 — // Modern Sass Architecture - #ASOSTechUI 2016

  41. PARTIALS 41 — // Modern Sass Architecture - #ASOSTechUI 2016

  42. 42 — // Modern Sass Architecture - #ASOSTechUI 2016

  43. 43 — // Modern Sass Architecture - #ASOSTechUI 2016

  44. PARTIAL-POCALYPSE 44 — // Modern Sass Architecture - #ASOSTechUI 2016

  45. 45 — // Modern Sass Architecture - #ASOSTechUI 2016

  46. 46 — // Modern Sass Architecture - #ASOSTechUI 2016

  47. 47 — // Modern Sass Architecture - #ASOSTechUI 2016

  48. MODERN SASS ARCHITECTURE 48 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  49. A place for everything, and everything in its place —

    Mrs Beeton 49 — // Modern Sass Architecture - #ASOSTechUI 2016
  50. 50 — // Modern Sass Architecture - #ASOSTechUI 2016

  51. 7-1 Pattern — Hugo Giraudel 51 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  52. 6-1 FOLDER STRUCTURE 52 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  53. 53 — // Modern Sass Architecture - #ASOSTechUI 2016

  54. BASE/ 54 — // Modern Sass Architecture - #ASOSTechUI 2016

  55. BASE/ > reset or normalize > typography settings > primitive

    or atomic defaults > code for common HTML elements 55 — // Modern Sass Architecture - #ASOSTechUI 2016
  56. 56 — // Modern Sass Architecture - #ASOSTechUI 2016

  57. COMPONENTS/ 57 — // Modern Sass Architecture - #ASOSTechUI 2016

  58. COMPONENTS/ > smaller modules of a site > tabs, carousel,

    accordian 58 — // Modern Sass Architecture - #ASOSTechUI 2016
  59. 59 — // Modern Sass Architecture - #ASOSTechUI 2016

  60. LAYOUTS/ 60 — // Modern Sass Architecture - #ASOSTechUI 2016

  61. LAYOUTS/ > the layout of a site > header, footer,

    aside, main 61 — // Modern Sass Architecture - #ASOSTechUI 2016
  62. 62 — // Modern Sass Architecture - #ASOSTechUI 2016

  63. PAGES/ 63 — // Modern Sass Architecture - #ASOSTechUI 2016

  64. 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
  65. 65 — // Modern Sass Architecture - #ASOSTechUI 2016

  66. VENDOR/ 66 — // Modern Sass Architecture - #ASOSTechUI 2016

  67. VENDOR/ > files written by others > external frameworks or

    libraries 67 — // Modern Sass Architecture - #ASOSTechUI 2016
  68. 68 — // Modern Sass Architecture - #ASOSTechUI 2016

  69. CONFIG/ 69 — // Modern Sass Architecture - #ASOSTechUI 2016

  70. CONFIG/ > Sass code that doesn't compile CSS > tools

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

    _helpers.scss 71 — // Modern Sass Architecture - #ASOSTechUI 2016
  72. _mixins.scss 72 — // Modern Sass Architecture - #ASOSTechUI 2016

  73. 73 — // Modern Sass Architecture - #ASOSTechUI 2016

  74. _variables.scss 74 — // Modern Sass Architecture - #ASOSTechUI 2016

  75. All we had was a single Sass variables file, longer

    than a sleepless night. — Stu Robson 75 — // Modern Sass Architecture - #ASOSTechUI 2016
  76. 634 LINES 76 — // Modern Sass Architecture - #ASOSTechUI

    2016
  77. 77 — // Modern Sass Architecture - #ASOSTechUI 2016

  78. _shame.scss 78 — // Modern Sass Architecture - #ASOSTechUI 2016

  79. 79 — // Modern Sass Architecture - #ASOSTechUI 2016

  80. 80 — // Modern Sass Architecture - #ASOSTechUI 2016

  81. 81 — // Modern Sass Architecture - #ASOSTechUI 2016

  82. 82 — // Modern Sass Architecture - #ASOSTechUI 2016

  83. 83 — // Modern Sass Architecture - #ASOSTechUI 2016

  84. MODERN SASS ARCHITECTURE 84 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  85. NAMING CONVENTIONS 85 — // Modern Sass Architecture - #ASOSTechUI

    2016
  86. #header-navigation { float: left; } .main-navigation-link { list-style: none; }

    .main-navigation-signup-link { color: red; } 86 — // Modern Sass Architecture - #ASOSTechUI 2016
  87. B.E.M. 87 — // Modern Sass Architecture - #ASOSTechUI 2016

  88. B - BLOCK 88 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  89. E - ELEMENT 89 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  90. M - MODIFIER 90 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  91. .block { [...] } .block__element { [...] } .block--modifier {

    [...] } .block__element--modifier { [...] } 91 — // Modern Sass Architecture - #ASOSTechUI 2016
  92. 92 — // Modern Sass Architecture - #ASOSTechUI 2016

  93. .nav { float: left; } .nav__link { list-style: none; }

    .nav__link--signup { color: red; } 93 — // Modern Sass Architecture - #ASOSTechUI 2016
  94. 94 — // Modern Sass Architecture - #ASOSTechUI 2016

  95. 95 — // Modern Sass Architecture - #ASOSTechUI 2016

  96. MODERN SASS ARCHITECTURE 96 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  97. COMPOSING DECLARATIONS 97 — // Modern Sass Architecture - #ASOSTechUI

    2016
  98. HOW TO WRITE YOUR SASS 98 — // Modern Sass

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

    Architecture - #ASOSTechUI 2016
  100. MAKE THE RULES 100 — // Modern Sass Architecture -

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

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

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

    height: 270px; width: 400px; } 103 — // Modern Sass Architecture - #ASOSTechUI 2016
  104. .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
  105. .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
  106. 106 — // Modern Sass Architecture - #ASOSTechUI 2016

  107. .component { // variables // extends // mixins // functions

    // CSS // parent selectors // media queries } 107 — // Modern Sass Architecture - #ASOSTechUI 2016
  108. .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
  109. 109 — // Modern Sass Architecture - #ASOSTechUI 2016

  110. CODE QUALITY AND CONSISTENCY 110 — // Modern Sass Architecture

    - #ASOSTechUI 2016
  111. LINTING 111 — // Modern Sass Architecture - #ASOSTechUI 2016

  112. 112 — // Modern Sass Architecture - #ASOSTechUI 2016

  113. 113 — // Modern Sass Architecture - #ASOSTechUI 2016

  114. 114 — // Modern Sass Architecture - #ASOSTechUI 2016

  115. MODERN SASS ARCHITECTURE 115 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  116. MAINTAINING VARIABLES 116 — // Modern Sass Architecture - #ASOSTechUI

    2016
  117. 117 — // Modern Sass Architecture - #ASOSTechUI 2016

  118. 634 LINES 118 — // Modern Sass Architecture - #ASOSTechUI

    2016
  119. 119 — // Modern Sass Architecture - #ASOSTechUI 2016

  120. $red-border: #f01e1e; $orange-underline: #EE7600; .component { background-color: $orange-underline; } 120

    — // Modern Sass Architecture - #ASOSTechUI 2016
  121. $red: #f01e1e; $dark-orange: #EE7600; .component { background-color: $dark-orange; } 121

    — // Modern Sass Architecture - #ASOSTechUI 2016
  122. $red: #f01e1e; $dark-orange: #EE7600; $brand-color-1: $red; $brand-color-2: $dark-orange; 122 —

    // Modern Sass Architecture - #ASOSTechUI 2016
  123. FOLLOW CLASSES 123 — // Modern Sass Architecture - #ASOSTechUI

    2016
  124. .border { border-top: 1px solid #f01e1e; } 124 — //

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

    — // Modern Sass Architecture - #ASOSTechUI 2016
  126. $red: #f01e1e; $border__color--main: $red; .border { border-top: 1px solid $border__color--main;

    } 126 — // Modern Sass Architecture - #ASOSTechUI 2016
  127. OVER THE TOP 127 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  128. 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
  129. MODERN SASS ARCHITECTURE 129 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  130. DOCUMENTATION 130 — // Modern Sass Architecture - #ASOSTechUI 2016

  131. I always say, keep a diary and someday it'll keep

    you. — Mae West 131 — // Modern Sass Architecture - #ASOSTechUI 2016
  132. START WITH DOCUMENTATION 132 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  133. 133 — // Modern Sass Architecture - #ASOSTechUI 2016

  134. // ==================== .classname ==================== // created by: Stuart Robson (

    stu@alwaystwisted.com ) // creation data: October 21, 2015 // upadate by: Stuart Robson ( stu@alwaystwisted.com ) // update data: November 05, 2015 // 1. Your text // =========================================================== 134 — // Modern Sass Architecture - #ASOSTechUI 2016
  135. WHAT IT DOES 135 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  136. WHY IT'S NEEDED 136 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  137. WHERE TO USE IT 137 — // Modern Sass Architecture

    - #ASOSTechUI 2016
  138. // ----------------------------------------------------------------- // note: Only use this on the home

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

    Sass Architecture - #ASOSTechUI 2016
  140. README.MD 140 — // Modern Sass Architecture - #ASOSTechUI 2016

  141. 141 — // Modern Sass Architecture - #ASOSTechUI 2016

  142. 142 — // Modern Sass Architecture - #ASOSTechUI 2016

  143. 143 — // Modern Sass Architecture - #ASOSTechUI 2016

  144. CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU

    144 — // Modern Sass Architecture - #ASOSTechUI 2016
  145. MODERN SASS ARCHITECTURE 145 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  146. WHEN NOT TO USE SASS 146 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  147. .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
  148. @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
  149. .component { @include background-horizontal; } 149 — // Modern Sass

    Architecture - #ASOSTechUI 2016
  150. 150 — // Modern Sass Architecture - #ASOSTechUI 2016

  151. .component { font-size: 16px; font-size: 1rem; } 151 — //

    Modern Sass Architecture - #ASOSTechUI 2016
  152. 152 — // Modern Sass Architecture - #ASOSTechUI 2016

  153. IS THAT CODE NEEDED 153 — // Modern Sass Architecture

    - #ASOSTechUI 2016
  154. 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
  155. CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU

    155 — // Modern Sass Architecture - #ASOSTechUI 2016
  156. THANKS @STUROBSON WWW.ALWAYSTWISTED.COM 156 — // Modern Sass Architecture -

    #ASOSTechUI 2016
  157. 157 — // Modern Sass Architecture - #ASOSTechUI 2016