- Course Overview 1:52
- The Project Config File 9:14
- Pixels to Em Function 6:35
- Sass Function Challenge 1 objective
- Colors with Sass Maps 6:35
- Nested Sass Maps 7:20
- Review: Mixins and Functions 5 questions
- Background Image Mixin 7:30
- Pseudo-Element Mixin with @error 5:45
- Sass Directives Challenge 1 objective
Preview
Video Player
00:00
00:00
Colors with Sass Maps
6:35Let's create a Sass map that gives our base colors a theme name. These theme names will come in handy later when we need to create classes for UI elements like buttons, form elements, progress bars, and more.
Sass maps are fairly new to Sass, what
they do is allow us to collect values in
0:00
named groups then we can dynamically
access them from anywhere really.
0:05
So let's create a map that gives our base
colors a theme name.
0:09
So for instance we'll call the fountain
blue color the default theme,
0:14
the emerald color will be for success
messages.
0:19
Sunglo will be for errors and coral and
purple-majesty will be for
0:23
warning and info messages, respectively.
0:28
So, these theme names will come in handy
later when we need to create classes for
0:31
UI elements like buttons, form elements,
progress bars and so forth.
0:36
So, in our config.scss partial we'll
create our
0:41
map right below the color usage variables.
0:45
So, we'll add in new comment for UI
colors.
0:48
And we'll call our map UI colors.
0:53
So let's write dollar sign followed by UI
colors.
0:56
And a set of parenthesis.
1:01
So the way we retrieve values from maps is
with key value pairs.
1:06
We write a key and its associated value.
1:11
So for example let's make the first key
default and the value for
1:14
default will be the fountain blue color
variable followed by a comma.
1:21
And right below default we'll create one
for
1:28
success and we'll make its value the
emerald color variable.
1:30
Then we'll create one for error and we'll
make the value the sun glow variable.
1:37
Another one for warning, and the value
will be the coral color variable,
1:47
and finally we'll create one more key
called info and
1:53
we'll make the value the purple majesty
color variable.
1:57
So what were going to do next,
2:03
is write an each directive to dynamically
generate a class name for each
2:04
key in our map then output, its associated
color value, as a background color.
2:09
So in our utilities.scss partial,
2:15
I'm going to write the each rule first,
then explain what it does.
2:19
So we'll say add each theme, color in UI
colors.
2:24
[NOISE] Go ahead and
2:33
give it some space here.
2:37
[SOUND] So in this rule the theme
2:43
and color variables represent
2:50
the key value pairs we
2:58
created in the UI colors map.
3:03
So here we're saying, for each theme and
3:10
color in the UI colors map create this
class selector for
3:14
each key that dynamically appends the
theme name with this theme variable.
3:19
Then pass it's associated value as the
background color.
3:26
So this will sort of loop through each key
value pair, and
3:30
output a CSS rule for each given theme
name.
3:34
So now we'll go down to the console, and
3:38
we'll write Sass watch scss to CSS.
3:42
So when we bring up our CSS output, in
applications.css.
3:47
You can see how it outputs a CSS rule for
each key value pair in our map.
3:51
So, now anytime, we need to add a new
color class, we can simply add it
3:58
to our Sass map and then it'll output it
with the associated color value.
4:03
Pretty cool.
4:08
So, the each directive and
4:09
rule we just wrote, are doing exactly what
we need them to do.
4:11
But there's still more we can do to make
things more modular and
4:15
what I mean by that is currently the each
directive rule isn't really
4:18
reusable since we are specifically calling
this UI color maps and
4:23
in the rule we're using a particular class
for buttons.
4:28
So let's instead wrap this rule in a mixin
so
4:32
that we're able to include it in different
contexts.
4:37
So we'll create a new mixin called
bgcolors so
4:43
we'll say, mixin bg colors [SOUND] and in
the next sentence,
4:48
we'll pass one argument for the map we
want to reference.
4:55
So, let's call it map and we'll change the
UI colors and map here.
5:01
To that new map variable.
5:07
And in the selector,
5:09
we'll change the button class to a parent
selector that appends the theme name.
5:10
So, I'll just replace button with the and
percent selector.
5:16
And now we're able to include this new
mixin,
5:20
in any rule that needs a theme background
color.
5:23
So we'll go ahead and save this utilities
partial, and we'll bring up the main .scss
5:26
partial, and let's create a new selector
by targeting the button class, and
5:31
inside the rule we can say, include BG
colors, or new mixin.
5:37
And the map we want to pass is the ui
-colors map.
5:46
So as an argument, we'll write ui-colors.
5:49
So now when we save and compile our Sass,
and bring up the CSS output,
5:52
we can see how it outputs the same button
theme rules.
5:58
So the neat thing is that if we wanted to
create themes for progress bars.
6:03
We can simply add that class to our
selector, so we can say Prog Bar.
6:08
Let's also add another class for Tool Tip.
6:14
And now when we save our SASS file and
bring up the output CSS.
6:19
At the bottom of the file, we can see the
classes for the progbars, tooltips and
6:25
buttons all grouped into one rule that
defines the theme background color.
6:30