Welcome back 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 continue to discuss operators in SASS / SCSS.
Table of
contents:
- “=” in SASS/SCSS
- Relational Operators
- Numbers with Relational Operators
- Other data types with Rational Operators
Let’s go to
the content!
“=” in
SASS/SCSS
In the
previous article, we discussed how to use “==” and “!=”, you can read more
here Operator in SASS/SCSS - Part 1. Those things represent Equality operator, if we want to return true, we
need envies to have the same data type, and value. So a question arises that we
can assign values to a variable by using ":", Equality operator
then using "==", "=" will be used for what. Let's go into
the analysis together.
In
SASS/SCSS, the use of the "=" sign is very little, only used in
identifying elements. We have the following example:
// index.scss
a[href="home"] {
color: red;
}
input[type="checkbox"]:checked {
color: yellow;
}
We have
properties in tags, like “href” of anchor tag, “checkbox” of input. When we
want to identify separate parts, we will use the "=" sign to be able to
call it more specifically.
/* index.css */
a[href=home] {
color: red;
}
input[type=checkbox]:checked {
color: yellow;
}
Above is the
result we get. One can conclude that for assigning values to variables we can
use “:”. When we want to compare Equality operator we can use “==” and “!=”. As
for the "=" sign, we only use it when for attributes, properties of
tags. If you have other ideas on how to use the "=" sign, please
comment below to let everyone know.
Relational Operators
Relational
operators determine whether numbers are larger or smaller then other. They
automatically convert between compatible units. To represent Rational Operators,
we use ">", "<", "<=",
">=". Through the above definition, we can see that Relational
Operators applies to Numbers, so if we apply it to other data types, is it
possible or not?
Numbers
with Relational Operators
We know that
Equality Operators compare Numbers, same values and same units, the result is
true. Converting between compatible units does not work at all. However, in
Relational Operators, we can do this. Let's explore some examples:
// index.scss
@debug 2px>=1px; //
true
@debug 1rem>=2rem; //
false
@debug 1in>=95px; //
true
@debug 1in - 1px>=95px; // true
As we can
see, comparing two values of the same units is very simple, and can be
applied to both Equality and Rational Operators. We have a better thing that we
know that “1in=96px”, if we use Equality Operators then we will not convert
between compatible units. As for Rational Operators, we can convert and compare
between compatible units.
Through the
above example, you can see that the comparison of Rational Operators is easier
and can only be applied in conjunction with Numbers. Depending on the intended
use, you need to choose between Equality and Rational Operators.
Other data types with Rational
Operators
To answer
the question above, whether besides the combination of Numbers and Rational
Operators. Can we still apply Rational Operators with other data types?
// index.scss
@debug hello>=hello;
// => Error: Undefined operation
"hello >= hello".
@debug #333>=#444;
// => Error: Undefined operation "#333
>= #444".
We have
examples of Strings and Colors, we see that combining Strings, Colors with
Rational Operators is not possible. We cannot compare less than or more than
types. And at the same time, we can see that the SASS engine also gives an
error when combining Rational Operators and other data types.
We can
assert that Rational Operators can only be applied to Numbers, and other data
types cannot be applied.
Conclusion
We have
learned about the function of the "=" sign in SASS/SCSS. As well as
confirming that Rational Operators can only be applied to Numbers.
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