Contact

Technology

Aug 26, 2013

User Interface Development with SASS in Windows and Visual Studio

Fernando Berrios

Fernando Berrios

Default image background

The landscape of user interface and experience development for the web has changed drastically in the last couple years. Everything from the core philosophies (i.e. mobile first, responsive, graceful degradation, progressive enhancement, device agnostic, adaptive content, touch enabled, resolution independent, etc.) to the implementation details (breakpoints, media queries, CSS 3, HTML 5, grid based layouts, gradients, rounded corners, shadows, animations, etc.) have all evolved very rapidly, but in the end it all still boils down to plain old HTML and CSS development.

It might seem overwhelming for a developer, new or seasoned, to have to cope with all these things. But the good news is that while all these new techniques and concepts are always changing, the tools available for developing them have also been evolving. One such tool is a CSS preprocessor called Syntactically Awesome Style Sheets (SASS). SASS is a language extension to CSS that provides developers with features you would find in traditional scripting languages, features such as variables, inheritance, flow control statements, and others. SASS allows a developer to create patterns and to structure their style sheets in a similar way to how they would structure application code.

All of the standard features of SASS make regular CSS development seem outdated and frankly dreadful. The ability to write very modular style sheets and quickly refactor them will help make your code base smaller and easier to maintain, but the icing on the cake is the quality and quantity of support from the community. Adoption of SASS has steadily increased among user interface developers and as such there are many great resources on the Internet where best practices are discussed and debated. Even better than discussions are the frameworks and libraries that have spawned from them. Two of the most commonly used libraries for SASS are Compass and Bourbon. Both of them offer a lot of great features whose versatility and ease of use have helped increase the use of SASS in the industry.

Now that the backstory is out of the way we can get down to why you’re reading this blog post. As you look around the web for tutorials, examples, or other resources you’ll notice most of them are geared toward Mac users. Some of the most famous tools available are only available for OS X, but no worries, there are some great options available for Windows users which I’ll detail below.

Drive digital transformation with enterprise web and mobile applications through Microsoft Solutions

Explore Our Microsoft Consulting Services  →

Command Line Interface

The most flexible and powerful, not to mention free, SASS tool is Command Line Interface (CLI). If you are comfortable with the command line then it will most certainly meet all your needs. First you will need to have a Ruby environment configured since SASS is written in Ruby and is distributed as a gem package. Most other SASS libraries are also often distributed via gems. If you don’t already have Ruby installed then you can download the latest installer (version 2.0.0-p247 as of this writing). During the install process, make sure you select the option to add Ruby to your PATH:

 

Once installed, open a terminal and type:

gem install sass

When the package finishes installing you can start developing right away. Usage of the newly installed “sass” command is as follows:

// Compile file from SASS to CSS

sass –watch main.scss:main.css

// Compile any files in css-src folder from SASS to CSS and drops them // in the css folder

sass –watch css-src:css

Note that the “–watch” flag will keep the process running and will actively “watch” for changes in the files and re-run the compilation when one is detected. If using the Compass framework, note that it also installs a command line utility named “compass” which you will use instead of the standard “sass” one.

Integrate CLI into Visual Studio

With the CLI tools installed you can also easily integrate SASS compilation into a Visual Studio project’s build step. A simple version of this can be achieved by creating a batch (.bat) file that calls the “sass” command and configure it to run as a Post-build event:

 

Workbench

When compiling and running your project this will ensure you have the most up to date style sheets generated. It can also be useful for cases where a Continuous Integration server takes care of building and deploying to different environments.

Mindscape Web Workbench

The Web Workbench is a Visual Studio extension from Mindscape that makes the process of compiling SASS files to CSS simpler. All you need to do is install the free extension, no installation of Ruby required. To get started you only need to create and edit a SASS file inside your project and when you save it the extension automatically creates a CSS version of the file. Web Workbench will even show it as a child of your SASS file inside the Solution Explorer:

 

The extension also provides IntelliSense support, syntax highlighting for SCSS files, and an integrated error console that outputs when the SASS compiler finds an error. Using the Web Workbench gives you a very simple and easy way to get started, but what you gain in simplicity you lose in flexibility. Only a few of the options that the “sass” command supports are available when compiling (the –g debug flag), and the rest of the features are not very configurable.

Prepros

Prepros is a GUI application that allows you to easily process a slew of preprocess-able languages, one of which is SASS (it also does a whole bunch of different things which are outside the scope of this article). In terms of features it is very similar to the OS X exclusive CodeKit. Like the Web Workbench, Prepros does not have a dependency on Ruby and all you need to get up and running is to download, install, and run. To use you need to add your project directory and all the supported files will show up in a list. You can click on each item to change the options. The GUI makes it extremely easy to use yet still provides a high level of customization and useful settings. Ultimately it might not be as flexible for very specific use cases, but for the most part it will cover what you need.

Whichever option you choose to go with, know that you are on the right track for getting the most out of SASS. There might be a bit of a learning curve at first, but thanks to these tools and the many available resources from the community you should be up and running in no time.  Follow us at @CrederaMSFT for more great tips and tricks to Microsoft development, or if you have questions please use the comment box below.

Conversation Icon

Contact Us

Ready to achieve your vision? We're here to help.

We'd love to start a conversation. Fill out the form and we'll connect you with the right person.

Searching for a new career?

View job openings