Welcome to series about SASS/SCSS. If you like this topic, this is a link for you follow other articles. Series about SASS/SCSS
In this
article, we will discuss Overview Built-in Modules.
Table of
contents:
- What are Built-in Modules?
- What are functions in Sass?
- What are Modules in Sass
- How to import modules in Sass?
- How to use Built-in Modules in Sass?
- What are Global Functions in Sass?
Let’s go to the content!
What are
Built-in Modules?
Sass provides
many build-in modules which contain useful functions (and the occasional
mixin). These modules can be loaded with @use. All built-in module URLs begin
with Sass, to indicate that they’re part of Sass itself.
We have just
gone through the definition of built-in module. To better understand how it
works, let's go through some other basic definitions.
What are
functions in Sass?
Functions is
a concept that is not new to most programming languages. I have a detailed
article about Functions in Sass, you can read more here. Functions in SASS/SCSS
I will
reiterate the basics of Functions, it's a place that you create to solve a
specific task. You will take inputs; you will process and return outputs. You
will need to adjust the way the functions work to be able to receive inputs and
return outputs exactly as you want. Here is an example of functions in Sass:
// index.scss
@function add($num1, $num2) {
@return $num1+$num2;
}
@debug add(1, 3); //
=> 4
@debug add(2, 7); //
=> 9
@debug add(3, 10); //
=> 13
We have a
function which is named add and serves the function of adding two numbers
together.
What are
Modules in Sass?
We know the
concept of Functions in Sass, we will have a question that is what contains
functions, more broadly, contains variables with many different data types. The
space containing functions, variables is a file and is named after a specified
name. Or in other words, we can call this a module in Sass. Let's look at the example
of the module in Sass.
// index.scss
$primary-clr: #333;
@function add($num1, $num2) {
@return $num1+$num2;
}
We have a module index.scss with variable "$primary-clr", a function is add().
How to import modules in Sass?
I have a
detailed analysis article on why we should not use @import, but instead we
should use @use to import modules in Sass. You can find out more here. Why we should use @use, @foward instead of @import
Let's look
at how to import modules in Sass. We have a module about color in Sass. This is
the module containing the colors.
// _colors.scss
$primary-clr: #333;
$secondary-clr: #789;
$text-clr: #fff;
Now the
question will be how we can use these color variables in any module we want.
// index.scss
@use './colors'as *;
.btn {
background-color: $primary-clr;
color: $text-clr;
}
In the file
“index.scss” we use “@use ‘./colors as *” to be able to import all the
variables in the colors module and use it in “index.scss”. Let's see the
results we get.
/* index.css */
.btn {
background-color: #333;
color: #fff;
}
So, we have
successfully imported and used variables in Sass.
How to
use Built-in Modules in Sass?
We have
briefly looked at how we can build a module ourselves and use it. Likewise,
Sass has built-in modules for you with functions you can use. It can be
sass:color, sass:list, sass:map, sass:math, sass:meta, sass:selector,
sass:string. In the next articles we will learn about these built-in modules.
Now we will
see how to use built-in modules in Sass.
// index.scss
@use "sass:color";
.btn {
border: 1px solid color.scale(#333, $lightness: 20%);
}
We use @use
“sass:color” to import the built-in module color. And we use the function of
color which is scale(). Function scale is built-in and you just need to call it
and use it. We can see that using the built-in module and the one you build
yourself is no different.
However, in
Sass we will have more special cases where we can use functions without
importing any modules to use. We call it Global Functions.
What are
Global Functions in Sass?
As analyzed
above, we can completely use this function without having to import any
modules. Let's see how to use global functions.
// index.scss
.btn {
background-color: hsl(20 20% 20% / 0.25);
color: rgb(255, 255, 255)
}
We have a
representative for a global functions that is hsl() and rgb() these are two
functions that help us to create colors according to the parameters passed.
Let's see the results we will get.
/* index.css */
.btn {
background-color: rgba(61, 48, 41, 0.25);
color: white;
}
Besides the
global functions rgb() and hsl() we also have if() conditions. This is also a
global function that we can use wherever we want.
// index.scss
@debug if(true, 'Yeah', 'No'); // => Yeah
Above are
some of the global built-in functions used in Sass.
Conclusion
We went
through the article about overview built-in functions. You already know the
most basic way to create a function, a module and import modules. From these we
also know how to use built-in functions. How can we use built-in functions? In
the next articles we will learn about each type in built-in functions.
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