All about Sass | Sass Tutorial – Codewithrandom

All about Sass | Sass Tutorial – Codewithrandom

All about Sass | Sass Tutorial - Codewithrandom


Syntactically Awesome Stylesheet is a full form of Sass.Sass is an extension to CSS.

In this tutorial, we will discuss Sass in detail. We will also make a simple project using Sass. This project is helpful for more understanding of how to actually Sass work.

Now let’s start!

What is Sass?

Syntactically Awesome Stylesheet (Sass) is a CSS pre-processor extension. Sass supported all versions of CSS. It saves users time by reducing CSS repetition. It can be downloaded and used for free.

Hampton Catlin designed it in 2006, while Natalie Weizenbaum developed it.

Stylesheets are growing in size, complexity, and difficulty to manage. A CSS pre-processor can help with this.

Variables, nested rules, mixins, imports, inheritance, built-in functions, and other capabilities are available in Sass. That properties are not available in CSS.

How does Sass work?

Sass code is not understood by browsers. To convert Sass code into regular CSS, you’ll need a Sass pre-processor. This is referred to as transpiring.

So, you’ll need to submit some Sass code to a transpiler (some sort of computer), and then you’ll get some CSS code back.

We make use of a compiler because this compiler converts SASS code in the .scss file and immediately converted it to conventional CSS code in the.css file. This compiler is a Visual Studio Code or another editor extension. In our project, we use the live sass compiler in Visual Studio Code Editor.

All about Sass | Sass Tutorial - Codewithrandom

Sass File types

You’ll need two files to use sass. There are two types of files one with the.css extension and another with the .scss extension. Our .scss file contains sass code.

Now let’s discuss some properties is Sass.

Variables in Sass

Variables are a type of data storage that can be reused later. You can use Sass to store data in variables like texts, numbers, colors, booleans, and lists. The Dollar sign($) symbol is used in Sass to declare variable names.

Here we make some variables in the example below and then assign them to our body tag.

First write our HTML Code:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“style.css”>
<link rel=“stylesheet” href=“style.css.map”>
<title>Document</title>
</head>
<body>
<h1>OUR heading Tag</h1>
<p>This is our paragraph tag.</p>
</body>
</html>

Now write scss in our .scss file. In which we declare some Variables :

$myFont: Arial, sans-serif;
$myColor: green;
$myFontSize: 20px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}

This scss code automatically convert in css code in .css file that is :

body {
font-family: Arial, sans-serif;
font-size: 20px;
color: green;
}

Here our output looks like this:

All about Sass | Sass Tutorial - Codewithrandom

@import in Sass

Import works in the same way as regular CSS import, but with a difference. Importing two or more SCSS files is simple in SASS. As a result, @import makes it simple to manage many SASS files.

We’ll use the same HTML code for this example. However, for SCSS, we’ll use the same file as before as well as create a new color file .scssPlace.

The following code in our new color .scss file.

body{
background-color: red;
}

Because we haven’t linked our new file to our main style scss file, the background will not be red when you run this code. So, open our style.scss file and paste the code below :

ADVERTISEMENT

@import “color”;

Apart from that, we simply repeat the CSS code we used in the variable section before.

ADVERTISEMENT

If you look at our css section after running the files it looks like this:

ADVERTISEMENT

body {
background-color: red;
}
body {
font-family: Arial, sans-serif;
font-size: 20px;
color : green;
}

Here is our output :

ADVERTISEMENT

All about Sass | Sass Tutorial - Codewithrandom

@mixin and @include in sass

The @mixin directive allows you to generate CSS code that will be reused across the website. @include directive allows you to use (include) the mixin.

ADVERTISEMENT

Arguments are accepted by mixins. You can pass variables to a mixin this way.Vendor prefixes are another suitable usage for a mixin.

Nested Rules and Properties in sass

In the same manner that HTML allows you to nest selectors, Sass allows you to nest CSS selectors.

Font-family, font-size, and font-weight, as well as text-align, text-transform, and text-overflow, all have the same prefix.

You can write them as nested properties in Sass.

@extend in sass

You can transmit a collection of CSS properties from one selector to another with the @extend directive. If you have nearly similarly designed elements that just differ in minor features, the @extend directive comes in handy.

The @extend directive assists in the Drying up of your Sass code.

That’s quite much it for SASS fundamentals! I hope that this essay has shown you that SASS is considerably simpler than you might assume. So go ahead and start utilizing SASS to make your life easier.

Thank You!

Check out more…..



Leave a Reply