CSS as the styling technique and language has its own feature set which sometimes is not enough to maintain clean and reusable code and ensure unambiguity of data pieces across the stylesheet. The concept of preprocessor was developed to remove these restrictions and extend the core features. One of the most robust tool that aids in advanced CSS code writing and management is Sass.
Sass (short for Syntactically Awesome Stylesheets) is a scripting language that is interpreted into Cascading Style Sheets (CSS). It uses a dynamic construct approach instead of the old style static CSS rules. Sass is well documented and steadily gains popularity. There are several frameworks built with Sass, e.g. Compass, Bourbon, Susy, etc.
Sass is powerful and feature-rich solution for CSS development. It is a layer between created stylesheets and the .css files that are send to the browser. This preprocessor provides syntax that is completely compatible with all versions of CSS.
There are two syntaxes available for Sass. The older and more concise one is called indented syntax (or just Sass) and was inspired by Haml. It is still supported and its files have the extension .sass. The new main syntax is named SCSS. It is a superset of CSS3’s syntax and uses block formatting similar to CSS. Additionally, Sass supports a small set of extensions known as SassScript that can apply variables, arithmetic, selectors, property names, and extra functions in any property value.
Well-formatted and customizable output makes code easy to work with. Sass offers a set of useful features, including language extensions (such as variables, nesting, and mixins), inline imports, additional functions for manipulating colors and other values. Advanced features like control directives for libraries and Firebug integration ensure stable and fixable basis.
Sass is highly recommended CSS extension that reduces development time. Sass allows using DRY (Don't Repeat Yourself) principle while writing the code that makes it faster, more efficient and maintainable. Sass is integrated into several IDEs, e.g. Microsoft Visual Studio and WebMatrix, Eclipse, JetBrains RubyMine and PhpStorm, NetBeans, Emacs, and Vim.
One of the default features is compiling of templates and partials by Sass caches that improves caching process and speeds up re-compilation of large collections of Sass files. Additionally, mixins are used to create reusable code, while import function shortens the number of requests to the server, since .css file is compiled before it is uploaded to the server.
Sass adds structure and organization to the code by combining separate .scss files into one master .css file. Variables may be set up throughout the stylesheet to reduce the code. Any changes can be easily managed by updating variables.
Sass as configurable and robust meta-language on top of CSS helps to reduce size of stylesheets, organize them into smaller ones and run them quickly. Clean, elegant and structurally built code gives CSS more power and real-world implementation. Sass was used for development of our free Plone theme Python Reel. Different CSS code was written for different parts and combined together by Sass processor. Output file was smaller and easier to manage than normal CSS.