It's important to keep up with technologies which will help us make our web development strategies as efficient and up to date as possible. Every so often, a new tool appears in the development world which may drastically change how we code. As a front-end developer, one of my favorites to have appeared over the past few years has been Sass (Syntactically Awesome Stylesheets). Sass is a stylesheet scripting language, technically called SassScript, which enhances CSS (Cascading Stylesheets) in many fun ways.
If you're not familiar with web development, CSS is the stylesheet language that is used to control all of the styles of websites. It controls everything from fonts, colors, and hover effects to the size of elements and where they are shown on the page. With the release of CSS3 the possibilities are seemingly endless, though that is a whole topic for another day.
As powerful as CSS has become, there are many features that would make it even more flexible, which is where Sass comes in. With Sass, we are now able to use tools such as variables and logic. For example, typically websites would have a few colors that are used throughout the entire site. So, you would have one color code copied over and over in several places throughout your file.
It may look something like this:
Now, what if you decide you want to change that blue color throughout the entire site? With CSS you would have to go through the entire file and replace every line with the new color code. However, if you used Sass, you could use something like this:
Notice how in this case, the color code only appears once. If you decide you want to change that color wherever it appears, you change it in one place, and it is automatically changed everywhere else '- which is a great time saver! You may also notice on line 24 there is another fun feature that Sass offers. If you decide you'd like a section to be a lighter version of the same color, Sass will handle that for you without having to touch Photoshop!
Another great feature that Sass offers is the use of mixins. When developing a website, we have to keep in mind that different browsers sometimes have different requirements. For example, when we want to have a box with rounded corners, Firefox, Internet Explorer (or whatever it's called this week), and Webkit browsers (such as Chrome and Safari) all need their own version of the 'Öborder-radius' attribute, which means what would be adding one line of code, really requires four just to make sure that everyone sees the same thing no matter which browser they choose to use.
With Sass, we can simplify this by using a mixin. This means that we can tell the code that when we use the '@include' line, to use all of the lines that that mixin uses.
This means that now every time we want to add rounded corners, we only have to add one line, and Sass takes care of the rest.
These are only two of many features that Sass offers, but just think of how much more efficient this makes building websites. By using tools like this, not only does it take less time for us to build themes, but it makes them much more flexible and easier to update in the future.