Theming Sites with SASS

Editor's Notes

• #2: Introduction Thanks for coming
• #3: SASS is a CSS Pre-Processor that constitutes a “superset” of CSS. That means any valid CSS is already valid SASS (or “SCSS”, since the file extension is “.scss”). SASS adds features to CSS that make CSS more useful and powerful for developers. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_buttons.scss
• #4: There is a great official SASS website located at http://sass-lang.com that provides documentation and information about using SASS.
• #5: SASS allows you to organize files in whatever manner you wish. This, in turn, allows developers to adopt whatever design patterns they want. You have much more atomic control over your styles because you do not face the performance penalties involved with using many CSS files in your frontend code. With SASS, you edit source code in atomic, manageable files, and then the SASS Preprocessor handles compiling those files into valid CSS and combining them together into a single CSS file. You can get the best of both worlds — enjoy the benefits of editing source code in small files while you enjoy the benefits of delivering a single file to your end user as quickly as possible. http://thesassway.com/beginner/how-to-structure-a-sass-project
• #6: Within your SASS files, you can use a hierarchical syntax to make more manageable style code that allows you to nest styles in sensible ways and extend existing styles in object-like ways. This allows CSS to become less repetitive and more flexible, and it allows developers to manage their code more precisely. (These hierarchies allow developers to make containers for sets of child styles, which mimics more precisely the way actual CSS processing happens.) http://thesassway.com/beginner/the-inception-rule
• #7: SASS allows developers to define variables with common data structures (strings, numbers, lists, maps, and colors) and then use those variables throughout their code. This allows for more programmatic configuration and control of style systems. In the example here, we are defining sets of fonts as variables and then using those fonts in actual style definitions.
• #8: SASS provides Mixins, which are, basically, code-generating functions. Mixins can accept parameters and then use those parameters to modulate style code, which is then inserted wherever the mixin is called. In the example here, from the Bootstrap 3 source code, we see the “button-variant” mixin, which accepts $color, $background, and $border as parameters. These three colors provide the information the mixin needs to generate the styles for a complete button. If, as a developer, I wanted to create a new type of button within my Bootstrap-based style system, I could call this mixin to generate the exact same set of style code as the default Bootstrap buttons for my own custom button.
• #9: SASS also includes various “SassScript” elements that can make it easier to create designs. We see two examples here: In the top image, the “darken()” and “lighten()” functions are used to modulate the color of the style. The bar shows how darken and lighten change the original color. In the lower image, we see a mixin definition that makes use of conditionals (“@if”) and the “lightness()” function, which returns the percentage value of “lightness” for a given color. This can be used, for example, to determine whether a darker or lighter color is being used for a background, and then a darker or lighter color can be used for text on that background. top: https://robots.thoughtbot.com/controlling-color-with-sass-color-functions bottom: http://12devs.co.uk/articles/handy-advanced-sass/
• #10: Those are the key features of SASS, and just a quick overview, but it is easy to see that these things are useful. Still, for many developers, they already have a method of writing code and working on styles. Why should I add this dependency to my development process when I’m doing just fine working with static CSS the way the W3C intended?
• #11: CSS involves writing a lot of repetitive code. People who start using CSS often recognize they are writing a lot of duplicate style definitions. Then developers adopt a more modular approach to defining styles, and that helps somewhat. But it is a difficult problem to solve only using the basic tools CSS provides you.
• #12: I would remind you about the words of Andrew Hunt and David Thomas in their book, The Pragmatic Programmer. In simpler terms: Don’t Repeat Yourself. https://pragprog.com/book/tpp/the-pragmatic-programmer “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.” — Andrew Hunt and David Thomas, The Pragmatic Programmer
• #13: CSS is a static thing. But developers are more and more sophisticated in their use of software to make the task of building websites easier. CSS is just missing many features Developers want and expect.
• #14: Aside from the file management and hierarchical code structure, this list of SassScript features is a good indicator of the many things that do not exist in CSS that many developers expect. Although the CSS Working Group is moving more towards adopting these things into standard CSS, it is not yet there. http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• #15: Why fight the trend? Many developers are using SASS, and many developers have created tools for using SASS.
• #16: Many CSS frameworks can be used in their compiled form by downloading them from the website, which is good. But they all become more powerful if you actually connect them into a style system built on SASS. In the case of Bootstrap, for example, you can define a large set of variables to govern the look of your site, and you can even use the mixins (like the one shown previously) to more quickly make new styles that fit the overall feel of the style framework. Using these frameworks in the context of SASS makes them exponentially more useful to your projects.
• #17: Aside from all those things, I want to focus in this presentation on a use case that is much easier to handle using SASS: Theming sites.
• #18: Theming for multiple brands is common. Many corporations own distinct properties, but they wish to leverage economies of scale for backend tools and systems. In this case, Discovery Communications has leveraged theming to present brand-appropriate websites using the same backend content management tools across all of their sites. This provides efficiencies that improves all of the sites. Although the number of brands is not huge (about 8), theming makes it possible to leverage these tools across all of them (and, likely, could scale to accommodate more brands).
• #19: I’ve actually worked with the Discovery Communications brands. I helped out on this application built for Discovery by Caktus Group, and we built themes using LESS and many of the same techniques I will talk about later. It was a critical requirement to support brand-specific themes so that people who are invited to an event on behalf of a specific brand would have a cohesive brand experience. Especially when inviting VIPs to events it is crucial that everything be in-place and nobody becomes offended by the experience. When inviting press to an event, the business wants to maintain brand image at all times. These are not just decorative issues.
• #20: At left is the PBS LearningMedia On Boarding page, which services PBS Members and affiliates delivering a localized version of the PBS LearningMedia website. At right are two examples of localized stations — top from Iowa Public Television, and the bottom from KCTS in Seattle. As with Discover Communications, PBS has a duty to support their member stations. Many of the tools, apps, and websites created at PBS allow for theming portions of the interface in order to allow local stations to feature localized versions. These localized versions are often augmented with programming or news specific to the region and support stations by allowing them to serve their communities in more ways. With over 180 local PBS stations, and far more partner and affiliate organizations, it would be impossible to hand-code themes for each organization. Template, profile, and theming tools are used to allow stations to define replacements for specific elements in the PBS LearningMedia interface, and those are swapped in to provide a themed experience.
• #21: Theming provides unique headers for different sections of the Vogue magazine website. Although this example may seem like a more decorative or frivolous use of themes, online magazines face the same challenges print magazines have in terms of maintaining a brand image throughout every page and section of the publication. Online versions of magazines have often faced challenges in maintaining the same high level of stability and continuity in terms of design and layout enjoyed by their offline cousins. It’s imperative for the experience of the magazine that design varies in specific and controlled ways in order to help readers navigate the information presented. In this case, theming could provide a more efficient way to define the variations.
• #22: http://www.shedworx.com/files/midvd-help/themes.png
• #23: The most common way to trigger a theme is to add a class to an HTML element. This is often the <body> element (shown on line 17 in the image here). Sometimes it could be a child element within the body such as the <header> element. You could even imagine doing mini-themes for specific content types so that you would add the class to specific content cards to indicate, for example, media types such as audio, video, gallery, article. For our example tonight we will imagine we’re theming the entire site, but these techniques scale well for custom purposes. You should probably limit the number of times you have to include this class. Adding it to a container element will allow you to target child elements that you wish to alter per theme.
• #24: These can be written as normal SCSS. You don’t need to use a subset of features, and you don’t need to avoid any functions or techniques. What you DO want to do is be aware of which parts of styles will need to be overridden by your theme styles.
• #25: In order to define the parts of your styles that change, you’ll want to create a Mixin to generate just the lines of code that need to change. You can control very precisely which attributes are created so you minimize the amount of duplicated code. Only attributes that change based on the theme parameters should be defined in this mixin.
• #26: Once you’ve defined your Mixin, you’ll want to call it for each theme that you wish to create.
• #27: Once you import the themes definition file, then your themes are all connected to your style system.
• #28: It is handy to add a quick theme switcher mechanism during development so you can more easily test your themes. Here is a simple script that handles swapping the class on the body tag.
• #30: To cue the theme to happen, only a class is required. Everything else falls out from this simple modulation of the HTML. That class can be manipulated using any number of different methods. But once it’s been set, everything else works.
• #31: With this approach, we leverage the full power of SASS and much of what we know about good systems design in order to create a cohesive, effective style system.
• #32: We are able to gain very precise control over the code that is generated, so we don’t waste any lines. Furthermore, we create very similar structures, which means our tools for compressing and delivering files will work even better when given our generated themes.
• #33: It’s easy to add a new theme. It’s easy to add new attributes to existing themes. It would be easy to scale this approach for any size of site.