Welcome back to series about SASS/SCSS. If you love this content, this is a link for you following other articles. Series about SASS/SCSS
In this
article, we discuss about data types in SASS/SCSS. Specification is numbers, string
in SASS. Other data types will discuss in other articles.
Table of
contents:
- Numbers
- Strings
Let’s go to
the content!
Numbers
In the other
programming languages, numbers type is known as int, long, double in Java,
C/C++, in JavaScript or Python is known only as number data type. SASS/SCSS is
similar, when initializing and assigning a value to variables, the SASS/SCSS
engine will automatically be interpreted with the data type of number. How to
make the engine of SASS / SCSS understand, we need to declare it correctly.
Numbers in SASS/SCSS has two components is the number itself, and its units.
For example, “20px”, “20” is known as number, and “px” is unit. A number can
have no unit or have complex units.
// index.scss
@debug 16; // => 16
@debug 16px; // => 16px
@debug 18rem; // => 18rem
It is quite
simple to be able to capture numbers in SASS/SCSS. Let's improve our knowledge
a little bit. What if we added two numbers with different units together? We
will take an example with “in” and “px”, with “in = 96px”.
// index.scss
@debug 2in+6px; // => 2.0625in
@debug 16px+2in; //
=> 208px
Wow! The
result depends on how you put the value first. If you put number with inch unit
before the result you get number with inch unit. If you put number with px unit
first, you will get number with px unit.
In the above
example we know that 1 inch = 96px. Now let's experiment with units
"rem" and "px" we know that 1rem = 16px.
// index.scss
@debug 2rem+16px; //
=> Error: 2rem and 16px have incompatible units.
@debug 16px+2rem; //
=> Error: 16px and 2rem have incompatible units.
So, we can
see that, although we understand that 2rem will be equal to 32px under normal
conditions, in terms of conversion, both these units are incompatible. We need
to understand the conversion process in terms of the value of two units.
To ensure
successful conversion, avoid errors, it is better to limit the calculation with
numbers with different units. Let's reduce to a single unit to perform the
calculation. Or in case the units cannot overlap, you need to find out in
advance whether these two units can be added together.
Precision
SASS
supports to 10 digits of precision after the decimal point.
// index.scss
@debug 1.09123124124124; // => 1.0912312412
@debug 2.1238312314; //
=> 2.1238312314
@debug 1.0000000000901; // => 1.0000000001
@debug 1.000000000099; // => 1.0000000001
Digits
beyond the original 10 digits range will not be accepted or will be rounded.
However, we have an interesting thing as follows, that when we perform
calculations with numbers with more than 10 digits, the SASS engine still
performs and then converts. This is to help produce accurate results when
rounded.
// index.scss
@debug 1.12938237982739873+2.123219487124747124;
// => 3.252601867
Strings
SASS supports
two kinds of strings: “quoted strings” and unquoted strings. For example,
quoted strings have “” and strings like “Learn about strings in SASS/SCSS”,
unquoted strings don’t have “”, just have strings like Learing strings.
// index.scss
@debug "Learning strings"; // => Learning strings
@debug Learning strings; // => Learning strings
Both give
the same result when outputting the same string. However, to distinguish the
difference, we need to introduce the following case: you know that SASS/SCSS
has two types of truthy and falsy. In it, falsy includes boolean false and
null. Let's use "quoted strings" and unquoted strings to see the
difference.
// index.scss
$var-null: null;
$var-quoted-null: "null";
@if ($var-null) {
.btn {
background-color: red;
}
}
@if ($var-quoted-null) {
.btn {
background-color: yellow;
}
}
In the above problem, we have two variables that are
"$var-null" which stores the value as unquoted strings, and
"$var-quoted-null" which stores the value as quoted strings. In @if
if any variable returns "null", the code block inside will not work. And
any variable that returns the string "null" as the result, the code
block inside will work. Since the string "null" is interpreted as a
string of type truthy, the code block works. Let's see the results together:
/* index.css */
.btn {
background-color: yellow;
}
Awesome! The result is “quoted strings” with an active
code block. So we know that: "quoted strings" will return all strings
to string type, and unquoted strings will return the exact data type it should
be. For example number, boolean, null.
So another question arises is we want to convert from unquoted strings to "quoted strings" and vice versa? Then the answer is yes, and let's go through how to convert.
Convert “quoted strings” to unquoted strings
In SASS, there is a function string.unquote() which is
used to convert "quoted strings" to unquoted string. This function is
very easy to use. Let's see an example when using the unquote() function.
// index.scss
@use "sass:string";
@debug string.unquote("hello") // => hello
We just need
to put "quoted strings" into function string.unquote() and we can use
this function. An important note is that even if you use the string.unquote()
function, strings will still only have a string data type, not other data types
such as number, boolean, color. To better understand this case, let's look at
the following example:
// index.scss
@use 'sass:string';
$quoted-string: "null";
@if(string.unquote($quoted-string)) {
@debug 'Data type is string';
} @else {
@debug 'Data type is null';
}
// => Result:
// => Data type is string
The result
is "Data type is string" which means that even if you use
string.unquote(), the data type is still string, not other data types like
null, number, boolean, color.
Besides, we
also have the function string.quote() used to convert unquoted strings to
“quoted strings”. Similar to how it is used with the unquote() function. We
have put “quoted strings” in string.unquote(). However, there are some caveats
when using the string.unquote() function..
// index.scss
@use "sass:string";
@debug string.quote(null) // => $string: null is not a
string.;
@debug string.quote(false) // => $string: false is not a
string.;
@debug string.quote(#333) // => $string: #333 is not a
string.;
@debug string.quote(123) // => $string: 123 is not a string.
In the
example above, we can see that data types such as null, boolean, color, number
when using function string.quote() get an error. Only strings can use this
function string.quote().
// index.scss
@use "sass:string";
@debug string.quote(hello) // => "hello"
As for using
the string.unquote() function, things will be much easier. And string.quote()
will get error when using data types like color, number, null, boolean.
Combine
number with strings
There is a
requirement to set width and height for components in SASS, but we will get the
number value from variables and combine it with units. Let's see how it turns
out:
// index.scss
$width: 20;
.btn {
min-width: $width + "rem";
}
First, we
will combine the value of the variable “$width” with the “quoted string” unit.
And let's see what the result will bes:
/* index.css */
.btn {
min-width: "20rem";
}
The result we get will be "quoted strings", if
based on this result, we see that the above code is completely invalid for the
component with the class "btn".
So to be able to combine numbers with strings to make
values for properties we need to use unquoted strings. Let's use the above
example again and replace it with unquoted strings.
// index.scss
$width: 20;
.btn {
min-width: $width + rem;
}
Let's see the results together:
/* index.css */
.btn {
min-width: 20rem;
}
Awesome! So the combination of number and unquoted
strings will give the result we expect.
Conclusion
We just learned numbers and strings in SASS/SCSS. String,
we have “quoted strings” and unquoted strings. Notes on using “quoted strings”
and unquoted strings. And how to convert from “quoted strings” to unquoted
string and vice versa.
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