How to style different sites with one CSS collection

For the new codebase, we upgraded to SCSS which, among other things, supports the use of CSS variables.By combining the powerful methodology of SMACCS with the robust flexibility of SCSS variables, we architected a robust, scalable CSS framework capable of driving multiple sites simultaneously.Here’s how it works.In this example, we’ll style two different looking sites using the same CSS.Visually, here’s what the difference looks like:First, here’s the style for Site 1’s nav and footer:// Site 1.nav { color: #fff;}..nav-logo { background: url(images/site-1-logo.svg);}.footer { background: transparent;}And Site 2’s styles:// Site 2.nav { color: #fff;}..nav-logo { background: url(images/site-2-logo.svg);}.footer { background: #f00;}Next, we’ll create a new file called styles.scss..It will drive the styles for both sites, even though they look different.Since both sites use the same text color for .nav, we won’t variable-ize it.The other classes have unique property values..For those we’ll state the property, but leave the value empty temporarily..You’ll see why shortly:// New file: styles.scss.nav { color: #fff; // same for both sites}..nav-logo { background: ;}.footer { background: ;}Variable-ize all the things.Next, let’s create a SCSS variables for properties with unique values.We’ll follow this pattern:Name the SCSS variable using the class and property names.Define the variable in two new SCSS files..One for each site.Again, notice we don’t variable-ize the color property value of .nav because it’s not unique..Both sites use the same nav text color, so we don’t need to write a variable for it.However, we do need variables for the other properties..So, let’s create a SCSS variable called $nav-logo-background for the background property value of .nav-logo:// File: styles.scss.nav { color: #fff;}.nav-logo { background: $nav-logo-background; // new variable}.footer { background: ;}And in two new files we’ll define the unique values of that variable for each site:// New file: site-1/variables.scss$nav-logo-background: url(images/site-1-logo.svg);// New file: site-2/variables.scss$nav-logo-background: url(images/site-2-logo.svg);Finally, we follow the same pattern to create a SCSS variable for the footer background, called $footer-background:// File: styles.scss.nav { color: #fff;}.nav-logo { background: $nav-logo-background;}.footer { background: $footer-background; // new variable}And define it uniquely for both sites:// File: site-1/variables.scss$nav-logo-background: url(images/site-1-logo.svg);$footer-background: transparent;// File: site-2/variables.scss$nav-logo-background: url(images/site-2-logo.svg);$footer-background: #f00;Boom..Two different sites..One CSS stylesheet.At this point, several questions arise.. More details

Leave a Reply