SASS For Beginners Part II
Tags: webdev, beginners, tutorial, css
Published: 2021-11-14 14:32:54

Welcome Back. Here is the second part of the previous **SASS for Beginners** article, If you missed the first part you can also check that out.

## **At Rules (@)**

- <code>@import</code>
- <code>@mixin</code> and <code>@include</code>
- <code>@extend</code>

are some of the most common at rules. Let's see step by step how they work.

### **- <code>@import</code> -**

<code>@import</code> is used to import an scss file to the main scss. When making a website with multiple sections or pages, with the help of <code>@import</code> you can make it easy. You can create different scss files for each section or page and then you can import them to the main scss file.

![Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf8va83kaw3ecexzk4lj.png)

<p style="color: #e23434; font-weight: bolder; font-family: Comic Sans MS; border: 2px solid currentcolor; padding: 10px;">NOTE: When we create scss files that are about to import, that scss file name must start with an underscore( _ ). Ex: _home.scss, _nav.scss, _footer.scss. But when we are importing we have to avoid the underscore.</p>

- You will understand after watching the examples below.

## **\_home.scss**

```scss
article {
  width: 100%;
  height: 100vh;
  background-color: #1e90ff;
  font-family: "Quicksand", sans-serif;
  h1 {
    font-size: 3rem;
    font-weight: 600;
    color: #00008b;
    text-align: center;
  }
  p {
    font-weight: 500;
    font-size: 1rem;
  }
}
```

## **\_nav.scss**

```scss
nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  ul {
    list-style-type: none;
    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;
    }
  }
}
```

## **\_footer.scss**

```scss
footer {
  background-color: rgb(26, 26, 26);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .credits {
    width: 50%;
    padding: 50px;
    .logo {
      width: 150px;
    }
    p {
      font-size: 0.9rem;
      color: #808080;
      font-family: monospace;
    }
  }
  .social-media {
    width: 100%;
    span {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
}
```

Finally import all of them to the main.scss

## **main.scss**

```scss
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@import "./nav";
@import "./home";
@import "./footer";
```

---

### **- <code>@mixin</code> and <code>@include</code>-**

These two @rules are combined together as we need both to complete our task. This will help us to protect the DRY (Don't Repeat Yourself) principle.

Ex: Think that you have to create buttons in different sections with the same stylings. You can use <code>@mixin</code> and <code>@include</code> for this.

How to use this -

```scss
@mixin defaultBtn {
  display: block;
  padding: 10px 30px;
  border: none;
  border-radius: 25px;
  background-color: #5f9ea0;
  color: #ffffff;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
}

article {
  width: 100%;
  height: 100vh;
  display: flex;
  button {
    @include defaultBtn();
  }
}

nav ul li button {
  @include defaultBtn();
}

footer {
  width: 100%;
  height: 50vh;
  background-color: #1e90ff;
  button {
    @include defaultBtn();
  }
}
```

---

### **- <code>@extend</code> -**

<code>@extend</code> is another method used to set the same properties at the same time. It's just like the <code>@mixin</code> and <code>@include</code> but different. You will understand after looking at the example below.

### **scss**

```scss
.btn {
  display: block;
  border: 1px solid black;
  padding: 10px;
}

.btn--active {
  @extend .btn;
  color: white;
  background-color: #dc143c;
  border-radius: 10px;
  font-weight: bolder;
  font-size: 1.2rem;
}
```

### **css**

```css
.btn,
.btn--active {
  display: block;
  border: 1px solid black;
  padding: 10px;
}

.btn--active {
  color: white;
  background-color: #dc143c;
  border-radius: 10px;
  font-weight: bolder;
  font-size: 1.2rem;
}
```
---

🔗 Links:

* Follow me on [Twitter](https://twitter.com/PasinduUthum)
* Checkout my [Github](https://github.com/Pasindu-Uthum) 
* Checkout the [First Article](https://dev.to/pasinducodes/sass-for-beginners-2cn0)

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