Tag

Sass is one of CSS preprocessor that can make writing CSS faster and more efficient. You might have heard of Sass, but not know how to set it up or integrate it with your projects. You can learn more about Sass on the official page here.

What is Css Preprocessor?

A preprocessor is a program that takes a bit of code and compiles it into a different bit of code because Sass has features that don’t exist in CSS yet like variables, nesting, mixins, inheritance, and other. So you can write some CSS code like programming language. In the case of CSS preprocessors, we’re compiling the Sass language into regular old CSS that the browser can interpret. Therefore, the code you use on your HTML page will be the same as with CSS.

SASS or SCSS, what’s the difference?

When I refer to Sass in this article, I’m referring to the entire Sass project. Within Sass, there are two different preprocessors:

• Sass – Syntactically Awesome StyleSheets: .sass extension
• SCSS – Sassy CSS: .scss extension

You can choose to use either, but throughout this article we’re going to use SCSS. SCSS is more widely used, and much easier to get started with and integrate with existing projects – in fact, if you take any .css file and save it as a .scss file, it is now a valid SCSS file.

SCSS uses all the syntax we’re familiar with in CSS:

Copy$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass does away with the syntax, and relies on forced indentation.

Copy$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color 

It seems cleaner and easier, but as it is much more difficult to implement with existing projects, SCSS is the vastly more popular choice.

Why should I learn Sass? How important?

There is a bit of a learning curve when it comes to using and setting up Sass. You should already be proficient, or at least competent with CSS before attempting to learn a CSS preprocessor.

By 2020, all projects involved in both design and development must use Sass. Because it is easily modified and implemented. For example, the most popular CSS framework, Bootstrap, has been using Sass since version 4 was launched.

The Sass Guide on their official documentation is a fantastic getting started guide to understanding what Sass can do. If you’re not familiar, spend a few minutes going over the guide. It would be hard for me to make understanding the basics any clearer than they already have. Instead, I’ll sum up a few of the terms.

• Variable – A variable is a storage container for a CSS value, such as a color or number. The syntax is written as $variable. You can use this code throughout the stylesheet after you have defined it.
• Nesting – Nesting reduces repetition in code and makes writing CSS faster and easier like @if, @each, @for, and @while.
• Partials – Partials are SCSS files that begin with an underscore (_partial.scss) and are not compiled into their own CSS files, but are rather imported into a main file.
• Import – Use @import to compile all your partials into one file.
• Mixins and Include – Use @mixin for repetitious CSS, such as when vendor prefixes are required and call @include to use mixins.
• Extend – Use @extend to change a few key aspects of otherwise identical elements – such as a group of buttons with different colors.
• Operators – Operators allow you to use math calculations in your CSS – such as defining the width of various parts of a layout.

Let’s create simple projects with Sass

At first, you need to install the vs code or Visual studio code, link in here. Why I choose vs code? because you can use it for Windows, Linux, or Mac (cross-platform). So you can’t learn more about the Command line to compile Sass language.

Create folder Sass_projects and open it on vs code.

Further, we need to install Live Server and Live Sass Compiler extension. These both extension will help us to Compile Sass lang and Live browser reload. So if you save all of the files on your Folder opened in vs code, the browser can compile and reload browser automatically.

Now, we need to settings the Live Sass Compiler to save the CSS file after compile from Sass/Scss to folder css. Go to settings ctrl + , and type on search bar live sass and on settings formats choose edit in settings.json, view image below.

Make sure the savePath is “./css”. That means you save it to Css folder.

Okey, you’re done. Let’s create basic HTML and simple Sass file.

Copy<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Sass Tutorial - MACode ID</title>

  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <div class="wrap">
    <h1 id="title">Hello World</h1>
    <p>Have a nice day, keep hard-working, and don't forget to rest.</p>
  </div>
 
</body>
</html>

Notice here we direct the link tag to the css folder and refer to the style.css file.

Copy$font-base: "Open Sans", sans-serif;
$line-height-base: 1.65;

$line-height-heading: 1.2;

$primary: #2362f5;
$secondary: #646772;

$wrap-width: 900px;

body {
  margin: 0;
  font-family: $font-base;
  line-height: $line-height-base;
}

h1 {
  color: $primary;
  line-height: $line-height-heading;
}

p {
  color: $secondary;
}

.wrap {
  display: block;
  margin: 50px auto;
  max-width: $wrap-width;
}

Save it on a folder sass, and then open the Command Palette or press CTRL + SHIFT + P, type Live Sass: Open Live Sass Output Window.

Now you have the style.css and style.css.map files, and after you modify the style.scss, files on css folder will be modified to. It’s simple right?

Further, open the Command Palette again and type Live Server: Open with Live Server. Your default browser will be automatically open up. Now, if you modify all the file on Sass_projects folder, the browser will be reload automatically.

The output will be: