Notes for CSS - Preprocessors By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 7 Markdown ## Slide 20 http://macdown.uranusjr.com ## Slide 23 http://markdownpad.com If you’re on Windows, Markdown Monster is even better than MarkdownPad, but it costs more ## Slide 24 http://markdownpad.com ## Slide 26 http://lesscss.org ## Slide 27 http://lesscss.org ## Slide 28 http://sass-lang.com ## Slide 29 https://web.archive.org/web/20120522131445/http://nex-3.com/posts/98-haml-sass-3-release-candidate-1-released https://web.archive.org/web/20100404070146/http://beta.sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#scss_sassy_css ## Slide 41 http://codepen.io/websanity/pen/KVomeJ?editors=0100 ## Slide 42 http://codepen.io/websanity/pen/KVomeJ?editors=0100 ## Slide 43 http://codepen.io/websanity/pen/KVomeJ?editors=0100 ## Slide 44 http://codepen.io/websanity/pen/KVomeJ?editors=0100 ## Slide 45 https://en.wikipedia.org/wiki/Don%27t_repeat_yourself ## Slide 49 https://sass-lang.com/documentation/variables#scope ## Slide 50 https://sass-lang.com/documentation/variables#scope ## Slide 51 https://sass-lang.com/documentation/variables#scope ## Slide 52 https://sass-lang.com/documentation/variables#scope ## Slide 58 http://codepen.io/websanity/pen/BjYEEd?editors=1100 ## Slide 59 http://codepen.io/websanity/pen/BjYEEd?editors=1100 ## Slide 60 http://codepen.io/websanity/pen/BjYEEd?editors=1100 ## Slide 61 http://codepen.io/websanity/pen/BjYEEd?editors=1100 ## Slide 64 http://codepen.io/websanity/pen/xZWRqb?editors=0100 ## Slide 65 http://codepen.io/websanity/pen/xZWRqb?editors=0100 ## Slide 66 http://codepen.io/websanity/pen/xZWRqb?editors=0100 Why aren’t I using HSL? See the next slide! ## Slide 67 http://codepen.io/websanity/pen/xZWRqb?editors=0100 ## Slide 68 http://codepen.io/websanity/pen/xZWRqb?editors=0100 ## Slide 76 http://codepen.io/websanity/pen/jWzmKX?editors=0100 ## Slide 77 http://codepen.io/websanity/pen/jWzmKX?editors=0100 ## Slide 78 http://codepen.io/websanity/pen/jWzmKX?editors=0100 ## Slide 79 http://codepen.io/websanity/pen/jWzmKX?editors=0100 ## Slide 83 http://codepen.io/websanity/pen/vLjmpX?editors=1100 ## Slide 84 http://codepen.io/websanity/pen/vLjmpX?editors=1100 ## Slide 85 http://codepen.io/websanity/pen/vLjmpX?editors=1100 ## Slide 86 http://codepen.io/websanity/pen/jWxmgX?editors=1100 ## Slide 87 http://codepen.io/websanity/pen/jWxmgX?editors=1100 ## Slide 90 http://codepen.io/websanity/pen/obMevw?editors=1100 ## Slide 91 http://codepen.io/websanity/pen/obMevw?editors=1100 ## Slide 92 More about & in the next section, but for now, understand it’s grabbing footer a http://codepen.io/websanity/pen/obMevw?editors=1100 ## Slide 93 http://codepen.io/websanity/pen/obMevw?editors=1100 ## Slide 95 Actually, & needed for any compound selector (see https://www.w3.org/TR/selectors4/#structure) ## Slide 96 Actually, & needed for any compound selector (see https://www.w3.org/TR/selectors4/#structure) ## Slide 98 http://codepen.io/websanity/pen/xZjrZO?editors=1100 ## Slide 99 http://codepen.io/websanity/pen/xZjrZO?editors=1100 ## Slide 100 http://codepen.io/websanity/pen/xZjrZO?editors=1100 ## Slide 104 http://codepen.io/websanity/pen/xZjrZO?editors=1100 ## Slide 105 https://sass-lang.com/documentation/style-rules/parent-selector ## Slide 109 https://codepen.io/websanity/pen/ZEQvxqq?editors=1100 https://sass-lang.com/documentation/style-rules/parent-selector ## Slide 110 https://codepen.io/websanity/pen/ZEQvxqq?editors=1100 https://sass-lang.com/documentation/style-rules/parent-selector ## Slide 116 http://codepen.io/websanity/pen/XXqgqj?editors=1100 ## Slide 117 http://codepen.io/websanity/pen/XXqgqj?editors=1100 ## Slide 126 https://codepen.io/websanity/pen/rpgPeN?editors=1100 ## Slide 127 https://codepen.io/websanity/pen/rpgPeN?editors=1100 ## Slide 128 https://codepen.io/websanity/pen/rpgPeN?editors=1100 ## Slide 131 http://codepen.io/websanity/pen/obdwRd?editors=1100 ## Slide 132 http://codepen.io/websanity/pen/obdwRd?editors=1100 ## Slide 133 http://codepen.io/websanity/pen/obdwRd?editors=1100 ## Slide 134 http://codepen.io/websanity/pen/obdwRd?editors=1100 ## Slide 135 http://codepen.io/websanity/pen/obdwRd?editors=1100 ## Slide 136 http://codepen.io/websanity/pen/obdwRd?editors=1100 ## Slide 141 http://codepen.io/websanity/full/vgZRBB/ ## Slide 142 http://codepen.io/websanity/full/vgZRBB/ ## Slide 143 http://codepen.io/websanity/full/vgZRBB/ ## Slide 144 background-color: pink is the default until overridden by breakpoint(s) http://codepen.io/websanity/full/vgZRBB/ ## Slide 145 http://codepen.io/websanity/full/vgZRBB/ ## Slide 146 http://codepen.io/websanity/full/vgZRBB/ ## Slide 147 http://codepen.io/websanity/full/vgZRBB/ ## Slide 148 http://codepen.io/websanity/full/vgZRBB/ ## Slide 150 http://codepen.io/websanity/full/vgZRBB/ ## Slide 151 Why height on html & min-height on body? See https://codepen.io/absolutholz/post/html-and-body-element-height-100 ## Slide 153 https://codepen.io/absolutholz/post/html-and-body-element-height-100 ## Slide 154 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 155 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 156 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 157 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 158 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 159 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 160 https://codepen.io/websanity/pen/JmXgNG?editors=0100 ## Slide 162 Why not use @extend? Basically, because they create a lot of selectors. See: https://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/ https://tech.bellycard.com/blog/sass-mixins-vs-extends-the-data/ ## Slide 165 Not mixins, but it works with Bourbon http://neat.bourbon.io ## Slide 166 http://compass-style.org ## Slide 167 https://duckduckgo.com/?q=useful+sass+mixins ## Slide 184 http://alrra.github.com/little-helpers/vendor-prefixes/ ## Slide 185 http://shouldiprefix.com/#flexbox https://caniuse.com/#search=display%3A%20flex https://css-tricks.com/using-flexbox/ https://developer.mozilla.org/en-US/docs/Web/CSS/display https://css-tricks.com/old-flexbox-and-new-flexbox/ ## Slide 186 https://caniuse.com/#search=display%3A%20flex ## Slide 187 https://github.com/postcss/autoprefixer ## Slide 189 https://github.com/ai/browserslist#queries ## Slide 190 https://github.com/postcss/autoprefixer ## Slide 192 @supports is defined in CSS Conditional Rules Module Level 3 (Editor’s Draft as of August 10, 2018) https://drafts.csswg.org/css-conditional-3/#at-supports ## Slide 196 https://caniuse.com/#feat=css-featurequeries ## Slide 201 https://github.com/jasonsanjose/brackets-sass ## Slide 205 https://github.com/jasonsanjose/brackets-sass ## Slide 206 https://github.com/jasonsanjose/brackets-sass ## Slide 208 https://github.com/jasonsanjose/brackets-sass ## Slide 209 https://github.com/jasonsanjose/brackets-sass ## Slide 210 Pseudo-nesting indicate relationships between CSS selectors You don’t edit the generated CSS, so who cares about the ending curly brace? https://github.com/jasonsanjose/brackets-sass ## Slide 211 https://github.com/jasonsanjose/brackets-sass ## Slide 212 https://github.com/jasonsanjose/brackets-sass ## Slide 213 https://github.com/jasonsanjose/brackets-sass ## Slide 214 https://github.com/jasonsanjose/brackets-sass ## Slide 215 https://github.com/jasonsanjose/brackets-sass ## Slide 220 https://github.com/jasonsanjose/brackets-sass ## Slide 226 https://github.com/konstantinkobs/brackets-SASShints ## Slide 234 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 235 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 236 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 237 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 238 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 239 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 240 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 241 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 242 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 243 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 244 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 245 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 246 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 247 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 248 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 249 http://codepen.io/websanity/pen/ZQrwyd?editors=1100 ## Slide 257 https://github.com/gulpjs/gulp/blob/master/docs/recipes/rebuild-only-files-that-change.md ## Slide 259 https://gruntjs.com ## Slide 260 https://en.wikipedia.org/wiki/Grunt_(software) https://gruntjs.com/plugins ## Slide 261 https://gruntjs.com/plugins ## Slide 263 https://gulpjs.com ## Slide 265 https://gulpjs.com ## Slide 269 http://incident57.com/codekit/ ## Slide 287 https://prepros.io ## Slide 314 https://web.archive.org/web/20190521184217/https://www.xanthir.com/blog/b4KT0 ## Slide 315 https://web.archive.org/web/20190521184217/https://www.xanthir.com/blog/b4KT0 ## Slide 317 https://codepen.io/websanity/pen/ZNXMqL?editors=1100 ## Slide 318 https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#using-variables ## Slide 319 See Example 10 on https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#using-variables ## Slide 320 See Example 10 on https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#using-variables ## Slide 321 https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#defining-variables ## Slide 329 https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#syntax ## Slide 330 https://googlechrome.github.io/samples/css-custom-properties/index.html ## Slide 331 You could store all the custom properties used for i18n in their own file https://www.w3.org/TR/2015/CR-css-variables-1-20151203/#syntax ## Slide 332 https://caniuse.com/#search=custom%20properties https://caniuse.com/#search=var() ## Slide 334 Emphasis added https://www.w3.org/TR/css-variables-1/#using-variables ## Slide 336 For JavaScript & CSS environment variables, see https://blog.logrocket.com/why-you-should-use-css-env-9ee719ce0f24/ ## Slide 337 https://drafts.csswg.org/css-env-1/ ## Slide 338 https://drafts.csswg.org/css-env-1/ ## Slide 339 https://drafts.csswg.org/css-env-1/ ## Slide 340 Still problematic when rotated, which is why Apple has introduced new CSS functions min() and max(), currently only supported by Safari (https://caniuse.com/#search=min()) For more info, see https://webkit.org/blog/7929/designing-websites-for-iphone-x/ ## Slide 341 https://caniuse.com/#search=env()