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 the SASS/SCSS print data type. We have
learned the Numbers and Strings data types in SASS/SCSS. Now let's go to learn
the Colors and Lists data types.
Table of
content
- Colors
- Lists
- Assess elements in Lists
Let’s go to
the content!
Colors
Colors is a
data type specific to SASS/SCSS, only SASS/SCSS has this data type. If you know
some other programming languages such as Java, C/C#, C++, JavaScript, etc. All
these languages do not have the data type of Colors. So, let's find out what
this data type is special in.
Let's talk a
little bit about the Strings in SASS/SCSS data type. Then Strings are of two
types, “quoted strings” and unquoted strings. Often, we will confuse unquoted
strings with other data types. However, other data types will have specific
spellings for their data types, and at the same time distinguish them from
unquoted strings. To characterize the Colors data type, we have a number of
ways to write it as follows:
// index.scss
@debug #fff; // => #fff
@debug rgb(0, 0, 0); //
=> black
@debug rgba(0, 0, 0, 0.3); // => rgba(0, 0, 0, 0.3)
@debug hsl(25, 50%, 50%); // => #bf7540
@debug hsla(10, 20%, 30%, 0.3); // => rgba(92, 66, 61, 0.3)
Here are
some spellings of the Colors data type defined in SASS/SCSS. As you can see, we
have some colors in the form of hex code, rgb, rgba, hsl, hsla. All converted
to hex code and rgb. If you can't distinguish the characteristics of the color
codes, you will be confused with unquoted strings. To see the difference
between “quoted strings” and unquoted strings, we will combine Colors with
“quoted strings” to see if the result is what we expected.
// index.scss
$primary: #456;
$secondary: "#eee";
.btn {
background-color: $primary;
color: $secondary;
}
We have an
unquoted string as “$primary” and a “quoted string” as “$secondary”. We put in
values for properties, let's see what happens.
/* index.css */
.btn {
background-color: #456;
color: "#eee";
}
As you can
see, the result we get is unquoted string which will return a string with the
data type of Colors, and "quoted string" returns the result as a
string. And of course, the "background-color" property has a value
and "color" is not. Through the above example, we can confirm that
"quoted strings" combined with Colors will get the result a String.
And we need to distinguish between unquoted strings and Colors based on the
Colors syntax to get the results we want.
Finally, to distinguish between unquoted strings and Colors, we first need to make sure these are not "quoted strings". Next we need to make sure we write the Colors data type correctly. And how to write it has been presented above.
Lists
For
similarities between programming languages, you can look at some other
languages for mapping with Lists in SASS/SCSS. In Java, JavaScript, Python we
have Array data type. Used to hold an array of elements. In Java, array must be
of the same data type or an object. In JavaScript and Python, we can contain
elements with different data types. Similar to above, we have Lists in
SASS/SCSS. So, let's see how Lists in SASS/SCSS similarities and differences
have compared to Array of the above languages.
First, we
have a way to write: to characterize Lists in SASS/SCSS we can surround
elements with "()", "[]" or none. Let's see the example
below:
// index.scss
@debug #333,#444,#555; // => #333, #444, #555
@debug (1, 3, 4, 2); //
=> 1, 3, 4, 2
@debug [9, 8, 7]; //
=> [9, 8, 7]
@debug ([9, 8], 6, 4); // => [9, 8], 6, 4
@debug [(1, 3, 4), 2]; // => [(1, 3, 4), 2]
Besides the
three ways of creating a List in SASS/SCSS. We can also declare the sign
"()" inside "[]" or vice versa, the sign "[]"
inside the sign "()".
One question
that will be raised is whether in a List we can contain many different data
types or not?
// index.scss
@debug #333, null, 98, 'hello SASS', true, false;
// => #333, null, 98, "hello
SASS", true, false
And that
answer is yes. We can completely contain elements of different data types and
in the same Lists in SASS/SCSS. We already know that Lists in SASS/SCSS can
contain elements of different data types. So if we have an initial List, now we
want to add elements to this List, how should we do it?
// index.scss
@debug append([1, 2, 4], 3); // => [1, 2, 4, 3]
We can use
the function “append()”, this is a pre-written function in SASS/SCSS we can use
without @use any additional libraries. Besides, the function will receive the
first argument which is the List to be added elements, and the second argument
is the element to be added.
Access
elements in Lists
Now, let's
learn how to access elements in Lists. We have several ways as follows: First,
we use the function “list.index()”, we need to @use list in SASS to be able to
use it.
// index.scss
@use 'sass:list';
@debug list.index([1, 3, 4], 1); // => 1
@debug list.index([1, 3, 4], 0); // => null
We can get
an element in Lists, and especially you need to note that it is the first
element of a List that is numbered with the ordinal number 1, if you try to get
the first element with the number 0, then the result you get will be null.
Next, we
have @each used to browse elements in a Lists, we were introduced in an article
about @each. Now let's go over how to access @each?
// index.scss
$list: 1, 2, 3, 4;
@each $num in $list {
.btn-#{$num} {
min-width: $num + rem;
}
}
We get the
result will be:
/* index.css */
.btn-1 {
min-width: 1rem;
}
.btn-2 {
min-width: 2rem;
}
.btn-3 {
min-width: 3rem;
}
.btn-4 {
min-width: 4rem;
}
We already
have two ways to access Lists in SASS/SCSS that are using list.index() and
@each.
There is a
note that combines both Lists together and we proceed to access both lists.
// index.scss
$list: [(1, 2, 3)];
@each $num in $list {
@each $n in $num {
.btn-#{$n} {
width: $n + rem;
}
}
}
We have a
nested list, and the way to create a nested list is to combine the
"()" and "[]" signs and to access it we also need to use
nested @each. And we get the result:
/* index.css */
.btn-1 {
width: 1rem;
}
.btn-2 {
width: 2rem;
}
.btn-3 {
width: 3rem;
}
Conclusion
Thus, we
have passed the typical data type for SASS/SCSS which is Colors. And we've come
across the Lists in SASS/SCSS data type. We also learned the features of Lists
in SASS/SCSS.
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