Welcome back
to series about SASS/SCSS. If you like this topic, here is link follow other
articles about this content. Series about SASS/SCSS
In this
article, we discuss about function in SASS/SCSS.
Table of
content:
- What is function in SASS/SCSS?
- Default functions
- Self-build function
- Overwrite default function
- Overwrite self-building function
- @return
- Parameters
Let’s go to
the content:
What is
function in SASS/SCSS?
In almost
all programming languages there is a common concept of function. In SASS/SCSS
is no exception, functions are created to handle specific tasks. Functions can
take inputs and return outputs according to the request the function handles.
In SASS/SCSS
to define a function, people use @function. An interesting thing is that in
languages like Java, C/C++, C#, ... it is required to declare the data type
that the function will return. For SASS/SCSS, we don't need to do this. This
means that the functions in SASS/SCSS will return the data types that SASS/SCSS
has. Syntax to create a function in SASS/SCSS is much simpler with @funtion
function-name(<arguments…>){@return}. Now let's analyze this syntax.
About @function is required to create a function in SASS/SCSS. And
function-name is used to indentified with many other functions or variables.
Arguments is completely you can add or not add depending on the specific case.
And @return will be the last value that function will return.
Default
functions
Before
taking a closer look at the syntax for creating a function. Let's go through
some default functions written by SASS/SCSS to learn how to use a function.
// index.scss
.btn {
background-color: mix(#232323, #898989, 30%);
}
The output
of the above code will be:
/* index.css */
.btn {
background-color: #6a6a6a;
}
Let's
analyze why we can do this. First, we have a function called mix(), we will
execute this function in the block of one or more components. This function
will receive three arguments which are color code 1, color code 2 and a certain
percentage. Based on the name and parameters, we can realize that this is a
fuction used to mix two colors together and adjust by a certain percentage. And
in the end, we get a completely new color code.
A note in
executing a function. Most function types are written as properties for one or
more components. For example, width, height, padding, margin... If we call
functions that stand alone or don't result in a property, an error will occur
immediately. Let's reuse the mix() function above to make this clear.
// index.scss
mix(#333, #222, 50%);
// => Error
.btn {
mix(#222, #333, 30%);
// => Error
}
The correct
usage would be in the example above. Functions will be values for properties.
So, we have
figured out the problem, why do we need to create a function. Functions are
used to solve one or more specific tasks. We can reuse many times in many
different places if both process the same logic. In SASS/SCSS there are many
default functions. You can learn more about it in future posts.
Self-build
function
Once we know
why we should have a function and know the functions of the function, let's
rely on the syntax to create a new function according to the task we set. We
will create a function with the function of creating a button, and will take an
argument, with 1 being that the button is of type small, 2 is of medium, and 3
is of type large.
// index.scss
@function space($size) {
@return 1rem * $size;
}
.btn {
&--small {
padding: space(1);
}
&--medium {
padding: space(2);
}
&--large {
padding: space(3);
}
}
We have just
defined a function with the syntax of @function, with the name space and taking
the parameter $size. This function will return the value of that size. The
result we get will be:
.btn--small {
padding: 1rem;
}
.btn--medium {
padding: 2rem;
}
.btn--large {
padding: 3rem;
}
So, we just
built a function ourselves in SASS/SCSS. We need to understand how to create a
function and how to make that function work according to the task that we have
set out. Next, we will go through more special cases in function in SASS/SCSS.
Overwrite
default function
The part we
will go into an experiment is that we will define a new function with the same
name as a default function that SASS/SCSS has already written. We will go back
to the example of function mix() to see the value.
// index.scss
@function mix($color1, $color2, $amount) {
@if($amount >= 50%){
@return $color1;
}
@return $color2;
}
.btn {
background-color: mix(#123, #909, 40%);
&--small {
color: mix(#333, #222, 50);
}
&--medium {
color: mix(#444, #455, 49);
}
&--large {
color: mix(#555, #678, 51);
}
}
If according
to the default function that SASS / SCSS has written, we will have a new color returned.
In the function that we define, we will get the color based on the variable
amount. And see the results we get:
/* index.css */
.btn {
background-color: #909;
}
.btn--small {
color: #333;
}
.btn--medium {
color: #455;
}
.btn--large {
color: #555;
}
Awesome! So
we see that the default function can be completely overwritten according to our
wishes. On the other hand, if we are not careful in naming functions, we can
completely overwrite things that we do not want.
Overwrite
self-building function
For
functions that we define ourselves, what if we override them. Let's go back to
the space() function in the above example to check together.
// index.scss
@function space($size) {
@return 1rem * $size;
}
@function space($size) {
@return 5rem * $size;
}
.btn {
&--small {
padding: space(1);
}
&--medium {
padding: space(2);
}
&--large {
padding: space(3);
}
}
Here, we
have manually defined a new function with the same name as the example above.
However, the task that this function does is completely different. So, let's
see what the return result will be?
/* index.css */
.btn--small {
padding: 5rem;
}
.btn--medium {
padding: 10rem;
}
.btn--large {
padding: 15rem;
}
Wow! As a
result, the function built below will overwrite the function above. So we have
one more conclusion that the functions built later will override the functions
before it.
@return
We will have
a question whether a function without @return is okay. Before answering this
question, we will need to answer another question, what does @return do? Through
the examples above, we can see that the processing functions will return
outputs, @return will receive the final output that the user will receive. So
if a function doesn't have @return, the function doesn't need to return output.
However, going back to the definition we mentioned earlier is that most
functions cannot stand alone at all, but need to be a value for a property
located in one or more components. If so, then a function without @return
cannot have the value we want at all. We can make one conclusion that @return
will be used in most cases to return output.
Parameters
In the
functions we will still need to receive parameters for processing. In normal
cases we get a specific number of parameters that we multiply. In more special
cases. We take an unspecified number of parameters to be accepted. So what
should we do in this situation? These are arbitrary arguments, allowing the
user to enter as many parameters as they want. Arbitrary arguments will end
with… Let's come up with concrete examples:
// index.scss
@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
.btn {
padding: sum(1rem, 2rem);
margin: sum(1rem, 2rem, 5rem);
}
The result
we get will be:
/* index.css */
.btn {
padding: 3rem;
margin: 8rem;
}
Thus,
besides receiving a specific number of parameters, we can also accept as many
parameters as we want. In the example above, whether the number of parameters
is two or three, the calculation is still done.
Conclusion
We've got
the best look at functions in SASS/SCSS. We have default function, self build
function, overwrite default function, overwrite self-build function, return and
parameters. So, you can apply the function to solve real problems. However, a function
is like a box containing tools to work with. In the next articles I will give
you tools to make your work much faster and easier.
If you have any
ideas, feel free to comment bellow. Thank you for joining with me. Having a
good day!
0 Nhận xét