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-
@mixinand@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.
Top comments (0)