Welcome back to series about SASS/SCSS. If you like this topic, this a link for you follows other articles. Series about SASS/SCSS
We have
covered most of the Operators included in SASS/SCSS. In this article, we will
go through the remaining two Operators of SASS/SCSS which are String Operators
and Boolean Operators.
Table of
contents:
- String Operators
- String Operators with other
- String Unary Operators
- Booleans Operators
Let’s go to
the contents!
String
Operators
We have a
characteristic for String Operators that is a "+" and a
"-", don't make the mistake of thinking that this is for Numberic
Operators, in fact you use "+" and "-" to concatenate
expressions' value together. First, they will see what the "+" sign
can do:
// index.scss
@debug 'Hello '+'SASS'; // => 'Hello SASS'
@debug Hello+SASS; //
=> HelloSASS
We see that
the return result is a combination of expressions. For “quoted strings” the
return result will be “quoted strings”. As for unquoted strings, the return
result will be unquoted string. For “quoted strings” can customize “space”. As
for quoted strings you can't do this at all. The results returned by unquoted
strings will be expressions without "space". If you are wondering
when to use "quoted strings" or when to use unquoted strings, the
answer to both is no different. If you use “quoted strings” you can customize
the “space”, otherwise both are the same.
Next, we
will learn about the "-" sign in String Operators. Let's go through
the examples together:
// index.scss
@debug "Hello"- "SASS"; // => "Hello"-"SASS"
@debug Hello - SASS; //
=> Hello-SASS
@debug "Hello"- SASS; // => "Hello"-SASS
@debug Hello- "SASS"; // => Hello-"SASS"
We have
“quoted strings” combined with “quoted strings”, unquoted strings combined with
unquoted strings, and “quoted strings” combined with unquoted strings. If any
expression is "quoted strings", the result will be "quoted
strings" and if any expression is unquoted strings, the result will be
unquoted strings. And the connection between expressions will be the "-"
sign. Unlike the "+" sign, strings will be combined and the
"+" removed, we have the "-" sign that will be preserved
and will still combine expressions.
One thing
that "-" is superior to "+" is to show us whether the
result of a String is in "quoted strings" or unquoted strings.
However, the "-" sign cannot remove itself and must remain in place.
Depending on the intended use, you may consider using it.
String
Operators with other
These
operators don't just wotk for strings! They can be used with any values that
can be written to CSS with few exceptions. We can combine String Operators with
Numbers and Colors.
// index.scss
@debug '2 * 10 = '+20; // => 2 * 10 = 20
@debug 'White color hex is '+#fff; // => White color
hex is #fff
You can see
that the combination of String operators with Numbers, Colors is completely
simple and easy. The returned result will be in the form of Strings. However,
there is one point to note that is Numbers, Colors can't be used as the
left-hand value, because they used to have their own operators.
String
Unary Operators
We have
-<expression> for Numberic Operators which will return negative result.
As for String Operators, we will get returns on unquoted string starting with
“-“ and followed by expression’s value. Similarly, we have /<expression>.
// index.scss
@debug - Hello SASS; //
=> -Hello SASS
@debug / Hello SASS; //
=> /Hello SASS
Booleans
Operators
For other
programming languages, when using Booleans Operators, they will normally use
"!" represents not, “||” represents or, “&&” represents and.
As for Booleans Operators in SASS/SCSS we don't use signs like "!",
"||", "&&" but instead we use "not",
"and", "or".
not
<expression> returns the opsite of the expression’s value.
// index.scss
@debug not 1; // false
@debug not 0; // false
@debug not -1; // false
@debug not unquoted; //
false
@debug not false; //
true
@debug not null; //
true
@debug not true; //
false
First, let's talk about truthy and falsy in SASS/SCSS. We
can easily remember that falsy has only two values, null and Booleans false,
the rest are truthy. We know that not <expression> returns the opsite of
the expression's value. falsy values will return true, otherwise truthy
values will return false.
<expression> and <expression> returns true if
both expressions' values are true, and false if either is false.
// index.scss
@debug 1 and false; //
false
@debug 1 and true; //
true
@debug false and false; // false
@debug false and 1; //
false
This will be explained that, if both expressions contain
the value true, the result will be true. If one of the two expressions contains
a false result, the return result will be false.
<expression> or <expression> returns true of
either expression’s value is true, and false if both are false.
// index.scss
@debug true or true; //
true
@debug true or false; //
true
@debug false or true; //
true
@debug false or false; // false
With or only need an expression whose value is true, then
we will get the result true. The result is false when both values are false.
Conclusion
We have gone through the Operators in SASS/SCSS, and
specifically in this article are Strings Operators and Booleans Operators. We
have learned about all the features of Strings Operators and Booleans Operators.
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