- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.690 --> 00:00:01.990
In this section of the course,
2
00:00:01.990 --> 00:00:04.750
we are gonna start implementing styles
3
00:00:04.750 --> 00:00:06.380
into our application.
4
00:00:06.380 --> 00:00:10.410
Now, from now on, when we're working on our styles,
5
00:00:10.410 --> 00:00:12.360
I'm gonna be working with the layout
6
00:00:12.360 --> 00:00:15.230
where I have the code taking up the full screen,
7
00:00:15.230 --> 00:00:18.430
and then I'm gonna switch to Google Chrome
8
00:00:18.430 --> 00:00:23.010
and have that as the full screen when we're wanting to see
9
00:00:23.010 --> 00:00:24.740
how the styles are looking.
10
00:00:24.740 --> 00:00:29.740
In this guide, we are going to implement our own style guide
11
00:00:30.530 --> 00:00:32.170
from a color perspective.
12
00:00:32.170 --> 00:00:37.100
So we are going to dive into SAS variables.
13
00:00:37.100 --> 00:00:39.770
So let's see how those work here.
14
00:00:39.770 --> 00:00:41.870
I'm gonna switch to visual studio code,
15
00:00:41.870 --> 00:00:46.100
and let's open up our main style file.
16
00:00:46.100 --> 00:00:49.480
So this can be located in the SRC directory,
17
00:00:49.480 --> 00:00:52.450
in the style directory, and then in main.
18
00:00:52.450 --> 00:00:54.520
Right now we only have one file.
19
00:00:54.520 --> 00:00:59.520
So let's open up the side panel and let's add another one.
20
00:00:59.540 --> 00:01:01.490
Inside of the common directory,
21
00:01:01.490 --> 00:01:03.980
I'm gonna create a new file here
22
00:01:03.980 --> 00:01:08.163
and I'm gonna call it colors.scss.
23
00:01:09.360 --> 00:01:11.340
So this is going to be a SAS file,
24
00:01:11.340 --> 00:01:13.210
and what we can do here,
25
00:01:13.210 --> 00:01:16.730
if you're still a little rusty on how SAS works,
26
00:01:16.730 --> 00:01:20.080
we are gonna be able to establish variables here.
27
00:01:20.080 --> 00:01:24.400
Very similar to how we work with variables in JavaScript.
28
00:01:24.400 --> 00:01:27.610
And these are gonna hold different values
29
00:01:27.610 --> 00:01:30.300
that our style sheets are gonna be able to pull from.
30
00:01:30.300 --> 00:01:32.530
So let's do one sample one,
31
00:01:32.530 --> 00:01:36.090
and then I'm just gonna copy over all of the rest of them,
32
00:01:36.090 --> 00:01:37.930
so you don't have to watch me type out
33
00:01:37.930 --> 00:01:39.690
a bunch of hexadecimal codes.
34
00:01:39.690 --> 00:01:44.160
So the syntax for this is gonna be a dollar sign
35
00:01:44.160 --> 00:01:46.640
and then whatever the name of the variable is.
36
00:01:46.640 --> 00:01:51.220
So I'm gonna say primary and then a colon
37
00:01:51.220 --> 00:01:54.280
followed by whatever the value is.
38
00:01:54.280 --> 00:01:59.070
So in this case, let's say that our primary variable
39
00:01:59.070 --> 00:02:00.947
is gonna be called 26bfd4.
40
00:02:05.590 --> 00:02:10.350
So that is giving us this kind of teal type background.
41
00:02:10.350 --> 00:02:13.530
And so I'm gonna hit save, and let's test this out.
42
00:02:13.530 --> 00:02:16.920
I'm gonna first import these set of colors.
43
00:02:16.920 --> 00:02:21.383
So I'll say import./common/colors.
44
00:02:22.640 --> 00:02:27.150
And it's very important that I call this at the very top.
45
00:02:27.150 --> 00:02:30.350
So I'm importing my variables at the very top,
46
00:02:30.350 --> 00:02:35.350
because remember how CSS, and really SAS and any of these
47
00:02:35.740 --> 00:02:40.210
style type languages work, is they are cascading.
48
00:02:40.210 --> 00:02:43.200
That's what it stands for, cascading style sheets.
49
00:02:43.200 --> 00:02:45.580
So that when we say cascading,
50
00:02:45.580 --> 00:02:48.550
it means that the values at the top
51
00:02:48.550 --> 00:02:50.400
are gonna be called first,
52
00:02:50.400 --> 00:02:53.010
followed by all of these other imports.
53
00:02:53.010 --> 00:02:56.310
So when I import colors first,
54
00:02:56.310 --> 00:02:59.530
what that's gonna do is it means all of the files
55
00:02:59.530 --> 00:03:02.560
we're gonna create for style sheets from here on out,
56
00:03:02.560 --> 00:03:06.200
are all gonna be able to have access to these values.
57
00:03:06.200 --> 00:03:08.670
And we can test this out right here.
58
00:03:08.670 --> 00:03:12.470
If I open up this base file, these base set of styles,
59
00:03:12.470 --> 00:03:16.300
up until now we just had this hard coded red color here.
60
00:03:16.300 --> 00:03:18.180
What I can do is get rid of that.
61
00:03:18.180 --> 00:03:23.000
And just to test it out, I can say $primary.
62
00:03:23.000 --> 00:03:26.740
So this is the exact name of the variable that we have
63
00:03:26.740 --> 00:03:30.660
inside of our colors file, and hit save.
64
00:03:30.660 --> 00:03:33.751
So now, if I switch back to the browser,
65
00:03:33.751 --> 00:03:37.630
now you can see that it has that correct color.
66
00:03:37.630 --> 00:03:40.990
So we are now pulling from our variables
67
00:03:40.990 --> 00:03:45.610
instead of simply having to hard code those values in.
68
00:03:45.610 --> 00:03:48.570
Now, let's talk about why this is important.
69
00:03:48.570 --> 00:03:50.710
Because this is a very important concept,
70
00:03:50.710 --> 00:03:54.300
not just with building styles, but really in,
71
00:03:54.300 --> 00:03:55.820
the kind of the methodology
72
00:03:55.820 --> 00:03:58.440
and how you build all of your applications.
73
00:03:58.440 --> 00:04:02.530
By using these color variables, what we're able to do,
74
00:04:02.530 --> 00:04:06.390
is we're able to standardize the color style sheet
75
00:04:06.390 --> 00:04:08.470
for our entire application.
76
00:04:08.470 --> 00:04:11.530
So instead of having all of these style sheets,
77
00:04:11.530 --> 00:04:13.420
where you might have an application
78
00:04:13.420 --> 00:04:15.620
that has hundreds of style sheets,
79
00:04:15.620 --> 00:04:18.668
if you wanted to use a certain set of colors,
80
00:04:18.668 --> 00:04:22.080
then you'd have to hard code those values in
81
00:04:22.080 --> 00:04:25.360
every time that you wanted to change a color
82
00:04:25.360 --> 00:04:27.050
or anything like that.
83
00:04:27.050 --> 00:04:29.620
Now, say that you build out an application
84
00:04:29.620 --> 00:04:31.300
and I've, personally I've had this happen.
85
00:04:31.300 --> 00:04:34.270
I built out an application and there were a set
86
00:04:34.270 --> 00:04:38.480
of primary colors that the client wanted to use.
87
00:04:38.480 --> 00:04:41.360
But later on, they wanted to change that color.
88
00:04:41.360 --> 00:04:42.650
And maybe it was just slightly.
89
00:04:42.650 --> 00:04:46.580
Maybe it was just one little change in the hexadecimal code.
90
00:04:46.580 --> 00:04:49.870
I would have to go through the entire application
91
00:04:49.870 --> 00:04:53.177
and find every spot where I called that color,
92
00:04:53.177 --> 00:04:55.520
and then I'd have to go and change that.
93
00:04:55.520 --> 00:04:58.540
And that's really not a fun way to live your life
94
00:04:58.540 --> 00:05:00.030
or to build applications.
95
00:05:00.030 --> 00:05:03.240
So what we're able to do here with these variables,
96
00:05:03.240 --> 00:05:07.760
is we can simply set this color value one time
97
00:05:07.760 --> 00:05:09.820
and then call that value.
98
00:05:09.820 --> 00:05:12.830
And then later on, say that you are building this out
99
00:05:12.830 --> 00:05:14.397
for a client and the client says,
100
00:05:14.397 --> 00:05:15.230
"You know what?
101
00:05:15.230 --> 00:05:18.507
"This is close, but we actually want it to be d5."
102
00:05:19.550 --> 00:05:22.010
Then we don't have to go and change this color
103
00:05:22.010 --> 00:05:23.410
in a thousand places.
104
00:05:23.410 --> 00:05:27.660
We simply have to make the change one time in this variable,
105
00:05:27.660 --> 00:05:29.440
and it gets populated
106
00:05:29.440 --> 00:05:31.150
throughout the rest of the application.
107
00:05:31.150 --> 00:05:32.240
So that's really helpful,
108
00:05:32.240 --> 00:05:33.668
especially as you start building out
109
00:05:33.668 --> 00:05:36.000
bigger software systems.
110
00:05:36.000 --> 00:05:38.270
So I'm gonna go over and I'm gonna copy
111
00:05:38.270 --> 00:05:40.850
the rest of the colors that we want
112
00:05:40.850 --> 00:05:41.940
and paste them in here.
113
00:05:41.940 --> 00:05:43.530
And you can get these in the show notes.
114
00:05:43.530 --> 00:05:46.760
So you can simply copy and paste each one of these values.
115
00:05:46.760 --> 00:05:48.730
These are what we're gonna be building
116
00:05:48.730 --> 00:05:50.840
the set of styles with.
117
00:05:50.840 --> 00:05:52.560
So I'm gonna hit save here.
118
00:05:52.560 --> 00:05:55.230
So now our application has full access
119
00:05:55.230 --> 00:05:57.390
to each one of these variables.
120
00:05:57.390 --> 00:06:01.520
And in the base, I'm going to get rid of everything
121
00:06:01.520 --> 00:06:02.630
inside of apps.
122
00:06:02.630 --> 00:06:05.810
I'm simply gonna leave this as a set
123
00:06:05.810 --> 00:06:07.430
of empty curly brackets.
124
00:06:07.430 --> 00:06:11.530
We may or may not add some kind of base styles
125
00:06:11.530 --> 00:06:13.790
to this app class, but for right now,
126
00:06:13.790 --> 00:06:15.270
we're not going to worry about it.
127
00:06:15.270 --> 00:06:17.200
So I'm gonna get rid of that,
128
00:06:17.200 --> 00:06:19.830
and everything now should be working.
129
00:06:19.830 --> 00:06:22.300
If I switch back to Google Chrome,
130
00:06:22.300 --> 00:06:24.360
you can see the color is gone.
131
00:06:24.360 --> 00:06:27.800
We have no errors, everything here is working.
132
00:06:27.800 --> 00:06:30.890
So in this guide, we walked through how we were able
133
00:06:30.890 --> 00:06:33.710
to create SAS variables,
134
00:06:33.710 --> 00:06:38.710
why it's important to use variables and to build our code
135
00:06:39.430 --> 00:06:42.180
in a way that we can reuse components
136
00:06:42.180 --> 00:06:44.230
and make changes easily,
137
00:06:44.230 --> 00:06:46.680
that populate throughout the entire application.
138
00:06:46.680 --> 00:06:50.390
And we also set up our base set of styles.
139
00:06:50.390 --> 00:06:52.580
In the next guide we are gonna start
140
00:06:52.580 --> 00:06:57.380
by building out the styles that start to build this grid
141
00:06:57.380 --> 00:06:58.553
on the home page.