Now that your developer has installed SASS (Syntactically Awesome Stylesheets) they may seem pretty excited, but what does SASS have to offer you, the designer? In general terms, having a web developer who uses SASS means that large site-wide design changes can now be implemented much faster and without the headache. Two important features that SASS adds to CSS are variables and mixins.
Mmm… Mixins
Mixins are chunks of code that can be called throughout a website with one small line. Mixins can also be set up to accept variables for different CSS properties, for example font or color. This means that if you decide to change something, for example a particular font that is used on the entire site, your developer only has to swap out the old font with the new by changing the value of one variable. That certainly beats having to hunt through all of the code for each instance of that font being used. Another game changing application of variables and mixins within SASS is the ability to create easily tweaked templates for common features integrated into a website, and even making templates for entire site layouts and color schemes.
Customizable Code Templates
Having SASS templates for common website formats and features greatly speeds up the development process. A developer can create basic site layout templates with mixins, as well as templates for different content layouts. These can all be applied to an existing website, radically changing the appearance of the site with minimal headache. In addition to layout templates, SASS creates the possibility for making color palette templates as well.
Variable Color Schemes
One of the great features added to CSS by SASS are the “darken” and “lighten” functions. These built in functions allow colors to be either lightened or darkened by a percentage. A simple application of this feature could be changing the color of a link in the main navigation bar as someone hovers over it. Instead of having to find a similar color that is slightly lighter or darker than the original, these color functions give the developer the ability to simply lighten or darken the original color by a defined percentage right in the code. This feature can even be applied to an entire website to make a variable color scheme which can be easily changed and tweaked.
Let’s say you want to make a website with different shades of blue and black. Using this “color template” method the developer can set two variables to black and blue, and then tweak these colors throughout the site with percentages. For example, the header and footer may be a 20% lighter version of the chosen blue and the main content background color may be a 10% darker version of that same blue, while the header font and the border colors on the site are a 20% lighter version of black. Incorporating this method into your design allows the color pallet of a website to be radically changed quite simply. If the variables holding the original black and blue values were changed to green and brown respectively, the entire site would respond to this change. The header and footer would now be a 20% lighter version of the chosen green, the content background would be a 10% darker version of the new green, and the header font and the border colors would become a 20% lighter version of the chosen brown. This feature gives you as the designer the ability to change the color pallet of a website with ease as many times as you desire.
Syntactically Awesome Stylesheets take the tedium out of tweaking a website for your developer, leaving you, the designer, more leeway to change the design features of a website even when development is well under way.