SASS For Beginners Part I

What is SASS ?

CSS or the Cascading Style Sheet is used to make HTML webpages look more professional and attractive. Learning CSS as a frontend web developer is very important. It is very awesome to use CSS on small projects, but when we are up to bigger projects such as landing pages, CSS files are getting larger, more complex, and very hard to maintain. Sometimes there will be more than 1000 lines in some bigger projects. So this is the place where we need SASS. SASS stands for Syntactically Awesome Style Sheets. After reading this article you will understand how really awesome it is.🧐

We can create a SASS file very easily with the file name and the extension 'scss'.
ex :

style.scss / main.scss / index.scss

But the problem is we can't link our scss file to our HTML file easily like linking css files. But don't worry there is a very simple way to do it. 😉

We have to compile our style.scss file into a css file. You can compile your scss to css using your terminal if scss is installed using the following commands.

Ex : You have to compile a scss file called home.scss

sass --watch home.scss home.css

Syntax :

sass --watch (name of the scss file to compile) (name of the compiled scss file with the extension of *css*)

But there is another way easier way to do that. As we all know VS Code is the favorite text editor among most developers. VS Code extensions play a great role in that credit. There is a cool extension in VS Code that can help us in compiling SASS files called Live Sass Compiler.

SASS BASICS

Variables

In css when we have to use the same font-family or the color with hsl, rgb or hex values, we have to copy and paste the same value in everywhere we want to use it. And the worst part is if we need to change the color or the font-family or whatever it is, we need to change all those places. That is very difficult to manage and a wastage of time. But when we came to sass we can create variables to store such values. So that if we had to change them, we need to change only the variable value. So let's see how to use it.

$defaultFont: "Quicksand", sans-serif;
$mainColor: #1e90ff;
article {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $mainColor; // Using the color variable
  font-family: $defaultFont; // Using the font-family variable
}

footer {
  font-family: $defaultFont; // Using the font-family variable
}

a,
button,
span {
  font-family: $defaultFont; // Using the font-family variable
  color: $mainColor; // Using the color variable
  display: block;
  padding: 10px;
}

---

Nesting

Nesting is also one of the main features that sass can do. In HTML coding we can see a clear nested system in code. We can clearly identify the parent elements and child elements separately. But in CSS it is totally different. There we can't see such nesting. But in sass we can do that also. And it will help us to save our time in finding relevant elements we want to edit. This is how to do it.

Comparison CSS vs SASS

CSS

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
}

nav ul {
  list-style-type: none;
  width: 100%;
  background-color: #f0fff0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav ul li a {
  text-decoration: none;
  color: black;
  font-family: "Quicksand", sans-serif;
  font-size: 0.9rem;
  display: block;
  padding: 10px;
}

SASS

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  ul {
    list-style-type: none;
    width: 100%;
    background-color: #f0fff0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li a {
      text-decoration: none;
      color: black;
      font-family: "Quicksand", sans-serif;
      font-size: 0.9rem;
      display: block;
      padding: 10px;
    }
  }
}

---

Pseudo Elements and Pseudo Classes

Using Pseudo elements and classes is very easy in sass when compared to the css. Let's go through the examples.😉

Example 1

a {
  display: block;
  color: black;
  text-decoration: none;
  padding: 10px;
  &:hover {
    cursor: pointer;
    color: white;
    background-color: black;
  }
}

Example 2

div {
  width: 300px;
  height: 200px;
  color: black;
  display: flex;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #1e90ff;
    z-index: -1;
  }
}

🔗 Links:

• Follow me on Twitter
• Checkout my Github
• Go to the Part 2

Leave a like 👍 and comment 💬 down your ideas below.