Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Start SASS in Visual Studio with Example

4.73/5 (7 votes)
21 Nov 2014CPOL5 min read 41.3K   582  
Use of SASS in Visual Studio is a little bit confusing when you start as a beginner. That’s why I have written this article. I think this will be helpful for all SASS developers.

Introduction

I have searched since many days but I did not find any proper guideline which would have been helpful for me when I was a beginner in SASS. I think SASS is the controlling language of CSS. If you are a CSS designer, then you have to learn SASS, otherwise you cannot manage CSS in the proper way. This will be unmanageable after a certain time. That’s why I have written this article for those want to manage CSS.

Background

At first, you have to download Visual Studio plugin for SASS. Please download the SASS extension from here and here. After completing installation, you will restart Visual Studio and will see the MINDSCAPE menu in Visual Studio toolbar like below:

Image 1

CSS is very difficult to maintain, more complex and larger. This is where SASS can help you to manage CSS in an easy way. SASS has some features like variables, nesting, mixins, and inheritance. Here, I will describe step by step. Before use of SASS, just create an SCSS file like below. Between SASS and SCSS, there is no difference without bracket. That’s why I use SCSS file for clarifying the coding.

Image 2

Now rename Scss1.scss to style.scss and delete the default content of that file. Write sample CSS into this file. Here's a sample test example:

CSS
.test {
    color: #f00;
}

When you will save style.scss file, then this file will be compiled and will generate CSS file like that below. This is your target file. You can now add this file into your pages. Here is the online compiler where you can test SASS code.

Image 3

Variables

Variables store information and reuse for colors, font stacks, or any CSS. SASS uses the $ symbol to make a variable. Here's an example:

CSS
// variables
$black: #000;

h1{
    background-color:$black;
}

Output: You can see the output in style.css.

CSS
h1 {
    background-color: black;
}

Some Useful Variables

CSS
/* ----------------Canvas Variable-------------*/
$audio-canvas-video: false; // True | False

//** Font weights
// -----------------------------
$font-weight-bold:        700;
$font-weight-semibold:    600;
$font-weight-medium:    400;
$font-weight-regular:    400;
$font-weight-light:        300;
$font-weight-thin:        300;

//** Typography
// -----------------------------
$font-name:                'Segoe UI';
$font-path:                '../fonts/segoeui';
$font-family-segoe-ui:  $font-name, Arial, sans-serif !default;
$font-style-italic:        italic;
$font-smoothing:        always;

// Vertical Spacing
$line-height-base: 1.428571429; // 20/14

//** Settings
// -----------------------------
$font-family-base:        $font-family-segoe-ui !default;
$font-size-base:        11px;
$font-weight-base:        $font-weight-regular;

//** original color
$black: #000 !default;
$white: #fff !default;
$red:    #f00 !default;

$light-color :#FFF !default;
$dark-color :#000 !default;
$accent-color :#f00 !default;

//** generate color
$gray-base:             $gray !default;
$gray-dark:                #5f5f5f !default;
$gray-light:            #373a41 !default;
$black-base:            $black !default;
$black-dark:            darken($black, 80%);
$black-light:            lighten($black, 80%);
$white-base:            $white !default;
$white-dark:            darken($white, 80%);
$white-light:            lighten($white, 80%);
$red-base:                $red !default;
$red-dark:                darken($red, 80%);
$red-light:                lighten($red, 80%);

// Typography Colors
// all over link color
$link-font-color:            #444444 !default;
$link-color:                #d04526 !default;
$link-hover-color:            #c03d20 !default;
$link-background-color:        $gray-light !default;

$nav-font-color:            #444444 !default;
$nav-link-color:            #d04526 !default;
$nav-link-hover-color:        #c03d20 !default;
$nav-link-background-color: $gray-light !default;

$section-header-font-color: #444444 !default;
$section-header-link-color: #d04526 !default;
$section-header-link-hover-color: #c03d20 !default;

$body-font-color:            #555555 !default;
$body-link-color:            #d04526 !default;
$body-link-hover-color:        #c03d20 !default;

$footer-font-color:            #555555 !default;
$footer-link-color:            #d04526 !default;
$footer-link-hover-color:    #c03d20 !default;

//** Background color
// -----------------------------
$header-bg:        $gray-dark !default;
$nav-bg:        #adadad !default;
$body-bg:       #efeff0 !default;
$footer-bg:        $gray-dark !default;

$page-offset:        5px;

/* --->>> Responsive     <<<----------*/
/* -----------------------------------*/
$screen-small:            768px;
$screen-Medium:            992px;
$screen-large:            1200px;

$element-height:22px;

Comments

SASS supports multiline CSS comments with /* */, and single-line comments with //. The multiline comments are preserved and single line comments are removed. For example:

CSS
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
.test{
   color:$black;
}

