Sass across a Network

Transcript

1. across a network using
2. across a network using Eddie Machado @eddiemachado http://themble.com/bones
3. One layout to rule them all
5. theme folder /assets /common /thechive /theberry /thebrigade /thethrottle /partials 404.php single.php …
6. theme folder /assets /common /thechive /theberry /thebrigade /thethrottle /partials 404.php single.php …
7. theme folder /assets /common /fonts /img /js /sass
8. /common /fonts /img /js /sass font icons or custom fonts /vendor common.js conditionally-loaded.js the fun stuff
9. /common/sass _common.scss _hack.scss _animations.scss _functions.scss _mixins.scss _normalize.scss _variables.scss _ads.scss _buttons.scss _comments.scss _footer.scss … _helpers.scss _icons.scss _typography.scss /base /modules
10. /common/sass _common.scss _hack.scss _animations.scss _functions.scss _mixins.scss _normalize.scss _variables.scss _ads.scss _buttons.scss _comments.scss _footer.scss … _helpers.scss _icons.scss _typography.scss /base /modules
11. /common/sass/_variables.scss $common-img-dir: $property-img-dir: ‘../../common/img/‘; ‘../img/‘; We use the common image directory for images that all properties share. The property image directory is when we need a custom image. Things like logos and backgrounds.
12. /common/sass/_variables.scss $white $light-text We declare common things like colors we use everywhere. $black $text-color $border-color $grey $light-grey $dark-border Other things like border, text, and form variables $facebook-blue $twitter-blue I also like to put social network or common colors used from popular sites. You never know when you’ll need them.
13. /common/sass/_variables.scss $chive-green We also declare our standard colors, just in case we need them on another property. $berry-purple $brigade-yellow $throttle-red Don’t go Variable Crazy! Colors: 199 After a quick audit, we found our CSS was a mess. Our Sass wasn’t organized and it was quickly abandoned after frustrated dev after dev just wrote standard CSS. Font Size: 145 Font Family: 45 Width: 715 Position: 182 Don’t repeat yourself 45 different shades of grey
14. /common/sass/_variables.scss $background-color: $link-color: $link-hover: $header-accent-line: $background-img: If we declare these common variables here, then we would have to override them later for each property. This would be problematic. $chive-green; url(#{$common-img-dir}/bg.jpg); $chive-green; darken($chive-green, 8%); lighten($chive-green, 14%);
15. Using your variables border-bottom: 1px solid $header-accent-line; background: $background-color $background-image; } .element { Don’t lock your styles in when you’re working in the _common.scss files. Know when and where you need to be flexible and allow yourself room to grow.
16. theme folder /assets /common /thechive /theberry /thebrigade /thethrottle /css /img style.scss
17. Compile Method 1 … modules … _variables.scss variable overrides _hack.scss … base … In each property’s style.scss file, we would have to place the overrides underneath the _variables.scss file and before the modules so the values would cascade down.
18. Compile Method 1 … modules … _variables.scss variable overrides _hack.scss … base … This is a problem because when we add more modules, we would have to add them to all 4 stylesheets. It’s a lot of duplication and again, a lot of room for error. mo modules, mo problems
19. Compile Method 2 … modules … _variables.scss variable overrides _hack.scss … base … Let’s keep all the common files together and include the variables in each property’s stylesheet that way we can maintain it on a per property basis.
20. Compile Method 2 … modules … _variables.scss variable overrides _hack.scss … base … Hey dummy, that’s not gonna work. The modules need those overrides. So what do we do? the modules won’t get overrides
21. !default to the rescue $variable: ‘one’; Normally, to override variables you define them after the original. With !default, it works the other way around. $variable: ‘two’; value = ‘two’ $variable: ‘two’; $variable: ‘one’ !default; value = ‘two’ If $variable is defined before !default, that overrides it. If it’s never defined, then !default is the value.
22. /common/sass/_variables.scss $background-color: $link-color: $link-hover: $header-accent-line: $background-img: If we declare these common variables here, then we would have to override them later for each property. This would be problematic. $chive-green; url(#{$common-img-dir}/bg.jpg); $chive-green; darken($chive-green, 8%); lighten($chive-green, 14%);
23. /common/sass/_variables.scss $background-color: $link-color: $link-hover: $header-accent-line: $background-img: Let’s declare the values we know will change based on the property using !default. But first, let’s take a step back. $grey !default; url(#{$common-img-dir}/bg.jpg) !default; $chive-green !default; darken($chive-green, 8%) !default; lighten($chive-green, 14%) !default;
24. /common/sass _common.scss _hack.scss _animations.scss _functions.scss _mixins.scss _normalize.scss _variables.scss _ads.scss _buttons.scss _comments.scss _footer.scss … _helpers.scss _icons.scss _typography.scss /base /modules
25. Compile Method 3 … modules … _variables.scss _hack.scss … base … We’re not going to compile the common styles as a separate stylesheet since we don’t want to load two CSS files. Instead we’re going to import it in each property’s style.scss file.
26. Compile Method 3 _common.scss variable overrides In each property’s style.scss file, we output the variable overrides, then import _common.scss. Using !default, all of our property’s values are overridden.
27. Compile Method 3 any custom property styles _common.scss variable overrides As a bonus, because we’ve imported _common.scss here, we can drop any other style overrides underneath it and keep our core styles cleaner and less cluttered.
28. theme folder /assets /common /thechive /theberry /thebrigade /thethrottle /partials 404.php single.php …
29. Thanks. @eddiemachado