SASS/SCSS

SASS is a super-set of CSS that includes features that allow for a CSS file to be dynamicly created. SASS stands for “syntactically awesome style sheets”. SASS 3 introduced a syntax known as SCSS. SCSS is a superset of CSS. Therefore, all valid CSS is also valid SCSS.

SCSS allows us to write more concise CSS code.

Installation

In order to runn SCSS, you need to have a SCSS pre-compiler installed.

To install SCSS, firstly install Ruby from https://rubyinstaller.org/downloads/.

Download the newest version of Ruby, selecting the option to download without the devkit, as shown below:

Once Ruby is installed, you should open the "cmd" window and run the command:

gem install sass

This is shown below:

In Netbeans, right-click on the project name and select "Properties" from the list, as shown below:

Within "Properties", select "CSS Preprocessors". Within this window, tick the "Compile Sass Files on Save". Then click the "Configure Executables" button, as highlighted below.

When you press the "Configure Executables" button, you will be presented with the window below. Insert the "Sass Path". It will depend on the version of Ruby that you installed, but it will be something similar to the address entered below.

You have now set up your project to automatically convert all SCSS files in the folder "scss" into CSS files in the folder "css".

Variables

SCSS variables are declared using a $ symbol. They can be placed anywhere in a SCSS file. For example:

$red : #ff0000;

.warning
{
    color: $red;
}

Make a folder called "scss". Make a file called "main.scss" and place it into the "scss" folder. Copy the code above into the file "main.scss". Save the file. A new folder call "css" will be created and a new file called "main.css" will be placed in this folder. Open the file "main.css" to see how the scss file was compiled.

When using variables, you can allow for the user to switch colour schemes. This can be done by assigning variables for text_colour, dropshadow_colour, et cetera. These can be set to be a red colour set, blue colour set or any other colour set, as shown below:

$text_red : #ff0000;
$dropshadow_red : #ffaaaa;

$text_green : #00ff00;
$dropshadow_green : #aaffaa;

$font_colour : $text_red;
$dropshadow_colour : $dropshadow_red;
p
{
    color: $font_colour;
    border: thin solid $dropshadow_colour;
}

Change the code above to use a green set of colours.

Nesting

SCSS allows us to nest CSS rules in a hierarchy. For example, the CSS code below contains multiple references to a class called "menu" and multiple references to the anchor "a" within the "menu" class.

.menu ul 
{
    list-style: none;
    padding: 0px;
    margin: 0px; 
}

.menu li 
{
    width: 80px;
    text-align: center; 
}

.menu a 
{
    text-decoration: none;
    color: #ccc;
    background-color: #61c6f0;
    display: block; 
}

.menu a:hover, 
.menu a:active 
{
    color: #0ac;
    background-color: #ddd; 
}

In SCSS, this can be written as nested code, as shown below:

$menu_colour_blue : #ccc;
$menu_background_colour_blue :  #61c6f0;
$menu_hover_colour_blue : #0ac;
$menu_hover_background_colour_blue : #ddd;

$menu_colour : $menu_colour_blue;
$menu_background_colour :  $menu_background_colour_blue;
$menu_hover_colour : $menu_hover_colour_blue;
$menu_hover_background_colour : $menu_hover_background_colour_blue;

.menu 
{
    ul
    {
        list-style : none; 
        padding    : 0px;  
        margin     : 0px;  
    }
    
    li
    {
        width      : 80px;    
        text-align : center;  
    }
    
    a
    {
        text-decoration  : none; 
        color            : $menu_colour;    
        background-color : $menu_background_colour;
        display          : block;     
        
        & : hover,
        & : active
        {
            color            : $menu_hover_colour;
            background-color : $menu_hover_background_colour;
        }
    }
}

Note the use of & : hover and & : active in the code above. Here, the & refers to the parent selector.

Test the SCSS code above with the menu below.

<nav class = "menu">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Products</a></li>
    </ul>
</nav>

@mixin

Mixins areĀ SCSS functions. Mixins are used to make a set of SCSS properties reusable. Mixins can accept parameters.

A mixin is declared using the @mixin keyword.

A mixin can be used by using the @include keyword

$border_colour_black : #555;
$border_colour : $border_colour_black;

@mixin border-radius($radius) 
{
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

img
{
    border: thin solid $border_colour;
    @include border-radius(5px);
}

A mixin can have default values. In the example below, the border-radius has a default value of 10px:

$border_colour_black : #555;
$border_colour : $border_colour_black;

@mixin border-radius($radius : 10px) 
{
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

img
{
    border: thin solid $border_colour;
    @include border-radius(5px);
}

There are many mixin libraries available online.

Search online for a mixin library that can be used for creating buttons.

@extend

Extend allows for the same set of class properties to be inserted into multiple locations.

.full_screen
{
    width: 100%;
    height: 100%;
    padding: 0px;
}

body 
{
    @extend .full_screen;
}

p 
{
    @extend .full_screen;
}

The main difference between mixins and extend is that mixins can have parameters and extend cannot.

When we generate css code, the "full_screen" class is also included in the output, as shown below.

.full_screen, 
body, 
p 
{
  width: 100%;
  height: 100%;
  padding: 0px; 
}

If this is not required, we can use a "placeholder" instead of a class.

Placeholders

Placeholders are identical to extend, except that placeholders are not included in the css code that is generated.

%full_screen
{
    width: 100%;
    height: 100%;
    padding: 0px;
}

body 
{
    @extend %full_screen;
}

p 
{
    @extend %full_screen;
}

The generated CSS code no longer includes the "full_screen" class.

body, p 
{
  width: 100%;
  height: 100%;
  padding: 0px; 
}

@import

The rules from one SCSS file can be mergered into another SCSS file by using @import. For example,

@importĀ url("some_additional_styles.css");

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>