What is sass | sass basics crash course | learn sass in 10 minutes - Codewithrandom

CodingPorium 0 Comments

What is sass |  sass basics crash course | learn sass in 10 minutes - Codewithrandom


What is sass 

This may sound interesting but SASS stands for Syntactically Awesome Style Sheets. SASS is known as a preprocessor. SASS is a preprocessor that reduces repetitive code in CSS and saves a lot of time when coding instead of using plain CSS only.


sass Files

To use SASS, you need two files. One is your normal .css extension file and another is the .scss extension file. We code SASS inside our .scss file. Let's learn why.



How sass Works?

So how does SASS works? How does it save time and why do we use another file? 

Browsers in general cannot read SASS code and can only read CSS code. So how to use SASS then? We use a compiler. This compiler is an extension in Visual Studio Code or other editors.
What this compiler does is automatically convert your SASS code in the .scss file to normal CSS code in your .css file.
Now let's see some very basic SASS examples to learn why it is so useful.


sass Compiler

For our SASS compiler, I'm going to use the live SASS compiler in Visual Studio Code Editor.


Browser Support for sass

SASS is currently supported most modern browsers and if you use a compiler for your SASS, browser support wouldn't be much of a problem.


sass Variables

First we will see what is CSS Variables. Variables can keep a certain value/property which we can easily use later. We use the Dollar sign ($) to make a variable. I'm going to make some variables in the example below and then assign it to the body tag.


First paste this 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>Hello World</h1>

<p>This is a paragraph.</p>

</body>
</html>

Then in your SCSS file, paste this:


$myFont: Arial, sans-serif;
$myColor: dodgerblue;
$myFontSize: 20px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}


The output would be:



If you open your CSS File, your compiler would have already converted SCSS to CSS for you. Here's how your CSS code might look like now.


body {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: dodgerblue;
}
/*# sourceMappingURL=style.css.map */

Okay, now let's see what is Nesting.

sass Nesting

Nesting is simple. It means adding a code block inside another code block. This saves time and is more efficient in your code with SASS. We will use the same HTML code as earlier but different SASS code below:


$myFont: Arial, sans-serif;
$myColor: dodgerblue;
$myColor2: mediumseagreen;
$myFontSize: 20px;

body {
    h1{
        color: $myColor;
    }

    p{
        color:$myColor2;
    }
  font-family: $myFont;
  font-size: $myFontSize;
}


The output for this would be:


And if you look at your CSS code, the compiler would have converted all from SASS to normal CSS for you like below:


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

body h1 {
  color: dodgerblue;
}

body p {
  color: mediumseagreen;
}
/*# sourceMappingURL=style.css.map */

Okay, let's now see what is @import

sass @import

Import is just like normal CSS import but with a twist. Import in SASS can easily link 2 or more SCSS files. So you can easily manage multiple SASS files with @import. For this example, we use the same HTML code. But for SCSS, we will use the same file earlier and also make a new file named color.scss


Inside our new color.scss file, paste this below code.

body{
    background-color: purple;
}

If you run this code, the background will not be purple yet because we haven't linked our new file to our main style.scss file. So open our style.scss file and paste this new line of code above.

@import "color";

Besides that we just use the same CSS code as our example in nesting section just now.

The output would be:

Now if we look at our CSS code, our new code in color.scss would have also appeared there. It will now be:

body {
  background-color: purple;
}

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

body h1 {
  color: dodgerblue;
}

body p {
  color: mediumseagreen;
}
/*# sourceMappingURL=style.css.map */

Okay, next we will see @mixin and it's use case. 

@mixin

Earlier, we learnt what is variable. Variables can store only1 CSS property in general. However @mixin is like a variable for block of code to be used easily later.

For this example, paste the SCSS Code below in your SCSS file.
@mixin randomcode{
    font-family:arial;
    font-size:25px;
}

h1{
    @include randomcode;
    color:gold;
}

p{
    @include randomcode;
    color:purple;
}

Try running the code and your output would be:


If you realized, SASS made our work easier because we only had to type the font family and font size code once only. After that we just had to use @include to link our @mixin code. This makes our coding process easier, efficient and more fun.

And that's pretty much all for SASS basics! I hope this article makes you understand that SASS is actually much more easier than you think. So, do start using SASS and make your work easier!    

written by @codingporium

Thanks for reading! Do contact me via the methods below if you have to say anything:
Tags

Post a Comment

Post a Comment

Previous Post Next Post