Introduction to Sass/SCSS and Less:

:)

Aloha! So I posted an article on Getting started with Sass/SCSS and one of the questions I got was “what is Sass/SCSS?“ , and I’m like :

lol

I initially did not write an introductory article on Sass/SCSS, few minutes of your time will be spent on reading “Introduction to Sass/SCSS” . The content of this article provides you with an introduction to the Sass/SCSS and Less tools. Although these tools are similar, their primary purpose is actually to give you an added layer of functionality to basic CSS. Let’s ride!

Sass/SCSS:

Sass is an acronym and typically denotes; Syntactically Awesome Stylesheets and SCSS is simply ; Sassy CSS. They are both preprocessing languages that are compiled to CSS, but they use different technical syntaxes.

Sass uses CSS-compatible, indented syntax to provide customized, well-formatted output. It uses indentation rather than brackets to indicate nesting of selectors, and new lines rather than semicolons to separate properties. Sass employs language extensions such as variables, nested rules, and mixins, my next article will briefly give an Overview of CSS Preprocessing . Especially applicable to effective design, Sass contains useful functions for manipulating colors and other values on your web page. Files using this syntax have the .Sass extension.

//Sass Example
$text-color: #333333
body
color: $text-color

SCSS followed the development of Sass; SCSS offers a more flexible syntax, including the ability to write basic CSS. SCSS is an extension of the CSS syntax; therefore, every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .SCSS extension.

//SCSS Example
$text-color: #333333;
body {
color: $text-color;
}

Working with Sass/SCSS Files:

There are many ways to manage and process your .scss files, the traditional way is to install and use Sass at the command-line. For now lets just quickly discuss the big picture using command-line. For Windows users one of the quickest ways to launch the Command Prompt, in any modern version of Windows, is to use the Run window. A fast way to launch this window is to press the Win + R keys on your keyboard. Then, type cmd or cmd.exe and press Enter or click/tap OK.

For Mac you would open an application called terminal.app in your Utilities folder. Windows users would need to install Ruby, but for MAC users this is pre-installed. Use the command gem install sass in the command-line to install Sass. The idea is that you have Sass installed on you computer globally, so now you can type Sass commands into your command-line. Although, using the command-line is out of scope, I will recommend you spend some time learning about it. It does not take much time or knowledge to start using the command-line.

Basic Sass Commands

Check your Sass version with:

sass -v

Run Sass to compile a .scss file into a .css file:

sass input.scss output.css

You can also command Sass to watch a .scss file for changes then create the .css file:

sass --watch input.scss:output.css

For even more versatility, either Sass or SCSS syntax can import files written in the other syntax. Files can be automatically converted from one syntax to the other using the following sass-convert command line tool.

To convert Sass to SCSS, type the following:

sass-convert style.sass style.scss

To convert SCSS to Sass, type the following:

sass-convert style.scss style.sass

Less:

Just like Sass, Less is a CSS preprocessor and it allows web developers to build modular, scalable, and more manageable CSS styles. Remember that preprocessors extend the CSS language and add features that allow variables, mixins, and other functions that enable you to easily maintain CSS. The compiler is what turns Less code into standard CSS that a web browser can read and process. Less is written in JavaScript so it runs inside NodeJS, in the browser, and inside Rhino. There are also many third-party tools that allow you to compile your files in Less and watch for changes.

Some Basic Syntax Differences from Sass

Remember that both Sass and Less can utilize variables to seclude values. Less uses the @ symbol while Sass uses the $ dollar sign to declare a variable, as seen below:

//Less Variable
@link-color: blue;

//SCSS Variable
$link-color: blue;

Mixins also have a small syntax differences between Less and Sass.

//Less mixin for rounding borders
.round-borders (@radius) {
border-radius: @radius;
}

//Add the round-borders mixin with Less
.box { round-borders(0.5rem); }

The same round-border mixin in Sass looks as follows:

//Sass mixin for rounding corners
@mixin round-borders (@radius) {
border-radius: $radius;
}

//Add the round-borders mixin with Sass
.box { @include round-borders(0.5rem); }

Using Less:

You can use Less on the command line via npm (Node Package Manager), download it as a script file for the browser, or apply it to a wide variety of third-party tools.

The most efficient way to install Less is on the server, via the node.js package manager (npm), like so:

$ npm install -g Less

The Less Compiler

Since Less syntax is non-standard, you will need to set up a compiler. The compiler enables the browser to process and render the output, despite inheriting traits similar to CSS.

Here is a sample of Less code:

@color-base: #2d5e8b;
    .class1 {
        background-color: @color-base;
        .class2 {
            background-color: #fff;
            color: @color-base;
        }
    }

The compiler processes the code and converts Less syntax into a browser-compliant CSS format:

.class1 {
        background-color: #2d5e8b;
    }
    .class1 .class2 {
        background-color: #fff;
        color: #2d5e8b;
    }

Sass/SCSS is actually my preprocessor of choice because it is a bit more popular and is more common. As a professional web developer you get to pick the one you like best and know that you will come across and have to work with both.

Thanks for the read! Stay awesome! :) .

Oh! you can reach out to me on Twitter😊