CSS Using SASS

Version 3.4.22

SASS examples

In this code example, I'll show you how to use the features extend, mixins and include.

There are other tools that you can use, but for me, I think Grunt is excellent and is used for all CSS examples used in this example.

Here I create a new sass file called _colour.scss and add any colours that the site requires.

Code Block Colours.

//=======================================================
//Variable colours
//=======================================================
$colour1: #000000; 
$colour2: #ffffff; 
$colour3: #0083be; 
$colour4: #00a7e1; 
$colour5: #133f7f; 
$colour6: #FFA500;

SASS Mixins.

Create another file for my mixins called _mixins.scss.

This example takes a div that has a border-radius, instead of needing to remember what all of the properties are; you can create a mixin that takes parameters that you can pass the values to and then reuse the same code again and again.

@mixin rem2px($property, $sizeValue: 15) {
    #{$property}: ($sizeValue * 10) + px;
    #{$property}: $sizeValue + rem;
}
@mixin borderRadius($border_radius: null,$top_left_radius: null, $top_right_radius: null, $bottom_left_radius: null, $bottom_right_radius: null) {
    border-radius: $border_radius;
    border-top-left-radius: $top_left_radius;
    border-top-right-radius: $top_right_radius;
    border-bottom-left-radius: $bottom_left_radius;
    border-bottom-right-radius: $bottom_right_radius;
}

SASS Style Sheet.

Finally, create your sass style sheet, then add the styles you require using your mixins, extend and include as shown earlier.

@import "_colour.scss";
@import "_mixins.scss";
.divStyle {
    border:1px solid $colour1;
    @include borderRadius(null,5px,10px,25px,47px);
}
.divStyle2 {
    border:1px solid $colour1;
    @include borderRadius(null,null,10px,25px,null);
}
%divStyle3 {
    border:1px solid $colour1;
    @include borderRadius(20px);
}
.divStyle4 {
    @extend %divStyle3;
    p {@include rem2px(font-size, 1.5);}
}
h1 {
    color:$colour1;
    @include rem2px(font-size, 1.5);
}
CSS Styles.

Finally, compile your sass file, and you will see the output below.

Depending on what you use, you can compile the SASS file using either Grunt or Gulp which will convert your SASS file to CSS.

divStyle {
  border: 1px solid #000000;
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 47px; }
.divStyle2 {
  border: 1px solid #000000;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 25px; }
.divStyle4 {
  border: 1px solid #000000;
  border-radius: 20px; }
.divStyle4 p {
  font-size: 15px;
  font-size: 1.5rem; }
h1 {
  color: #000000;
  font-size: 15px;
  font-size: 1.5rem; }
Summary.

In this short blog, I showed how you could use SASS to create CSS; the examples just scraped the surface of what can be achieved with SASS.