A Software Technology Partner for Today's Business

Introducing Sass

Sass is a method to write cleaner and more structured CSS.  SASS offers us more control and more power, providing a simpler and more elegant syntax for CSS that is more manageable.
SASS is officially an open-source tool for Ruby developers for use in style sheets, however there are many tools that bring SASS to .Net.  The particular tool that we use is Mindscape Web Workbench, which is available from Visual Studio’s extension manager as an extension to the environment.

Why SASS?

SASS adds extra mechanics and structure into CSS style sheets providing variables, nesting, mixins and inheritance. 

How to use SASS files in .Net web-pages?

SASS style sheets are simple to bring into web-pages.  Simply create a new SCSS file and an associated CSS file will be automatically generated.  To use the style sheet, just link to the location of the generated CSS file.

SASS is a meta-language on top of CSS and generates a style sheet every time the file is saved, so styling can be debugged as changes to the SCSS at run-time will also change the CSS style sheet.

Simple Parent and Child selections

SASS allows for nesting of selectors to allow for better structure in style sheets and avoid repetition when dealing with properties. 

The .SCSS file

.div ul {
    max-height:100px;

    /* Nested linked list */
    li {
        float:left;
        background-color:#333;

        font: {
            family: helvetica;
            size: 12px;
            weight:bold;
        }
    }
}

The automatically generated .CSS File

.div ul {
    max-height:100px;
}

.div ul li {
    float:left;
    background-color:#333;
    font-family: helvetica;
    font-size: 12px;
    font-weight: bold;
}

Consistent colours and widths

SASS supports variables within CSS style sheets allowing for consistent colours in a page as well as basic mathematics and built in functions. 

 

The .SCSS file

$headercolour: #222222;
$margin: 2px;

.header {
    background-color:$headercolour;
    color: lighten($headercolor, 20%);
}

.messagediv {
    padding: $margin/2;
    margin : $margin;
    border: $margin/2  solid $headercolour;
}

The automatically generated .CSS File

.header {
    background-color:#222222;
    color: #454545;
}

.messagediv {
    padding: 1px;
    margin: 2px;
    border: 1px solid #222222;
}

Reusable functions in style sheets

Mixins allow whole parts of CSS to be reused much like c# functions.  These mixins allow for particular styling  including additional parameters.

The .SCSS file

@mixin leftsideitem($distance) {
    background-color: #BBB;
    div.newitem {
        float: left;
        margin-left: $distance;
        text-align: middle;
    }

    ul, li {
        padding: $distance/2;
        line-height: $distance;
    }
}

#itemsdiv {
    border: 1px solid black;
    @include leftsideitem(10px);
}

The automatically generated .CSS file

#itemsdiv {
    border: 1px solid black;
    background-color: #BBB;
}

#itemsdiv div.newitem {
    float:left;
    margin-left: 10px;
    text-align: middle;
}

#itemsdiv ul, #itemsdiv li {
    padding: 5px;
    line-height: 10px;
}

Selector Inheritance

Selectors in SASS can inherit styles from another selection block without having to duplicate the CSS.

The .SCSS file

.notification {
    background-color: #0FF;
}

.notification.problem {

    font: {
        size: 15px;
        weight: bold;
    }
    background-color: #F00;
}

.warning {
    @extend .notification;
    border: 1px solid red;
}

The automatically generated .CSS file

.notification, .warning {
    background-color: #FF;
}

.notification.problem, .warning.problem {
    font-size: 15px;
    font-weight: bold;
}

.warning {
    border: 1px solid red;
}

Why we use SASS style sheets

SASS is a simpler, more methodical way to handle CSS style sheets.  I found it to be a very useful and powerful tool.  We could use it as a replacement or alongside existing CSS style sheets.  The styling on the pages we are developing are more streamlined and the syntax is easier to understand, as it makes more sense to a OOP developer. 

I found refactoring existing CSS into SASS is easy as they are essentially the same language.  Sass has made styling faster and more consistent within our sites.