SASS For Beginners Part II

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 (@)

• @import
• @mixin and @include
• @extend

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

- @import -

@import is used to import an scss file to the main scss. When making a website with multiple sections or pages, with the help of @import 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.

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.

• You will understand after watching the examples below.

_home.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

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

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

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

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

---

- @mixin and @include-

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 @mixin and @include for this.

How to use this -

@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();
  }
}

---

- @extend -

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

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

.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
• Checkout my Github
• Checkout the First Article

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