Welcome to a new series. This series of articles about SASS / SCSS, in which you and me will learn about SASS / SCSS. I will take you through the basic to advanced concepts in SASS/SCSS so that you can better understand SASS/SCSS.
Table of contents:
- Why we need to use SASS/SCSS?
- Variables
- Nested in SASS/SCSS
- Use @import
- Use @mixin - @include
- Extend / Inheritance
Why we
need to use SASS/SCSS?
Ignore the
theories about SASS/SCSS that you can easily read in the documentation of
SASS/SCSS. Have you ever wondered where CSS frameworks come from? For example
Bootstrap, Tailwind CSS, …
If you learn
about Bootstrap or other CSS Frameworks you will know that these CSS Frameworks
are generated from SASS/SCSS. This means that the CSS Frameworks you are using
are the ones that the creators have already built for you.
If you
already know how to create CSS Frameworks, why don't we learn how to create
them so that we can build our own Frameworks ourselves?
If the above
idea is not convincing enough to get you interested in learning SASS/SCSS, here
is another idea. If you are a recruiter you will like someone who knows how to
use CSS Frameworks or know how to create CSS Frameworks.
If you still
want to continue reading this series, let's learn about SASS/SCSS together. In
this article we will go through the basics of SASS/SCSS. In the next articles
we will go deeper into the concepts covered in this article.
Variables
If you have
learned through programming languages like C, C++, C#, Java, JavaScript,
Python… They all have one thing in common which is declare variables and use
variables.
In SASS/SCSS
the variable naming will have the following characteristics: “$variable-name”.
First, SASS/SCSS will distinguish between variables and other elements with a
"$" followed by "variable-name".
A note in
naming variables in SCSS is that users will use the variable naming Kebab case.
It can be understood simply that words will be connected by dash "-".
And followed by a ":" and the value assigned to that variable.
$ff: Poppins sans-serif !default;
$fw-n: 400 !default;
$fw-m: 500 !default;
$fw-b: 600 !default;
$fw-xb: 700 !default;
$fw-xxb: 800 !default;
Here we have
“$ff” meaning “font-family”, “$fw” meaning “font-weight” followed by dash “-”
and modifier “n: normal”, “ m: medium”, “b: bold”, “xb: xbold”, “xxb: xxbold”.
Naming in
any programming language is quite simple, but to name variables meaningful and
easy to understand, you will have to do more research on this part.
Nested in
SCSS
If you are a
heavy user of CSS, you know that there are many ways to define components to
style them. You will rely on class, id, tag, … However, one thing that CSS is
doing for you is that when you want to style a component deep inside, it takes
a lot of code to implement. Let's see an example for this:
.menu .menu__item {
transition: all 0.3s ease;
}
.menu .menu__item:hover .menu__link {
color: #9a93ad;
}
.menu .menu__link {
font-size: 1rem;
text-transform: uppercase;
display: inline-block;
}
Are you
familiar with what you're doing? What if you styled components that are deeper
inside? SASS/SCSS will solve these problems for you. You can create the above
code as well as more complex through the following code:
.menu{
.menu__item {
transition: all 0.3s ease;
&:hover .menu__link {
color: #9a93ad;
}
&::after {
content: "";
position: absolute;
inset: 0;
}
}
.menu__link {
font-size: 16px;
text-transform: uppercase;
display: inline-block;
}
}
And the
result of the above code will be:
.menu .menu__item {
transition: all 0.3s ease;
}
.menu .menu__item:hover .menu__link {
color: #9a93ad;
}
.menu .menu__item::after {
content: "";
position: absolute;
inset: 0;
}
.menu .menu__link {
font-size: 16px;
text-transform: uppercase;
display: inline-block;
}
How do you
feel? With just a little familiarity with nested, you can save a lot of code
and still create the lines of code you want.
You will see
that components enclosed in "{}" are children of components outside
of them. For "pseudo classes", nested becomes more special. You need
to use “&” to connect “pseudo class” with “class name”. In the next
articles, I will clarify more about the nested part combined with the
"&" sign.
Use @import
When you
work with CSS file management becomes quite complicated when your code is long.
However, in SASS/SCSS you will split your code into smaller modules. And to
link modules together you can use “@import”.
// variable.scss
$clr-white: #fff;
$clr-black: #242424;
// index.scss
@import './variables.scss';
body {
background-color: $clr-black;
color: $clr-white;
}
/* index.css */
body {
background-color: #242424;
color: #fff;
}
You have
seen the linked modules. For this reason, you can break up your code into
modules, which can be variables, color, or also components like cards,
navigation., …
Use
@mixin - @include
// index.scss
@mixin border($bdr) {
border-radius: $bdr;
}
@mixin card {
padding: 1rem;
box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
}
.card--small {
@include card();
@include border(5px);
}
.card--medium {
@include card();
@include border(10px);
}
.card--large {
@include card();
@include border(20px);
}
The syntax
of a mixin would be “@mixin” followed by the name of the mixin. If that mixin
accepts parameters, it will be in parentheses "()". If no parameter
is accepted, it can be left blank. In the above example, we see there are two
@mixins that are border accepted as a parameter border-radius, and card will
not receive parameters and will be the hard code for the card part.
As for the
"@include" syntax, we will use it in the child components that want
to use the properties contained in @mixin. For @mixins that accept parameters,
in the @include section we will add the argument to the parentheses “()”
otherwise we can leave it blank. So let's see what the result will be?
/* index.css */
.card--small {
padding: 1rem;
-webkit-box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.card--medium {
padding: 1rem;
-webkit-box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.card--large {
padding: 1rem;
-webkit-box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 8px 8px 1px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
The code is
automatically generated, as we want, but the part we actually code is extremely
short. Another question will arise, what if we don't add parameters in @include
while @mixin takes parameters?
// index.scss
@mixin border($bdr) {
border-radius: $bdr;
}
.card--small {
@include border();
// >> error
}
.card--medium {
@include border(10px);
}
.card--large {
@include border(20px);
}
You will
immediately receive an error and the compilation from SCSS to CSS will not take
place. To solve this problem, we can get the default value in @mixin.
Specifically, let's see an example:
// index.scss
@mixin border($bdr: 5px) {
border-radius: $bdr;
}
.card--small {
@include border();
}
.card--medium {
@include border(10px);
}
.card--large {
@include border(20px);
}
And the
result will be:
/* index.css */
.card--small {
border-radius: 5px;
}
.card--medium {
border-radius: 10px;
}
.card--large {
border-radius: 20px;
}
So, you can
basically use @mixin and @include in SASS/SCSS. Use it to create your own style.
Extend /
Inheritance
Extend /
Inheritance is a useful part of SASS/SCSS. Imagine that when you have a common
code that you want to use for two or more components, you can use Extend /
Inheritance.
// index.scss
.container {
display: flex;
max-width: 1200px;
}
.nav {
@extend .container;
background-color: #224244;
}
And here is
the result for the above code:
.container,
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 1200px;
}
.nav {
background-color: #224244;
}
You can see
that the two share the same code above. General sections will be grouped to be
more compact. And the separate parts will be created into separate code.
As the
example above, you don't want to create the code of ".container" but
you just want to create ".nav", how will you do it?
// index.scss
%container {
display: flex;
max-width: 1200px;
}
.nav {
@extend %container;
background-color: #224244;
}
You just
need to replace the "." becomes "%", the component's code
will not be generated. And here is the result after compiling:
/* index.css */
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 1200px;
}
.nav {
background-color: #224244;
}
If you are
thinking that you can also use @mixin - @include in the above case. You have a
very good question. Here is the answer to the above question. If in case no
@mixin - @include does not accept parameters then the code will be exactly the
same as Extend/Inheritance. The difference is that only @mixin - @include
accepts parameters. Depending on the case, you can customize how to use it.
If you are
simply repeating the same code repeatedly, just use Extend/Inheritance. In case
that component has the ability or accepts parameters then use @mixin - @include.
Conclusion
We have gone
through the most basic parts of SASS/SCSS. You have had the first look and can
be completely applied in practice through the knowledge above. In the next
articles we will go deeper into these basic parts.
If you have
any ideas, feel free to comment below. Thank you for joining with me. Having a good
day!
0 Nhận xét