Welcome back to series about SASS/SCSS. If you like this topic, this is link for you follow other articles. Series about SASS/SCSS.
In this
article, we will discuss about operator in SASS/SCSS. And more specifically the
Equality operator.
Table of
contents:
- What is equality operator?
- Numbers with equality operator
- Strings with equality operator
- Colors with equality operator
- Lists with equality operator
- Maps with equality operator
- Booleans, Nulls with equality operator
- Functions with equality operator
Let’s go to
the content!
What is
equality operator?
The Equality
operator also speaks for itself, which is compare two values are the same.
And more specifically, it is the same type and same value. So, what does same
type mean? We can understand the simplest that is Numbers must be compared with
Numbers, Strings must be compared with Strings, Colors must be compared with
Colors. Characteristic for the return result equality operator is Booleans true
and false. If values do not have the same type, we immediately know that the
return result will be Booleans false. Likewise, if the matches have the same
type but not the same value, the return will be Booleans false. Only when the
comparisons have the same value and type will the result return Booleans true.
To use equality operator we have the sign “==” and the sign “!=” representing
equal and unequal. To better understand, we will go through the data types for
comparison.
Numbers
with equality operator
If you want
two numbers to match when compared, then both must have the same value and
units. This means that if you have the same value, but the units are different,
the result you get is still wrong.
// index.scss
@debug 1==1; // => true
@debug 1px==1em ; //
=> false
@debug 1inch==96px; //
=> false
@debug 1rem==1rem; //
=> true
We have the
following examples, first we compare "1" with "1" both have
the same data type Numbers, have the same value as "1" and no units.
The result we get is true, which means both equal. Next, we compare “1px” and
“1em” both have the same value as “1”, but the units of both are different, the
result we get is false, also both are not the same. We know that "1inch"
can be converted to "96px", we compare these two values, we get the
return result false. This means that even though both can be converted to each
other, we cannot compare the two equally. Finally, we compare “1rem” and “1rem”
both with the same type and same value, and of course we get the same result.
We have a
conclusion when combining Numbers with Equality operator, that besides the same
value and same type, Numbers also requires us to have the same units, the
result will be true.
Strings
with equality operator
We know that
Strings has both types "quoted strings" and unquoted strings. Let's compared
to see if "quoted strings" can be the same as unquoted strings.
// index.scss
@debug hello=="hello"; // => true
@debug world==world; //
=> true
@debug "hello"=='hello'; // => true
@debug hello=='hello'; // => true
@debug "hello"=="hello"; // => true
@debug 'hello'=='hello'; // => true
We can see
that, whether it is "quoted strings" or unquoted strings, if there is
the same value, the result will be true. We can draw a conclusion that for
Strings, regardless of "quoted strings" or unquoted strings, if we
have the same value, we get the result true.
Colors with equality operator
Colors in
SASS/SCSS has many spellings, we can write rgb, rgba, hex code, hsl, hsla. So
we need to find out what will be the result if we compare it all together?
// index.scss
@debug hsl(20, 30%, 30%)==#634536; // => true
@debug rgba(0, 0, 0, 0.3)==rgba(0, 0, 0, 0.2); // => false
@debug hsla(20, 20%, 20%, 20%)==rgba(61, 48, 41, 0.2); // => true
Awesome! We
can see very special problems that only Colors have. We can compare the hsl
writing with the hex code and the result we get is true. We can compare hsla
with rgba and the result we get is true. Only if the index "alpha" in
rgba does not match, the result we get is false.
We can
conclude that Colors are comparable with many different forms of writing. We
can compare rgb with hex code, we can also compare rgba with hsla. If it's the
same value. However, we have a note that the index "alpha", if this
index is different, the result will be completely different.
Lists
with equality operator
Lists in
SASS/SCSS can be written with accented (), []. The question we will ask is
whether list with () is comparable to list with []?
// index.scss
@debug (1, 2, 3) == [1, 2, 3]; // false
@debug [1, 2, 3] == [1, 2, 3]; // true
@debug (1, 2, 3) == (1, 2, 3); // true
@debug (9, 2, 3) == (1, 2, 3); // false
@debug [9, 2, 3] == [1, 2, 3]; // false
We can see
that Lists with “()” cannot be compared with Lists with “[]” even though they
have the same value. This means that we can only compare Lists with “()” with
Lists with “()” and Lists with “[]” with Lists with “[]”. However, to ensure the
result is true, we also need to ensure that Lists have the same value.
Maps with
equality operator
We have the
structure of Maps as (“key”: value, “key”: value). Let's take a look at some
cases to compare Maps with each other.
// index.scss
@debug ("primary": 123, "secondary": 789)==("primary": 123, "secondary": 789); // => true
@debug ("primary": 123, "secondary": 789)==("secondary": 789, "primary": 123); // => true
@debug ("primary": 123, "secondary": 789)==("secondary": 123, "primary": 789); // => false
We have key
- value pairs as follows "primary" and "secondary" are keys
and 123, 789 are the value of each key. We compare two maps with the same value,
and we get true. Next, we will change the position of these key - value pairs
to see the results. Amazing! The return result is still true, even though we
have changed the position of the value pairs. Finally, we compare Maps with no
similar results and the result we get is false.
We can
conclude that, when comparing Maps, we only have the same key - value pairs,
then the result we get will be true, no matter the location or not.
Booleans,
Nulls with equality operator
We know that
Booleans true when compared to Booleans true or Booleans false when compared to
Booleans false Booleans both return true. So, let's try to compare Booleans
false with null, and <expression> = true compare with <expression>
= true, then the story will be like?
// index.scss
@debug false==null; //
false
@debug (1==1)==(2==2); // true
@debug (2==1)==(1==2); // true
@debug (1==2)==(1==1); // false
We cannot
compare Booleans false with Nulls because they are essentially different. We
can compare <expression> with <expression>, but both must have the
same value for the result to be true.
Functions
with equality operator
We know that
Functions is also a data type. However, Functions is of a special form
Functions that take input and return outputs. We will compare Functions with
the same input and not the same input, what will happen?
// index.scss
@debug lignten(#345, 10%)==lignten(#345, 10%);
@debug lignten(#345, 10%)==lignten(#345, 20%);
We have a
function lignten() used to increase the brightness of a color. We see that when
the input is the same, the result is true. When the input is different, the
result is different.
We can
conclude that functions equal to the same function. Functions are compared by
reference, so even if two functions have the saem name and definition, they're
considered different if they aren't defined the same place.
Conclusion
We have
learned through data types when combined with equality operator, what will
happen.
If you have
any ideas, feel free to comment bellow. Thank you for joining with. Having a
good day!
0 Nhận xét