How to Use Sass CSS in WebMatrix

Sass is a dynamic style sheet language that enables advanced scenarios with CSS. WebMatrix provides support for many Sass features, including variables, mixins, operations, and functions. For more information on Sass, see http://sass-lang.com/.

 

Adding a Sass style sheet to your site

To use Sass in your site, start by adding a new file. In the lower left corner of the WebMatrix window, click the Files tab to open the Files workspace. In the ribbon, click New.

 

Sass-1

Tip: You can also use the keyboard shortcut CTRL-N.

This will open the Choose a File Type dialog. Click the All category on the left side of the dialog to show all of the supported file templates in WebMatrix, and then select CSS (Sass). Give your file a name, and then click OK.

 

Sass-2

 

Using Sass CSS

 

To get started, you'll use some basic CSS. Sass uses a similar syntax to CSS, but without curly braces or semicolons. Start by creating some styling for your background:

body
    background-color: #222
    padding: 0px
    margin: 0px

This is basic CSS you would use in any other style sheet. Now add a class for creating boxes with rounded corners. The rounded corners are specified by the border-radius attribute:

.box 
    border:  1px solid #CCC
    background-color: #eee
    color: #222
    -webkit-border-radius: 5px
    -moz-border-radius: 5px  
    border-radius: 5px

At this point, we haven’t taken advantage of the advanced features of Sass. We use the color #222 twice inside of our StyleSheet: once for the body background color, and once for the foreground color of our boxes. Let’s use a Sass variable so we only need to define it once:

$darkGreyColor: #222
 
body
    background-color: $darkGreyColor
    padding: 0px
    margin: 0px
 
.box 
    border:  1px solid #CCC
    background-color: #eee
    color: $darkGreyColor
    -webkit-border-radius: 5px
    -moz-border-radius: 5px  
    border-radius: 5px

Notice that you can reuse $darkGreyColor throughout the site.

Now create another CSS class that uses different colors for the foreground and background:

.colorfulBox 
    border: 1px solid #a54908
    background-color: rgba(255, 106, 0, 0.27)
    color:  #000
    -webkit-border-radius: 5px
    -moz-border-radius: 5px
    border-radius: 5px

You may notice that we’re using the vendor prefix attributes for the border radius in multiple places. In Sass, this is where we would use a mixin to avoid writing the same code twice:

$darkGreyColor: #222
 
@mixin roundedCorners($rad)
    -webkit-border-radius: $rad
    -moz-border-radius: $rad
    border-radius: $rad
 
 
body
    background-color: $darkGreyColor    
    margin: 0px
    padding: 0px
 
.box 
    border:  1px solid #CCC
    background-color: #eee
    color: $darkGreyColor
    @include roundedCorners(5px)
 
.colorfulBox 
    border: 1px solid #a54908
    background-color: rgba(255, 106, 0, 0.27)
    color:  #000
    @include roundedCorners(5px)

The .colorfulBox and .box classes both use the .roundedCorners mixin to include rounded corners in your CSS. This way, you only need to write the rounded corner styles definition once.

 

Compiling your Sass into CSS

Many web frameworks will automatically generate CSS based on your Sass style sheet at runtime. If you want to compile your Sass into CSS at design time, you can use the OrangeBits compiler extension for WebMatrix. The OrangeBits compiler automatically creates CSS every time you save your Sass document. To add the OrangeBits extension to WebMatrix, click the extension gallery icon in the ribbon:

 

Sass-3

The extension gallery contains useful extensions that add capabilities to WebMatrix. In the search box, type "OrangeBits", select OrangeBits Compiler, and then click Install.

Sass-4

 

When the extension is finished installing, you can right click any *.sass file in your tree, and select Compile:

 

Sass-5

 

This will generate a StyleSheet.css file in the file tree, which you can now open:

Sass-6

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!