Web design is not so plain anymore and authoring CSS is increasingly becoming complex and time consuming. CSS of course is evolving with the web but still lacks way behind and it is getting difficult to manage CSS in large projects.
SASS is the CSS preprocessor language that extends CSS capabilities and makes CSS authoring and management much easier, structured and cleaner.
SASS gives superpowers to the plain CSS and attempts to meet the web design needs of today by providing options like variables declaration, reusable style blocks called “mixins”, inheritance, nesting rules, and many more features.
We need SASS editor (normal text editor with SASS syntax highlighting option is all we need) and the compiler to write CSS that uses SASS features.
SASS is written in .scss files and the compiler converts .scss files to .css files, our very own CSS files that we use in our projects.
The biggest reason that you should start using SASS CSS Framework right now without worrying about the complexities is that it is fully compatible with CSS3, which means that you write regular CSS in .scss files and it is fully understood by the SASS compiler.
Once SASS is up and running on your machine, at the minimum, you would be able to use variables declaration which is real damn simple. There are more advanced features but you can take your time to graduate to that level.
For those who are yet to start with SASS, I would say that the one and only task to get going with SASS is setting it up on your system.
Why Use SASS: Advantages Over Regular CSS
Use of Variables
Do you use “Find, Replace all” in your style sheets? I have been doing this for ages in my style sheets to replace the base color of my theme. Base color is just an example where we repeat the same thing in CSS files multiple times. SASS helps get away with most of the repetitions in CSS authoring.
Here is a simple example of how CSS that uses SASS variables functionality looks like, in the below example we declare $theme-color as a variable and use it throughout the project.
On the left side is the .scss file and on the right side the complied .css file that you include in your project. This is just a simple example that demonstrates the advantage of SASS over regular CSS. We can use variables throughout the project and this gives us the power to write once and use anywhere by eliminating duplication of effort.
Modularity with @Import
We can import one .scss file into another .scss file by using @import. This essentially means that we can write as many .scss files as we need, may be one each per module or component. One simple use case is to define all variables (like $theme-color, $font-color) in one .scss file and keep on importing it in all the web projects.
@import makes SASS an absolute fit for using SMACSS methodology. Writing modular and scalable CSS is the basic fundamental of SMACSS methodology. It talks about categorizing CSS based on rules and as per SMACSS there are five types of CSS rules: Base rules, Module rules, Layout rules, state rules and theme rules.
Perfect!
We can write multiple .scss files as per the SMACSS methodology and then import all of these into one single .scss file before compiling to the final .css file.
If we had gone with the normal CSS, we still had option to import CSS files into one single file but that works differently, each import call results in HTTP request which is not a recommended way.
Another method of combining multiple CSS files is to utilize some kind of CSS aggregation, may be let us just use SASS CSS Framework which of course is way simpler and far more powerful.
Mixins
Mixins let you group CSS declarations, these mixins (group of CSS declarations) can be reused in the entire project, just like variables. If you know a little bit of programming, a mixin is much like a function.
Having said that, we are not making it complex, once understood, it is really simple to use mixins in the project or across projects with ease.
Here is how –
@Extend
Another compelling reason to use SASS is that it lets you avoid repetitions. DRY – Do not Repeat Yourself is the key fundamental behind @extend feature. You can extend exiting CSS selectors to write new CSS selectors. @Extend looks similar to Mixins but works a bit differently.
Here is how –
How to Get Started with SASS CSS Framework?
The aim is to write .scss files and convert those to .css files and along the way if you get syntax highlighting option for .scss authoring, nothing like it!
To convert .scss files to .css files we need SASS compilers or some ready to use GUI based application.
“Fall back option – Once you setup SASS but are not comfortable with using SASS syntax, you can still continue to write plain CSS in .scss files and SASS compiler will output the same thing to .css files. Once you get more and more familiar with SASS syntax, you can start defining variable, use mixins and of course everything else that SASS has to offer.”
How to Setup SASS CSS Compiler
There are two recommended ways you can setup your system to author and convert .scss files to .css files.
Command Line
Command line stuff appears to be intimidating and that kept me away from using SASS for quite some time, just the thought of it. But believe me, it was just one time activity and took only 30 minutes and I was up and running with SASS for all my future projects.
SASS is dependent on Ruby which is a programming language. We need to setup Ruby on the machine first. Once Ruby is installed then we need to install the SASS Gem. SASS Gem is what does the whole magic.
You can check out this link for instructions on how to setup Ruby and SASS Gem on your machine.
Once your system is up and running it takes only below command to convert “my-style.scss” to “my-style.css” file.
sass my-style.scss my-style.css
“my-style.css” is the regular CSS file that we are writing since ages.
GUI Based Applications
Another way to get started with SASS CSS Framework is by using GUI based applications, there are many available in the market out of which some are free and some are paid.
For most of these applications, you just need to do one click installation of the application without getting into any command line operations.
Once your application is up and running, you just need to use the application GUI as a normal text editor with SASS syntax highlighting to write .scss files and the application takes care of converting those to .css files.
SASS Frameworks and Resources
CSS frameworks are around for years now to overcome one or the other shortcoming of plain CSS. Bootstrap for example had been particularly useful for building responsive grids. We get pre-defined set of basic CSS definitions in bootstrap to create fluid grids.
With CSS pre processor like SASS, comes the new generation of CSS frameworks and we call these as CSS authoring frameworks.
Here are few of the most comprehensive and feature rich SASS frameworks and resources –
Compass
Compass is open source CSS authoring framework and extends SASS. Compass also runs on Ruby and inherits all features of SASS by default and comes with much more powerful features for CSS authoring. You can read more about Compass at compass-style.org.
Bourbon
SASS is powerful in a sense that you can create fully functional frameworks by extending SASS or just create ready to use libraries of mixins.
While Compass is a full CSS authoring framework, Bourbon is a CSS3 mixins library and is light weight. You have the options to write mixins in SASS but there are many ready to use libraries of mixins, Bourbon stands ahead in terms of covering breadths of CSS3. Ready to use mixins for browser pre-fixes is one such example of Bourbon mixins library. You can read more about Bourbon at bourbon.io.
An extension of Bourbon is Bourbon-neat which also uses SASS. It is a grid framework for creating responsive grids. You can get more info about Bourbon neat at neat.bourbon.io.
Susy
Susy is among the best and most powerful CSS Grid frameworks. The best part of Susy Framework is that it allows you to create grids on demand. It doesn’t force you to use one or more of the pre built grid systems. You create your own grids by defining columns as per the need of your web project. You can read more about Susy at susy.oddbird.net.
SASS Alternatives
SASS CSS Framework though is the most used and comprehensive CSS preprocessor but is not the only one out there. There are more frameworks available that you can explore to select the best fit for your skills and project needs. Few of the SASS alternatives that have made a mark are as listed below.
LESS
LESS CSS is more or less similar to SASS in terms of features offered. Less can run client side inside the browser, inside Node and inside Rhino. There are also many compilers made available by 3rd parties that run on all operating systems You can get more details on LESS CSS at lesscss.org.
Stylus
Stylus is one of the most used CSS preprocessors and is slightly different than SASS and LESS. The major difference is that it is not Ruby based and runs on Node.js, so you do not need to get into Ruby installation etc. It supports both regular as well as indented CSS syntax, another big advantage. Personally speaking, Stylus has all the capacity to offer more flexibility than SASS and LESS but will take while to get established being a new player in the market.
You can read more about Stylus at github.com/learnboost/stylus.
CSS-Crush
CSS-Crush is PHP based CSS pre processor and it is damn easy to start using CSS-Crush in your PHP based project. It can also be extended using plugins and offers most of the features that SASS, LESS or Stylus are providing. Css-Crush preprocessor may not fit well in all projects and or match likings of web designers since it is strictly PHP based.
You can read more about CSS-Crush at the-echoplex.net/csscrush.
Closing Thoughts
CSS is not equipped inherently to meet the web design needs of modern times. CSS preprocessor frameworks like SASS attempt to bridge these gaps and provide designers the necessary tools to meet the growing needs of web design and development. We do expect CSS core to get core upgrade in the future to cater advanced features but that of course is far from now and hence the growth of SASS and similar frameworks will continue.
We are right at the tipping point to witness a complete change in the way web design is done. The growth of frameworks like SASS and methodologies like SMACSS is a definitive indication to that.
The sooner we accept the better we design!!
Reference: sass-lang.com
