DEV Community: Darius Njihia

🏊🏽‍♂️Dive into Sass/SCSS - A PRACTICAL approach - Part Two

Darius Njihia — Sat, 25 Apr 2020 18:29:04 +0000

Recap

Part One - https://dev.to/kihuha/sass-for-beginners-a-practical-approach-1m3b

We first learnt about the difference between .sass and .scss, learnt how to define a variable and how to separate your styles into different files for separation of concerns.

Let's continue

3. SASS to CSS

There are two ways of converting your .scss files to CSS.

3. a) Using an application

For those of you who prefer graphical user interfaces, both paid and free applications can be used. You can check out the following free to use applications. They are fairly straightforward to use and sufficient documentation is available in the apps' homepages

FREE APPS

Koala => http://koala-app.com/
Scout App => https://scout-app.io/

3. b) Using the command line

To use the command-line tool, you need to ensure that you have at least either of the following tools pre-installed

Node => https://nodejs.org/en/
Choco for windows => https://chocolatey.org/
Brew for Mac OSX => https://brew.sh/

Once you have either of the tools installed globally, you can install sass by running:

npm install -g sass for Node
choco install sass for windows
brew install sass/sass/sass for Mac OS X

Confirm your installation by running:

sass --version

To convert the .scss/.sass files to CSS, run the command listed below specifying the source location and the intended destination for the compiled CSS

sass [source-file-location]/main.scss [destination-location]/index.css

The above command will look for the .main.scss file and transform it into plain CSS then save it in the directory specified as the destination and under the name specified in the command

3. c) Using Webpack - For more advanced users

Webpack is a module bundling tool -> it analyses your project for dependencies within files and bundles them to produce a single file. For more info, read through the documentation at https://webpack.js.org/

Webpack allows you to convert .scss files to .css files and also bundles them together to produce a single .css file. As a developer, you can define this process in the webpack.config.js file by specifying the loaders that will process the file.

A typical webpack.config.js file looks like this

module.exports = {
    entry: 'index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss/,
                loader: [
                    'css-loader',
                    'sass-loader'
                ]
            },
        ],
    }
};

The file above defines three main keys - entry, output and module. Pay close attention to the module object. This is where we define loaders to handle the various type of files we have in our project. The second item in the rules is where we describe a regex to test against the files encountered by webpack.

Whenever it encounters a .scss file, it will use the loaders inside the loader array to transform the file from one form to another starting with the loader in the last index of the array (i.e. the sass-loader for our case).

{
    test: /\.scss/,
    loader: [
        'css-loader',   --> This transforms the result of the sass-loader
        'sass-loader'   --> This transforms the file first
    ]
}

Once the transformation has been done, you may

Insert it into the HTML page as a
Output the final transformed css file to the project directory

For option 1, include an additional loader (style-loader) to insert the file

{
    test: /\.scss/,
    loader: [
        'style-loader'  --> Inserts css to the HTML <style> tag
        'css-loader',   --> This transforms the result of the sass-loader
        'sass-loader'   --> This transforms the file first
    ]
}

For Option 2, you need to install an additional plugin (mini-css-extract-plugin) to handle the outputting for us. mini-css-extract-plugin also comes with a loader which is added to the loaded array.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
...
...
{
    test: /\.scss/,
    loader: [
        MiniCssExtractPlugin.loader,  --> outputs css file to a directory
        'css-loader',  
        'sass-loader'   
    ],
    plugin: [
        new MiniCssExtractPlugin()  --> Specify the plugin instance here
    ]
}
...
...

For more info on the mini-css-extract-plugin plugin, start here - https://webpack.js.org/plugins/mini-css-extract-plugin/ or go to their github repo on https://github.com/webpack-contrib/mini-css-extract-plugin

RECAP

You can use a GUI application to transform .scss files to .css
There is a node package called 'sass' that can compile your .scss files for you by specifying the right commands on a terminal
Alternatively, webpack can be used to compile and a) insert your css to an HTML file b) output your css as a .css file

🏊🏽‍♂️Dive into Sass/SCSS - A PRACTICAL approach

Darius Njihia — Fri, 13 Dec 2019 20:51:08 +0000

Intro to Sass/SCSS - PART ONE

SASS - Syntactically Awesome Style Sheets