Output: Comments have been removed.

CSS
.test{
   color:black;
}

 /* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */

body { color: black; }

Output: Comments have not been removed.

CSS
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */

body { color: black; }

Will .CSS File Generate or Not

I have placed all variables into _variables.scss file. Here, I have used underscore file name, this underscore file tells the SASS compiler which will be compile not generate CSS file like style.scss. This file is used only for import. I will tell you about import into this article letter. Here is the pictorial representation of _variables.scss. I have also downloaded twitter bootstrap and renamed file name bootstrap.css to _bootstrap.scss. I will use the twitter bootstrap class under the SASS. That’s why I have renamed the bootstrap file. You will get the _bootstrap.scss file when you will download my sample project.

Image 4

Nesting

When you write HTML, you will see that HTML provides hierarchy and clear code but CSS does not do this. SASS will provide clear code and hierarchy like HTML. Here’s an example of some typical styles for a site's navigation:

CSS
footer {
    .navbar-inverse {
        background: $color_chicago_approx;
    }
    .navbar-nav {
        float: left;
        margin: 0;
        > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
        }
    }
    .navbar-nav>li {
        float: left;
    }
}

Output of Nesting

CSS
footer .navbar-inverse {
    background: #5f5f5f;
}

footer .navbar-nav {
    float: left;
    margin: 0;
}

    footer .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
 
    footer .navbar-nav > li {
        float: left;
    }

Use & For Link Up Parents Elements

Here is the example of & in nesting below, where you use character &, parents is placed there, here li is placed into before :hover.

CSS
.navbar-nav>li {
    float: left;

    &:hover{
      color:red;
    }
}

Output

CSS
.navbar-nav > li {
  float: left;
}

.navbar-nav > li:hover {
  color: red;
}

Partials

You can create partial something like _partial.scss. The underscore lets SASS know that the file is only a partial file and that it should not be generated into a CSS file. SASS partials are used with the @import directive. I have used the two partial files into style.scss. Here is the picture below:

Image 5

Imports

When you use @import in CSS, the CSS creates another HTTP request. SASS builds on top of the current CSS @import but instead of requiring an HTTP request, I have two files _bootstrap.scss and _variables.scss and imported into the previous example. Here is the example of @import.

CSS
@import "variables";
@import "bootstrap";

Compass

Please see the details of compass here.

Mixins

Mixins is very important in SASS. A mixins is used for reuse. Here's an example for border-radius.

CSS
//property generate
@mixin make-property($property, $value) {
    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
        #{$prefix}#{$property}: $value;
    }
}

// border radius generate
@mixin border-radius($radius) {
  @include make-property(border-radius,$radius);
}

//use
.box { @include border-radius(10px); }

Output

CSS
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Some Useful Mixins

1. Font-Face:---------------------------------------------------------------------

Mixins

CSS
// mixin for bullet proof font declaration syntax
@mixin declare-font-face($font-family, $font-filename, 
$font-weight : normal, $font-style :normal, $font-stretch : normal) {
    @font-face {
        font-family: '#{$font-family}';
        //src: url('../fonts/segoeui.ttf') format('truetype'), 
        url('../fonts/segoeui.woff') format('woff');
        src: url('#{$font-filename}.woff') format('woff'), 
        url('#{$font-filename}.ttf') format('truetype');
        font-weight: $font-weight;
        font-style: $font-style;
        font-stretch: $font-stretch;
    }
}

Uses

CSS
// use variables
$font-name:                'Segoe UI';
$font-path:                '../fonts/segoeui';

//use mixins
@include declare-font-face($font-name,$font-path);

Output

CSS
@font-face {
  font-family: "Segoe UI";
  src: url("../fonts/segoeui.woff") format("woff"), 
  url("../fonts/segoeui.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}

2. Responsive:---------------------------------------------------------------------

Mixins

CSS
// break point
@mixin breakpoint($point) {
    @if $point == large {
        @media only screen and (max-width: $screen-large) {
            @content;
        }
    }
    @else if $point == medium {
        @media only screen and (max-width: $screen-Medium) {
            @content;
        }
    }
    @else if $point == small {
        @media only screen and (max-width: $screen-small) {
            @content;
        }
    }
}

Uses

CSS
// use variables
$screen-small:            768px;
$screen-Medium:            992px;
$screen-large:            1200px;

.sidebar {
  @include breakpoint(medium){
    width: 60%;
  }
}

Output

CSS
@media only screen and (max-width: 992px) {
  .sidebar {
    width: 60%;
  }
}

3. More mixins:---------------------------------------------------------------------

CSS
//property generate
@mixin make-property($property, $value) {
    @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
        #{$prefix}#{$property}: $value;
    }
}

@mixin display ($disp: null, $padding: null, $margin: null) {
    display: $disp;
    padding: $padding;
    margin: $margin;
}

@mixin center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

// set padding
@mixin set-padding ($t-padding: null,$r-padding: null,$b-padding: null ,$l-padding: null) {
    padding-top: $t-padding;
    padding-right: $r-padding;
    padding-buttom: $b-padding;
    padding-left: $l-padding;
}

// set margin
@mixin set-margin ($t-margin: null,$r-margin: null,$b-margin: null, $l-margin: null) {
    margin-top: $t-margin;
    margin-right: $r-margin;
    margin-buttom: $b-margin;
    margin-left: $l-margin;
}

// background color
@mixin gradient-background ($startColor: $gray-dark, $endColor: $body-bg) {
    background-color: $startColor;
    background: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
    background: -webkit-linear-gradient(top, $startColor, $endColor);
    background: -moz-linear-gradient(top, $startColor, $endColor);
    background: -ms-linear-gradient(top, $startColor, $endColor);
    background: -o-linear-gradient(top, $startColor, $endColor);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$startColor}', 
    endColorstr='#{$endColor}', GradientType=0 ); /* IE6-9 */
}

