Throughout this post I’ll give you a rough introduction into SASS as part of my branding SharePoint sites with yeoman series. See all other posts from this series here
- Yeoman the web development workflow
- An Introduction to Jade
- An Introduction to CoffeeScript
- An Introduction to SASS
- Our yeoman generators
- Hands On – Let’s create a custom MasterPage
- Hands On – Let’s create a custom PageLayout
- A forecast – What are we currently working on
SASS (Syntactically Awesome StyleSheets) is a language which compiles into CSS and allows you to write your styles in a comfortable and use all the cool things which CSS is missing like variables, mixins or nested rules.
SASS vs SCSS
SASS comes with two different flavours.
SCSS (or sassy CSS)
SCSS is the most popular dialect from SASS. It’s based on CSS3 and adds some custom keywords and syntactic elements to the latest CSS standard. Because it’s based on CSS3 syntax it’s really easy to learn and you should definitely prefer SCSS syntax over SASS syntax in these days.
SASS syntax on the other side was the first implementation and is a little bit older. SASS syntax is also referenced as indention syntax on many websites.
No matter which flavour you choose, sass compiler can automatically generate the opposite syntax for you with no effort.
As CoffeeScript saves your time writing client-side code, SASS saves your time when writing stylesheets. So let’s dive into SASS instead of messing time with the theory.
Installing SASS on your development box
Before you can start writing SASS on your development box you’ve to install Ruby on your system. There are thousands of tutorials available online which are describing how to install Ruby in the best way. - At this point I’d like to advice you using RVM (Ruby Version Manager) which allows you to easily switch between different ruby versions on your system.
After you’ve installed Ruby on your system you can finally install the SASS compiler on your system using Ruby’s Package manager gem
#install sass on windows $ gem install sass #ensure root permissions on -ix systems using sudo $ sudo gem install sass #check the installation by querying for the current SASS version $ sass -v
Variables reduce code duplication through your stylesheets and they make it easy to create easily customisable designs for your website. Consider the following
When compiling the file using
$ sass variables.scss variables.css
you’ll receive the following stylesheet. Make some changes to the variables by your own and execute the SASS compiler to see the effect.
Mixins are awesome. By using mixins you can define a set of styles at some point and reuse it through your entire stylesheet. Take for example a CSS3 rotation which has been created and tested for most popular browsers. Instead of rewriting all the different styles again and again you can include them in SASS and save many keystrokes and a lot of time.
Again, when compiled with the sass executable you’ll receive the following CSS.
As last component from SASS I’d like to demonstrate what nested rules are and which benefits you’ll get when betting on SASS instead of CSS.
Nested rules are pretty easy but powerful components. Nested rules are adopting the schema DOM elements are following. Consider you’re writing a CSS or a SASS file which is responsible for styling an article. When writing plain CSS you would write some CSS like the following
Nested rules are optimising exactly this CSS selector definition. Depending on the indention and the parent classes the CSS selectors will be generated from the SASS compiler.
As you can see, SASS offers great features to reduce the amount of code to write and to reduce the complexity of your stylesheets.
SASS is an important part for branding SharePoint sites using our yeoman generators because we heavily use SASS throughout the branding solutions in order to use latest and greatest web technologies. Of course there are some competitors in this area available. Personally I also like stylus very much. No matter which abstraction language you use, because of the compile-time-check you should consider using one of them.