A Modern Sass Architecture

A presentation at ASOS Tech UI Meetup in April 2016 in London, UK by Stuart Robson

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 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

Slide 5

Slide 5

FOLDER AND FILE STRUCTURE 5 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 6

Slide 6

6 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 7

Slide 7

7 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 8

Slide 8

8 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 9

Slide 9

9 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 10

Slide 10

10 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 11

Slide 11

11 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 12

Slide 12

12 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 13

Slide 13

RESPONSIVE WEB DESIGN 13 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 14

Slide 14

14 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 15

Slide 15

15 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 16

Slide 16

16 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 17

Slide 17

All we had was a single CSS file, longer than a sleepless night. — Hugo Giraudel 17 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 18

Slide 18

SPLITTING OUT OUR CSS 18 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 19

Slide 19

19 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 20

Slide 20

20 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 21

Slide 21

21 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 22

Slide 22

22 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 23

Slide 23

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

Slide 24

Slide 24

24 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 25

Slide 25

25 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 26

Slide 26

26 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 27

Slide 27

27 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 28

Slide 28

28 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 29

Slide 29

SASS GIVES YOU EXTRA 29 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 30

Slide 30

30 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 31

Slide 31

31 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 32

Slide 32

32 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 33

Slide 33

33 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 34

Slide 34

34 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 35

Slide 35

35 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 36

Slide 36

36 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 37

Slide 37

37 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 38

Slide 38

38 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 39

Slide 39

39 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 40

Slide 40

40 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 41

Slide 41

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

Slide 42

Slide 42

42 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 43

Slide 43

43 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 44

Slide 44

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

Slide 45

Slide 45

45 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 46

Slide 46

46 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 47

Slide 47

47 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 48

Slide 48

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

Slide 49

Slide 49

A place for everything, and everything in its place — Mrs Beeton 49 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 50

Slide 50

50 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 51

Slide 51

7-1 Pattern — Hugo Giraudel 51 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 52

Slide 52

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

Slide 53

Slide 53

53 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 54

Slide 54

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

Slide 55

Slide 55

BASE/ > reset or normalize > typography settings > primitive or atomic defaults > code for common HTML elements 55 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 56

Slide 56

56 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 57

Slide 57

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

Slide 58

Slide 58

COMPONENTS/ > smaller modules of a site > tabs, carousel, accordian 58 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 59

Slide 59

59 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 60

Slide 60

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

Slide 61

Slide 61

LAYOUTS/ > the layout of a site > header, footer, aside, main 61 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 62

Slide 62

62 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 63

Slide 63

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

Slide 64

Slide 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

Slide 65

Slide 65

65 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 66

Slide 66

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

Slide 67

Slide 67

VENDOR/ > files written by others > external frameworks or libraries 67 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 68

Slide 68

68 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 69

Slide 69

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

Slide 70

Slide 70

CONFIG/ > Sass code that doesn’t compile CSS > tools and helpers > mixins, variables, functions 70 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 71

Slide 71

CONFIG/ |- config/ |-|- _variables.scss |-|- _functions.scss |-|- _mixins.scss |-|- _helpers.scss 71 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 72

Slide 72

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

Slide 73

Slide 73

73 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 74

Slide 74

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

Slide 75

Slide 75

All we had was a single Sass variables file, longer than a sleepless night. — Stu Robson 75 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 76

Slide 76

634 LINES 76 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 77

Slide 77

77 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 78

Slide 78

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

Slide 79

Slide 79

79 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 80

Slide 80

80 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 81

Slide 81

81 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 82

Slide 82

82 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 83

Slide 83

83 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 84

Slide 84

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

Slide 85

Slide 85

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

Slide 86

Slide 86

#header-navigation { float: left; } .main-navigation-link { list-style: none; } .main-navigation-signup-link { color: red; } 86 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 87

Slide 87

B.E.M. 87 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 88

Slide 88

B - BLOCK 88 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 89

Slide 89

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

Slide 90

Slide 90

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

Slide 91

Slide 91

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

Slide 92

Slide 92

92 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 93

Slide 93

.nav { float: left; } .nav__link { list-style: none; } .nav__link—signup { color: red; } 93 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 94

Slide 94

94 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 95

Slide 95

95 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 96

Slide 96

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

Slide 97

Slide 97

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

Slide 98

Slide 98

HOW TO WRITE YOUR SASS 98 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 99

Slide 99

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

Slide 100

Slide 100

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

Slide 101

Slide 101

single line or multi-line > ordering alphabetically or type > level of nesting 101 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 102

Slide 102

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

Slide 103

Slide 103

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

Slide 104

Slide 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

Slide 105

Slide 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

Slide 106

Slide 106

106 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 107

Slide 107

.component { // variables // extends // mixins // functions // CSS // parent selectors // media queries } 107 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 108

Slide 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

Slide 109

Slide 109

109 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 110

Slide 110

CODE QUALITY AND CONSISTENCY 110 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 111

Slide 111

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

Slide 112

Slide 112

112 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 113

Slide 113

113 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 114

Slide 114

114 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 115

Slide 115

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

Slide 116

Slide 116

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

Slide 117

Slide 117

117 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 118

Slide 118

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

Slide 119

Slide 119

119 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 120

Slide 120

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

Slide 121

Slide 121

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

Slide 122

Slide 122

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

Slide 123

Slide 123

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

Slide 124

Slide 124

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

Slide 125

Slide 125

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

Slide 126

Slide 126

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

Slide 127

Slide 127

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

Slide 128

Slide 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

Slide 129

Slide 129

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

Slide 130

Slide 130

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

Slide 131

Slide 131

I always say, keep a diary and someday it’ll keep you. — Mae West 131 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 132

Slide 132

START WITH DOCUMENTATION 132 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 133

Slide 133

133 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 134

Slide 134

//

.classname

// // created by: Stuart Robson ( stu@alwaystwisted.com ) creation data: October 21, 2015 // // upadate by: update data: //

  1. Your text // =========================================================== Stuart Robson ( stu@alwaystwisted.com ) November 05, 2015 134 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 135

Slide 135

WHAT IT DOES 135 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 136

Slide 136

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

Slide 137

Slide 137

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

Slide 138

Slide 138

// ————————————————————————————————// note: Only use this on the home page. // ————————————————————————————————- 138 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 139

Slide 139

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

Slide 140

Slide 140

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

Slide 141

Slide 141

141 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 142

Slide 142

142 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 143

Slide 143

143 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 144

Slide 144

CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 144 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 145

Slide 145

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

Slide 146

Slide 146

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

Slide 147

Slide 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

Slide 148

Slide 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

Slide 149

Slide 149

.component { @include background-horizontal; } 149 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 150

Slide 150

150 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 151

Slide 151

.component { font-size: 16px; font-size: 1rem; } 151 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 152

Slide 152

152 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 153

Slide 153

IS THAT CODE NEEDED 153 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 154

Slide 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

Slide 155

Slide 155

CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 155 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 156

Slide 156

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

Slide 157

Slide 157

157 — // Modern Sass Architecture - #ASOSTechUI 2016