// horizontal gradient background color
@mixin horizontal-gradient-background ($startColor: $gray-dark, $endColor: $body-bg) {
    background-color: $startColor;
    background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor));
    background-image: -webkit-linear-gradient(left, $startColor, $endColor);
    background-image: -moz-linear-gradient(left, $startColor, $endColor);
    background-image: -ms-linear-gradient(left, $startColor, $endColor);
    background-image: -o-linear-gradient(left, $startColor, $endColor);
}

// top to bottom and left to right gradient background color
@mixin gradient-background ($from,$to,$middle:null,$fpecnt:null,$tpecnt:null,$mpecnt:null) {
    background: $to; /* Old browsers */
    background: -moz-linear-gradient
    (top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* FF3.6+ */
    background: -webkit-linear-gradient
    (top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient
    (top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* Opera 11.10+ */
    background: -ms-linear-gradient
    (top, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* IE10+ */
    background: linear-gradient
    (to bottom, $to $tpecnt, $from $fpecnt, $middle $mpecnt); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient
    ( startColorstr='#{$to}', endColorstr='#{$middle}', GradientType=0 ); /* IE6-9 */
}

@mixin text-shadow ($string: 1px 1px 1px rgba(200,200,200,0.9)) {    
    text-shadow: $string;
}

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// box shadow
@mixin box-shadow ($string) {
    @include make-property(box-shadow, $string);
}

@mixin drop-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
    -webkit-box-shadow:    $x $y $blur $spread rgba(0, 0, 0, $alpha);
    -moz-box-shadow:    $x $y $blur $spread rgba(0, 0, 0, $alpha);
    box-shadow:        $x $y $blur $spread rgba(0, 0, 0, $alpha);
}

@mixin inner-shadow ($x: 0, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
    -webkit-box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
    -moz-box-shadow:    inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
    box-shadow:         inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
}

@mixin box-sizing ($type: border-box) {
    @include make-property(box-sizing, $type);
}

// set border radius
@mixin border-radius ($radius: 4px) {
    @include make-property(border-radius, $radius);
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

// Single side border-radius
@mixin border-top-radius($radius) {
    -webkit-border-top-right-radius: $radius;
    border-top-right-radius: $radius;
    -webkit-border-top-left-radius: $radius;
    border-top-left-radius: $radius;
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

@mixin border-right-radius($radius) {
    -webkit-border-bottom-right-radius: $radius;
    border-bottom-right-radius: $radius;
    -webkit-border-top-right-radius: $radius;
    border-top-right-radius: $radius;
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

@mixin border-bottom-radius($radius) {
    -webkit-border-bottom-right-radius: $radius;
    border-bottom-right-radius: $radius;
    -webkit-border-bottom-left-radius: $radius;
    border-bottom-left-radius: $radius;
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

@mixin border-left-radius($radius) {
    -webkit-border-bottom-left-radius: $radius;
    border-bottom-left-radius: $radius;
    -webkit-border-top-left-radius: $radius;
    border-top-left-radius: $radius;
    -moz-background-clip:    padding;
    -webkit-background-clip: padding-box;
    background-clip:         padding-box;
}

@mixin border-radiuses ($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
    -webkit-border-top-right-radius:    $topright;
    -webkit-border-bottom-right-radius: $bottomright;
    -webkit-border-bottom-left-radius:  $bottomleft;
    -webkit-border-top-left-radius:     $topleft;
    -moz-border-radius-topright:        $topright;
    -moz-border-radius-bottomright:     $bottomright;
    -moz-border-radius-bottomleft:      $bottomleft;
    -moz-border-radius-topleft:         $topleft;
    border-top-right-radius:            $topright;
    border-bottom-right-radius:         $bottomright;
    border-bottom-left-radius:          $bottomleft;
    border-top-left-radius:             $topleft;
    -moz-background-clip:    padding; 
    -webkit-background-clip: padding-box; 
    background-clip:         padding-box; 
}

@mixin set-border-radius 
($tl-radius: null,$bl-radius: null,$tr-radius: null,$br-radius: null) {
    border-top-left-radius: $tl-radius;
    border-bottom-left-radius: $bl-radius;
    border-top-right-radius: $tr-radius;
    border-bottom-right-radius: $br-radius;
}

//set display flexbox
@mixin set-flexbox () {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;  
    flex: 1 auto;
}

// generate default style to link
@mixin link-hover { 
    background-color: $link-background-color;
    color: $link-hover-color;
}

@mixin opacity ($opacity: 0.5) {
    -webkit-opacity:     $opacity;
    -moz-opacity:         $opacity;
    opacity:         $opacity;
}

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

@mixin set-position ($position,$top: auto, $right: auto, $bottom: auto, $left: auto) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    position: $position;
}

4. Generate Icons:---------------------------------------------------------------------

You can generate icon by passing index and size. Here, I have commented above coding line. This will be very helpful to you because over online, this method is not available for you.

Mixins

CSS
@mixin icon($index, $size) {

    line-height: 1;
    vertical-align: middle;
     &:before {
        // Manually define the icon set */
        $columns: 5; // Number of icons going across
        background-image: url(icons/large/sprite.png);
        background-size: $columns * 100%;

        // Size icon will be displayed */
        width: #{$size}px;
        height: #{$size}px;

        // Position background-image based on number of icons in sprite */
         background-position: #{(100/($columns - 1)*($index - 1))}% 0;

        // Set position to inline */
        content: "";
        margin-right: #{$size/4}px; 
        display: inline-block;
        line-height: #{$size}px;
        vertical-align: middle;
    }
}

Functions

Functions is different from mixins. It has return type. Here's an example of functions.

Functions

CSS
// Convert px to em
@function pxtoem($target, $context){
    @if $target == 0 { @return 0 }
    @return ($target/$context)+0em;
}

Uses

CSS
//use of variables
$font-size-base:        11px;

//here 14px is my target font-size according to base font-size
.side-bar{
  font-size: pxtoem(14px,$font-size-base);
}

Output

CSS
.side-bar {
  font-size: 1.27273em;
}

Some Useful Functions

CSS
// Convert px to em
@function pxtoem($target, $context){
    @if $target == 0 { @return 0 }
    @return ($target/$context)+0em;
}

// Convert em to px
@function emtopx($target, $context){
    @if $target == 0 { @return 0 }
    @return ($target*$context)+0px;
}

// calculate font size
@function font-size($sizeValue: $font-size-base) {
    @return ($sizeValue / $font-size-base) * 100%;
}

// calculate line height
@function line-height($heightValue: $line-height-base ){
    @return $heightValue;//write your own code
}

// calculate form element height
@function element-height($heightValue: $element-height ){
    @return $heightValue;//write your own code
}

Extend/Inheritance

This is one of the most useful features of SASS. Using @extend to share a set of CSS properties from one selector to another. Here is simple example.

CSS
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

Output

CSS
.message, .success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

Operators

+, -, *, /, and % is used for SASS. Here is the example for SASS.

CSS
.error{
   width: 600px / 960px * 100%;
}

Colors

There is most important color converter methods in SASS like DARKEN, LIGHTEN, SATURAT, DESATURATE, ADJUST, HUE. Here is the example.

CSS
// variables
$red: #ff0000;
$red-dark: darken($red,10%);
$red-light: lighten($red,20%);
$red-desaturate: desaturate($red, 28);
$red-hue: adjust_hue(desaturate($red, 28), 189);

// use of colors
h1{
    background-color:$red;
}

h2{
    background-color:$red-light;
}

h3{
    background-color:$red-dark;
}

h4{
    background-color:$red-desaturate;
}

h5{
    background-color:$red-hue;
}

Output

CSS
h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #ff6666;
}

h3 {
  background-color: #cc0000;
}

h4 {
  background-color: #db2424;
}

h5 {
  background-color: #24c0db;
}

There is a very nice online tools for color converter. you can use from here.

Not Familiar in SASS

If you are not familiar in SASS, you can use the online tools for creating SASS. You will just write CSS code, this tool will convert SASS code. This tool is for beginners. If you are an expert, then there is no need to write CSS code. It is only for SASS code practicing for beginners that have not used SASS before.

Tools

Conclusion

I think this article will be very helpful for beginners who want to learn SASS. I am not good at English, if I have made any mistakes, please forgive me. Thanks for having patience.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)