Sass is a CSS preprocessor - which is just a fancy term for changing code/stylesheets from one form to another. In other words, Sass provides a way to extend the features of CSS allowing you to enjoy some of the features native to a programming language such as variables, functions, modules, mixins, inheritance, operators just to mention a few.

Before we dive in, lets first get the confusing part out of the way, shall we?

Sass (.sass) and Scss (.scss) ? Difference?

Sass is the older syntax for writing stylesheets inspired by HAML (http://haml.info/) - an HTML templating language that focuses on DRY, well indented and clear markup. A Sass stylesheet follows the same principles as shown in the code below

// .sass
body
  font-family: Helvetica, sans-serif
  color: #000

Notice how each of the style declarations is indented and no ';' is used to mark the end of the declaration. I have to say, it does look quite concise making it easier to read.

This approach has, however, been criticised because it looks and feels very different from actual plain CSS because:

CSS uses ';' to mark the end of a style declaration
Also, in CSS, curly braces ('{' and '}') are used to indicate a block of CSS rather than indentation of the statements

SCSS - Sassy CSS
Scss addresses the criticized aspects of sass by providing a more 'CSS' like way of writing stylesheets. For the above block of code, a .scss file would look more like this:

// .scss
body {
  font-family: Helvetica, sans-serif;
  color: #000;
}

The block above looks and feels like CSS. In fact, for this particular snippet, no major transformation needs to happen to transform it to CSS (Like literally, it already passes as CSS)

At the end of the day, people always have different perspectives of which of the two is 'better' so just go with whatever version you prefer. I personally want to feel like I am writing CSS when writing sass stylesheets so I always go with .scss

Let's take a look at how CSS is extended by sass

1. Variables

The term 'variable' refers to a storage unit for a value that is intended to be referenced in more than one places.

Take for instance a scenario where you want to define a uniform and consistent padding across all buttons and input values in the 'login.css' and 'signup.css' file (Assume that the login.css is for a login page and signup.css is for the signup page).

// login.css
button {
 padding: 1rem;
}

input {
 padding: 1rem;
}

// signup.css
button {
 padding: 1rem;
}

input {
 padding: 1rem;
}

In older versions of CSS (before the advent of css-variables and sass variables), you had to define and remember the value in all the padding definitions. Should you want to change or adjust the padding, you have to go to each and every definition of the style as shown below.
Sass provides a way to define a variable and reference it in all locations.

This means that you can simply change the value of the variable and this subsequently changes the value in all the locations where it is referenced.

// login.scss

// DEFINE VARIABLE INSIDE THE FIRST .scss FILE
$input-btn-padding: 1rem;

button {
 padding: $input-btn-padding;
}

input {
 padding: $input-btn-padding;
}

// signup.scss

// VARIABLE IS STILL ACCESSIBLE IN THE SECOND FILE
button {
 padding: $input-btn-padding;
}

input {
 padding: $input-btn-padding;
}

It is always a good practice to define a separate .scss file to hold all the variables. In such a case, ensure the variables file should be placed/loaded before all the other .scss files that require the variable values

@import 'variables.scss';    // LOADED BEFORE THE OTHER FILES
@import 'login.scss';
...

2. Import

As you may have noticed from the above descriptions, Sass allows you to split the styles into multiple files and consolidate them into one file. This is quite useful where you want to ensure:

Separation of concerns
Easier debugging of styles
Logical organization of styles

The separated files; better know as 'partials', take the form shown below

_login.scss .    // _[name-of-file].scss

The underscore before the file name serves as an indicator that this file is not the main file but rather, a partial file that is intended to be consolidated into the main file. The directory would look something like this:

|
|- styles-folder
|--> _variables.scss  // VARIABLES LOADED FIRST
|--> _login.scss
|--> _signup.scss
|--> main.scss        // MAIN SCSS FILE

and the main.scss file would consolidate the styles as shown below:

@import 'variables';
@import 'login';
@import 'signup';

Notice that the underscore and the extension need not be defined when importing the separate styles into the main file.

CONCLUSION

We have barely scratched the surface of the power of sass but let's take a breather. By now you should be able to

Distinguish between .sass and .scss formats of writing sass
Define a sass variable
Write separate sass stylesheets and consolidate them into one

We will now delve into learning how to transform the .sass files to css and learn two more ways in which sass extends css