SCSS

SCSS is a super-set of CSS that includes features that allow for a CSS file to be dynamicly created. SCSS stands for "Sassy CSS".

SCSS is pre-dated by a syntax knows as SASS. SASS stands for “syntactically awesome style sheets”. SASS 3 onward is SCSS. When searching the internet, it is common to find SASS and SCSS used interchangably, as

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 called "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;



$text_colour: $text_red;
$dropshadow_colour: $dropshadow_red;



p
{
    color: $text_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_padding: 0px;
$menu_margin: 0px;
$menu_li_width: 80px;


.menu 
{
    ul
    {
        list-style: none; 
        padding: $menu_padding;  
        margin: $menu_margin;  
    }
    
    li
    {
        width: $menu_li_width;    
        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;  
        } 
    }
}

The & in the code above refers to the parent element (in this case, the a element). Using the & allows us to keep a clean structure, where we declare each element only once.

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 common class properties to be shared across multiple css rules. Using normal CSS, we can combine the shared properties of a set of selectors by listing the selectors, as shown below:

HTML

<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/main.css" rel="stylesheet" type="text/css"/> </head> <body> <p>A normal paragraph</p> <p class="description">Some formatted text</p> <label>Name: </label><input type="text" placeholder="Enter your name"> <input type="submit" value="Submit"> </body> </html>

CSS

input[type=text], input[type=submit], .description { font-size: 20px; color:#99f; } input[type=text], input[type=submit] { border:thin solid #ccc; border-radius:10px; } input[type=text] { width:200px; }

Listing the selectors, as shown above, leads to two problems:

Using SCSS solves these two issues, as shown below:

.font
{
    font-size: 20px;
    color:#99f;
}

.border
{
    border:thin solid #ccc;
    border-radius:10px;
}

input[type=text],
{
    @extend .font;
    @extend .border;
}

input[type=submit]
{
    @extend .font;
    @extend .border;
}

.description
{
    @extend .font;
}

There are two differences between mixins and extend. These are:

When we generate css code, the .font and .border class names are also included in the output.

Copy and save SCSS code above. Take a look at the CSS file that is generated. You will see that the .border and .font classes are included in it, as shown below:

.font, input[type=text], input[type=submit], .description {
  font-size: 20px;
  color: #99f; }

.border, input[type=text], input[type=submit] {
  border: thin solid #ccc;
  border-radius: 10px; }

Placeholders

Placeholders are identical to @extend, except that class names are not included in the CSS code that is generated.

%font
{
    font-size: 20px;
    color:#99f;
}

%border
{
    border:thin solid #ccc;
    border-radius:10px;
}

input[type=text],
{
    @extend %font;
    @extend %border;
}

input[type=submit]
{
    @extend %font;
    @extend %border;
}

.description
{
    @extend %font;
}

The generated CSS code will not now include the .border and .font classes.

@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="file:///C|/Users/Derek/Documents/Notes/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>