SASS For Beginners Part I
Tags: css, webdev, beginners, tutorial
Published: 2021-11-14 14:26:38

# **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 :

```bash
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 <code>style.scss</code> 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 <code>home.scss</code>

```bash
sass --watch home.scss home.css
```

Syntax :

```bash
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](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass).

# **SASS BASICS**

## **Variables**

In css when we have to use the same <code>font-family</code> or the <code>color</code> 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 <code>color</code> or the <code>font-family</code> 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.

```scss
$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**

```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**

```scss
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**

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

**Example 2**

```scss
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](https://twitter.com/PasinduUthum)
- Checkout my [Github](https://github.com/Pasindu-Uthum)
- Go to the [Part 2](https://dev.to/pasinducodes/sass-for-beginners-part-ii-2o02)

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