A Beginner’s Guide to SCSS

For over 10 years, CSS (Cascading Style Sheets) has been used as a means to separate document content and provide developers with a method of visually styling web pages. This primitive yet simple language serves developers well, however, with the growing advances in website development and the desire to follow the DRY (Don’t Repeat Yourself) principle, there was a need for a better code organisation.

The CSS pre-processor, “Sassy CSS” (SCSS), provides the ability to write maintainable, reusable and extensible code, ultimately meaning that code is faster to develop and better structured than plain CSS.

SCSS vs. SASS

SCSS was aimed to bridge the gap between the Ruby-like strict syntax of SASS and the more popular CSS.

SCSS and SASS have a number of differences, with SCSS being the more versatile language. When searching for SCSS on search engines, a majority of the results are based on SASS. This can often be confusing for beginners, however SCSS is essentially the next generation of SASS, as well as being a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well.

Tip: SCSS files use the extension scss, which makes it easier to distinguish from SASS.

Features of SCSS

The main advantage of using SCSS is the ability to use programming functionality such as variables, functions, inheritance and operators. The benefits of these functionalities is that the code is displayed more logically, making it easier to manage.

For example, in CSS, you would need to change each instance of a colour’s HEX value:

.box1 {
    padding: 20px;
    background-color: #8899a6;
}

.box2 {
    background-color: #8899a6;
}

Whereas with SCSS, you can set the colour as a variable and apply this in one place only. This provides a huge benefit when your code base reaches a considerable size:

$box-background-color: #8899a6;

.box1 {
    padding: 20px;
    background-color: $box-background-color;
}

.box2 {
    background-color: $box-background-color;
}

SCSS encourages reusability to produce cleaner code. Mixins can be used to generate code at compile time which allows developers to keep their application styles concise and move any tedious code to other files.

Here is an example of a Mixin to apply header styles to certain tags:

$header-font-size: 32px;

$header-font-case: uppercase;

@mixin heading {
    font-size: $header-font-size;
    text-transform: $header-font-case;
}

h1 {
    // Apply the Mixin
    @include heading;
}

This is a very basic Mixin, however they can be extended to be relatively powerful. Variables can be passed in as parameters, ‘If’ statements can be used to determine what to output and loops to save code repetition. More advanced examples of Mixins and functions can be found via the official SASS documentation here.

Another great feature of SCSS is the ability to nest selectors, which allows for better organisation of code.

The following example compiles a styled button element along with a media query for larger devices:

SCSS:

$color-light: #ffffff;

$color-dark: #333333;

$font-size-small: 20px;

$font-size-large: 35px;

.btn {
    border-radius: 4px;
    padding: 10px 25px;
    color: $color-light;
    font-size: $font-size-small;

    &.btn-border {
        border: 2px solid $color-dark;

        &:hover {
            border-color: darken($color-dark, 10%);
        }
    }

    @media (min-width: 768px) {
        font-size: $font-size-large;
        padding: 10px 30px;
    }
}

Compiles to:

.btn {
    border-radius: 4px;
    padding: 10px 25px;
    color: #ffffff;
    font-size: 20px;
}

.btn.btn-border {
    border: 2px solid #333333;
}

.btn.btn-border:hover {
    border-color: #1a1a1a;
}

@media (min-width: 768px) {
    .btn {
        font-size: 35px;
        padding: 10px 30px;
    }
}

Installing SCSS:

The best way to install SCSS is to include the Laravel Elixir package. Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks.

Installing Laravel Elixir:

Installing Laravel Elixir into your application requires a package.json file. This is a list of dependencies that will be installed via the command line using npm install.

{
    "private": true,
    "devDependencies": {
        "gulp": "^3.9.1",
        "laravel-elixir": "^5.0.0",
        "bootstrap-sass": "^3.3.0"
    }
}

Bootstrap is optional but has been included as a starter base for your project.

Once the dependencies have been installed you are ready to setup your gulpfile.js

The gulp file is the master file where you can setup the paths to assets to be compiled and the folder to which they are saved.

An example gulpfile.js has been included however this will be custom to your application. Refer to the Laravel documentation for further configurations.

var elixir = require('laravel-elixir');

// Assets Path
assetsPath = ''; // We are compiling from the current folder
publicPath = '../public'; // Assets will be compiled to here

// Elixir Config
elixir.config.sourcemaps = false;
elixir.config.assetsPath = ''; // Path to SCSS/ JS assets folder
elixir.config.publicPath = publicPath; // Compile path of CSS/JS
elixir(function (mix) {

// Main Styles
mix.sass([
    'main.scss'
], publicPath + '/css/main.css');
});

Setting up the main SCSS file:

The next step is to setup a main.scss file to be used as the main import location for the other .scss files.

You may have noticed that some .scss files have an underscore prefixed, these are known as partials and will not be compiled into a .css file.

// Optionally include Bootstrap
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

// Core Styles
@import 'core/colours';
@import 'core/variables';
@import 'core/fa-outdents';
@import 'core/typography';
@import 'core/buttons';
@import 'core/animations';
@import 'core/forms';
@import 'core/helpers';

// Components
@import 'components/global';

// Individual Sections
@import 'sections/header';
@import 'sections/footer';

Compile the assets:

All that is remaining is to open up a command line and run one of the following commands:

gulp (To compile assets without minifying CSS)

gulp –production (compiles with minified CSS, ready for production)

gulp watch (To automatically compile any changes made to SCSS files, useful whilst developing)

If all goes well you should see your new main.css file compiled into your publicPath path.

Download the source file:

If you would like to download the sample files used in this blog then please visit our GitHub page.

Conclusion

Implementing SCSS into your workflow provides a number of benefits, but what is the future of CSS?

Whilst the idea of browsers natively supporting SCSS may still be a distant hope for some developers, The World Wide Web Consortium (W3C) has already started to implement some key features such as CSS variables and the calc function.

The introduction of Flex box is an emerging factor in the way that modern websites are built. Vertical alignment and the ability for content to fill negative spaces are just a few key reasons for its popularity. The new Bootstrap 4 which is currently in alpha has radically changed the way its grid and components function by adopting flex box.

With limited browser support, some of these features are not currently ready for production, but the future looks promising for CSS.

Has SCSS improved your workflow? Are there any future developments that will provide rapid advances for developers? Let us know over Twitter @FastWebMedia!

We hope you enjoyed that

Related Articles