A presentation at ASOS Tech UI Meetup in in London, UK by Stuart Robson
MODERN SASS ARCHITECTURE 1 — // Modern Sass Architecture - #ASOSTechUI 2016
STUART ROBSON FRONT-END DEVELOPER www.alwaystwisted.com 2 — // Modern Sass Architecture - #ASOSTechUI 2016
MODERN SASS ARCHITECTURE 3 — // Modern Sass Architecture - #ASOSTechUI 2016
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
FOLDER AND FILE STRUCTURE 5 — // Modern Sass Architecture - #ASOSTechUI 2016
6 — // Modern Sass Architecture - #ASOSTechUI 2016
7 — // Modern Sass Architecture - #ASOSTechUI 2016
8 — // Modern Sass Architecture - #ASOSTechUI 2016
9 — // Modern Sass Architecture - #ASOSTechUI 2016
10 — // Modern Sass Architecture - #ASOSTechUI 2016
11 — // Modern Sass Architecture - #ASOSTechUI 2016
12 — // Modern Sass Architecture - #ASOSTechUI 2016
RESPONSIVE WEB DESIGN 13 — // Modern Sass Architecture - #ASOSTechUI 2016
14 — // Modern Sass Architecture - #ASOSTechUI 2016
15 — // Modern Sass Architecture - #ASOSTechUI 2016
16 — // Modern Sass Architecture - #ASOSTechUI 2016
All we had was a single CSS file, longer than a sleepless night. — Hugo Giraudel 17 — // Modern Sass Architecture - #ASOSTechUI 2016
SPLITTING OUT OUR CSS 18 — // Modern Sass Architecture - #ASOSTechUI 2016
19 — // Modern Sass Architecture - #ASOSTechUI 2016
20 — // Modern Sass Architecture - #ASOSTechUI 2016
21 — // Modern Sass Architecture - #ASOSTechUI 2016
22 — // Modern Sass Architecture - #ASOSTechUI 2016
FILES EVERYWHERE 23 — // Modern Sass Architecture - #ASOSTechUI 2016
24 — // Modern Sass Architecture - #ASOSTechUI 2016
25 — // Modern Sass Architecture - #ASOSTechUI 2016
26 — // Modern Sass Architecture - #ASOSTechUI 2016
27 — // Modern Sass Architecture - #ASOSTechUI 2016
28 — // Modern Sass Architecture - #ASOSTechUI 2016
SASS GIVES YOU EXTRA 29 — // Modern Sass Architecture - #ASOSTechUI 2016
30 — // Modern Sass Architecture - #ASOSTechUI 2016
31 — // Modern Sass Architecture - #ASOSTechUI 2016
32 — // Modern Sass Architecture - #ASOSTechUI 2016
33 — // Modern Sass Architecture - #ASOSTechUI 2016
34 — // Modern Sass Architecture - #ASOSTechUI 2016
35 — // Modern Sass Architecture - #ASOSTechUI 2016
36 — // Modern Sass Architecture - #ASOSTechUI 2016
37 — // Modern Sass Architecture - #ASOSTechUI 2016
38 — // Modern Sass Architecture - #ASOSTechUI 2016
39 — // Modern Sass Architecture - #ASOSTechUI 2016
40 — // Modern Sass Architecture - #ASOSTechUI 2016
PARTIALS 41 — // Modern Sass Architecture - #ASOSTechUI 2016
42 — // Modern Sass Architecture - #ASOSTechUI 2016
43 — // Modern Sass Architecture - #ASOSTechUI 2016
PARTIAL-POCALYPSE 44 — // Modern Sass Architecture - #ASOSTechUI 2016
45 — // Modern Sass Architecture - #ASOSTechUI 2016
46 — // Modern Sass Architecture - #ASOSTechUI 2016
47 — // Modern Sass Architecture - #ASOSTechUI 2016
MODERN SASS ARCHITECTURE 48 — // Modern Sass Architecture - #ASOSTechUI 2016
A place for everything, and everything in its place — Mrs Beeton 49 — // Modern Sass Architecture - #ASOSTechUI 2016
50 — // Modern Sass Architecture - #ASOSTechUI 2016
7-1 Pattern — Hugo Giraudel 51 — // Modern Sass Architecture - #ASOSTechUI 2016
6-1 FOLDER STRUCTURE 52 — // Modern Sass Architecture - #ASOSTechUI 2016
53 — // Modern Sass Architecture - #ASOSTechUI 2016
BASE/ 54 — // Modern Sass Architecture - #ASOSTechUI 2016
BASE/ > reset or normalize > typography settings > primitive or atomic defaults > code for common HTML elements 55 — // Modern Sass Architecture - #ASOSTechUI 2016
56 — // Modern Sass Architecture - #ASOSTechUI 2016
COMPONENTS/ 57 — // Modern Sass Architecture - #ASOSTechUI 2016
COMPONENTS/ > smaller modules of a site > tabs, carousel, accordian 58 — // Modern Sass Architecture - #ASOSTechUI 2016
59 — // Modern Sass Architecture - #ASOSTechUI 2016
LAYOUTS/ 60 — // Modern Sass Architecture - #ASOSTechUI 2016
LAYOUTS/ > the layout of a site > header, footer, aside, main 61 — // Modern Sass Architecture - #ASOSTechUI 2016
62 — // Modern Sass Architecture - #ASOSTechUI 2016
PAGES/ 63 — // Modern Sass Architecture - #ASOSTechUI 2016
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 — // Modern Sass Architecture - #ASOSTechUI 2016
VENDOR/ 66 — // Modern Sass Architecture - #ASOSTechUI 2016
VENDOR/ > files written by others > external frameworks or libraries 67 — // Modern Sass Architecture - #ASOSTechUI 2016
68 — // Modern Sass Architecture - #ASOSTechUI 2016
CONFIG/ 69 — // Modern Sass Architecture - #ASOSTechUI 2016
CONFIG/ > Sass code that doesn’t compile CSS > tools and helpers > mixins, variables, functions 70 — // Modern Sass Architecture - #ASOSTechUI 2016
CONFIG/ |- config/ |-|- _variables.scss |-|- _functions.scss |-|- _mixins.scss |-|- _helpers.scss 71 — // Modern Sass Architecture - #ASOSTechUI 2016
_mixins.scss 72 — // Modern Sass Architecture - #ASOSTechUI 2016
73 — // Modern Sass Architecture - #ASOSTechUI 2016
_variables.scss 74 — // Modern Sass Architecture - #ASOSTechUI 2016
All we had was a single Sass variables file, longer than a sleepless night. — Stu Robson 75 — // Modern Sass Architecture - #ASOSTechUI 2016
634 LINES 76 — // Modern Sass Architecture - #ASOSTechUI 2016
77 — // Modern Sass Architecture - #ASOSTechUI 2016
_shame.scss 78 — // Modern Sass Architecture - #ASOSTechUI 2016
79 — // Modern Sass Architecture - #ASOSTechUI 2016
80 — // Modern Sass Architecture - #ASOSTechUI 2016
81 — // Modern Sass Architecture - #ASOSTechUI 2016
82 — // Modern Sass Architecture - #ASOSTechUI 2016
83 — // Modern Sass Architecture - #ASOSTechUI 2016
MODERN SASS ARCHITECTURE 84 — // Modern Sass Architecture - #ASOSTechUI 2016
NAMING CONVENTIONS 85 — // Modern Sass Architecture - #ASOSTechUI 2016
#header-navigation { float: left; } .main-navigation-link { list-style: none; } .main-navigation-signup-link { color: red; } 86 — // Modern Sass Architecture - #ASOSTechUI 2016
B.E.M. 87 — // Modern Sass Architecture - #ASOSTechUI 2016
B - BLOCK 88 — // Modern Sass Architecture - #ASOSTechUI 2016
E - ELEMENT 89 — // Modern Sass Architecture - #ASOSTechUI 2016
M - MODIFIER 90 — // Modern Sass Architecture - #ASOSTechUI 2016
.block { […] } .block__element { […] } .block—modifier { […] } .block__element—modifier { […] } 91 — // Modern Sass Architecture - #ASOSTechUI 2016
92 — // Modern Sass Architecture - #ASOSTechUI 2016
.nav { float: left; } .nav__link { list-style: none; } .nav__link—signup { color: red; } 93 — // Modern Sass Architecture - #ASOSTechUI 2016
94 — // Modern Sass Architecture - #ASOSTechUI 2016
95 — // Modern Sass Architecture - #ASOSTechUI 2016
MODERN SASS ARCHITECTURE 96 — // Modern Sass Architecture - #ASOSTechUI 2016
COMPOSING DECLARATIONS 97 — // Modern Sass Architecture - #ASOSTechUI 2016
HOW TO WRITE YOUR SASS 98 — // Modern Sass Architecture - #ASOSTechUI 2016
HOW TO WRITE YOUR CSS 99 — // Modern Sass Architecture - #ASOSTechUI 2016
MAKE THE RULES 100 — // Modern Sass Architecture - #ASOSTechUI 2016
single line or multi-line > ordering alphabetically or type > level of nesting 101 — // Modern Sass Architecture - #ASOSTechUI 2016
.component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; } 102 — // Modern Sass Architecture - #ASOSTechUI 2016
.component { background-color: #BADA55; border: 1px solid #000; height: 300px; height: 270px; width: 400px; } 103 — // Modern Sass Architecture - #ASOSTechUI 2016
.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
.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 — // Modern Sass Architecture - #ASOSTechUI 2016
.component { // variables // extends // mixins // functions // CSS // parent selectors // media queries } 107 — // Modern Sass Architecture - #ASOSTechUI 2016
.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 — // Modern Sass Architecture - #ASOSTechUI 2016
CODE QUALITY AND CONSISTENCY 110 — // Modern Sass Architecture - #ASOSTechUI 2016
LINTING 111 — // Modern Sass Architecture - #ASOSTechUI 2016
112 — // Modern Sass Architecture - #ASOSTechUI 2016
113 — // Modern Sass Architecture - #ASOSTechUI 2016
114 — // Modern Sass Architecture - #ASOSTechUI 2016
MODERN SASS ARCHITECTURE 115 — // Modern Sass Architecture - #ASOSTechUI 2016
MAINTAINING VARIABLES 116 — // Modern Sass Architecture - #ASOSTechUI 2016
117 — // Modern Sass Architecture - #ASOSTechUI 2016
634 LINES 118 — // Modern Sass Architecture - #ASOSTechUI 2016
119 — // Modern Sass Architecture - #ASOSTechUI 2016
$red-border: #f01e1e; $orange-underline: #EE7600; .component { background-color: $orange-underline; } 120 — // Modern Sass Architecture - #ASOSTechUI 2016
$red: #f01e1e; $dark-orange: #EE7600; .component { background-color: $dark-orange; } 121 — // Modern Sass Architecture - #ASOSTechUI 2016
$red: #f01e1e; $dark-orange: #EE7600; $brand-color-1: $red; $brand-color-2: $dark-orange; 122 — // Modern Sass Architecture - #ASOSTechUI 2016
FOLLOW CLASSES 123 — // Modern Sass Architecture - #ASOSTechUI 2016
.border { border-top: 1px solid #f01e1e; } 124 — // Modern Sass Architecture - #ASOSTechUI 2016
$red: #f01e1e; .border { border-top: 1px solid $red; } 125 — // Modern Sass Architecture - #ASOSTechUI 2016
$red: #f01e1e; $border__color—main: $red; .border { border-top: 1px solid $border__color—main; } 126 — // Modern Sass Architecture - #ASOSTechUI 2016
OVER THE TOP 127 — // Modern Sass Architecture - #ASOSTechUI 2016
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
MODERN SASS ARCHITECTURE 129 — // Modern Sass Architecture - #ASOSTechUI 2016
DOCUMENTATION 130 — // Modern Sass Architecture - #ASOSTechUI 2016
I always say, keep a diary and someday it’ll keep you. — Mae West 131 — // Modern Sass Architecture - #ASOSTechUI 2016
START WITH DOCUMENTATION 132 — // Modern Sass Architecture - #ASOSTechUI 2016
133 — // Modern Sass Architecture - #ASOSTechUI 2016
// // created by: Stuart Robson ( stu@alwaystwisted.com ) creation data: October 21, 2015 // // upadate by: update data: //
WHAT IT DOES 135 — // Modern Sass Architecture - #ASOSTechUI 2016
WHY IT’S NEEDED 136 — // Modern Sass Architecture - #ASOSTechUI 2016
WHERE TO USE IT 137 — // Modern Sass Architecture - #ASOSTechUI 2016
// ————————————————————————————————// note: Only use this on the home page. // ————————————————————————————————- 138 — // Modern Sass Architecture - #ASOSTechUI 2016
// todo: add support for IE7 139 — // Modern Sass Architecture - #ASOSTechUI 2016
README.MD 140 — // Modern Sass Architecture - #ASOSTechUI 2016
141 — // Modern Sass Architecture - #ASOSTechUI 2016
142 — // Modern Sass Architecture - #ASOSTechUI 2016
143 — // Modern Sass Architecture - #ASOSTechUI 2016
CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 144 — // Modern Sass Architecture - #ASOSTechUI 2016
MODERN SASS ARCHITECTURE 145 — // Modern Sass Architecture - #ASOSTechUI 2016
WHEN NOT TO USE SASS 146 — // Modern Sass Architecture - #ASOSTechUI 2016
.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
@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
.component { @include background-horizontal; } 149 — // Modern Sass Architecture - #ASOSTechUI 2016
150 — // Modern Sass Architecture - #ASOSTechUI 2016
.component { font-size: 16px; font-size: 1rem; } 151 — // Modern Sass Architecture - #ASOSTechUI 2016
152 — // Modern Sass Architecture - #ASOSTechUI 2016
IS THAT CODE NEEDED 153 — // Modern Sass Architecture - #ASOSTechUI 2016
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
CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 155 — // Modern Sass Architecture - #ASOSTechUI 2016
THANKS @STUROBSON WWW.ALWAYSTWISTED.COM 156 — // Modern Sass Architecture - #ASOSTechUI 2016
157 — // Modern Sass Architecture - #ASOSTechUI 2016
A romp through some tips, tricks, ideas and methods for creating a modern architecture when writing Sass. Topics include -
