1
00:00:00,960 --> 00:00:05,610
Now, in order to understand variables, I want to give you a few examples, and for this, we are going

2
00:00:05,610 --> 00:00:08,820
to open up our previous project, the mobile first project that we did.

3
00:00:09,480 --> 00:00:13,650
And the first of all, I would like to make a copy of the access.

4
00:00:13,790 --> 00:00:22,070
I just created a copy called Hostile Variables That Siestas and also replace it here, variables, style

5
00:00:22,080 --> 00:00:22,580
variables.

6
00:00:22,600 --> 00:00:23,650
You can call whatever you want.

7
00:00:24,390 --> 00:00:29,490
OK, so basically this is the same file, but within here, we're going to create a few variables.

8
00:00:29,850 --> 00:00:32,340
Now this is a cascading style sheets.

9
00:00:32,340 --> 00:00:37,560
So this means anything that is needed down here must be defined up here.

10
00:00:37,860 --> 00:00:39,750
I would suggest defining the variables.

11
00:00:40,710 --> 00:00:45,060
Well, I don't completely at the top or write up or general reset.

12
00:00:46,170 --> 00:00:52,890
I would just create them here, but so we said that babies are defined by hyphen and then give it a

13
00:00:52,890 --> 00:00:58,740
name as a prime color and also a value of red.

14
00:00:59,310 --> 00:01:02,610
Now, if I close this up, well, this isn't valid.

15
00:01:02,610 --> 00:01:12,570
Access variables are defined in the root and what the root is actually open up MDMA if you never use

16
00:01:12,740 --> 00:01:13,020
them.

17
00:01:13,020 --> 00:01:14,460
But of course, you have.

18
00:01:15,060 --> 00:01:22,460
And this is an extremely useful site which will attract the developer was the Mozilla Developer Network.

19
00:01:22,860 --> 00:01:27,380
You should go in here in route and then you will see the explanation.

20
00:01:27,390 --> 00:01:34,140
So the Rouzier says pseudo class matches the root element of a tree representing the document in e-mail,

21
00:01:34,440 --> 00:01:40,360
The Root represents the e-mail text which the e-mail element, uh, element.

22
00:01:40,470 --> 00:01:44,670
And it is identical to the selected element selector element.

23
00:01:45,560 --> 00:01:51,500
So The Selecter e-mail is something that is specifically is higher, so it says that it has the highest

24
00:01:51,500 --> 00:01:52,190
specifically.

25
00:01:53,320 --> 00:01:57,600
And as you can see here, you can just type in route and within the route, you can type in if you want.

26
00:01:58,210 --> 00:02:01,140
And also down here, we have a few examples available.

27
00:02:01,180 --> 00:02:05,920
Now we're going to target the route and so route.

28
00:02:09,950 --> 00:02:16,400
And within here, we can now define our variables, I usually like to also give them a specific comment

29
00:02:16,790 --> 00:02:18,010
which variables are what?

30
00:02:18,020 --> 00:02:21,020
So I'm going to start with I say

31
00:02:23,720 --> 00:02:24,620
main colors

32
00:02:28,250 --> 00:02:31,490
and particular start with the primary color and the secondary colors.

33
00:02:31,490 --> 00:02:33,260
So the type in primary color.

34
00:02:40,300 --> 00:02:43,960
And let's give this a white color, actually.

35
00:02:45,480 --> 00:02:51,780
So with the hexadecimal now you can type in here named colors like white hexadecimal in our Gibby's

36
00:02:51,780 --> 00:02:57,150
and or Jebus and every color, anything that is a very valid Corsetti could type in here.

37
00:02:58,010 --> 00:03:01,620
OK, and let's also create a secondary color,

38
00:03:07,470 --> 00:03:10,020
and this will be hash free, free, free.

39
00:03:10,920 --> 00:03:13,050
OK, so we've got to color setup.

40
00:03:14,100 --> 00:03:16,500
So let's see, where do we have this?

41
00:03:16,530 --> 00:03:18,380
Let me open up our website also.

42
00:03:19,290 --> 00:03:26,970
Where do we have a white colour and this colour, like we could do something like this loop and search

43
00:03:26,970 --> 00:03:35,280
the hash hash FMF and let's see where we have them in our variable.

44
00:03:35,290 --> 00:03:42,240
So let's first of all deselect uh initial stylesheet clicking on the X and we have it in the primary

45
00:03:42,240 --> 00:03:44,550
color shall make this just a bit larger.

46
00:03:47,170 --> 00:03:53,170
OK, so we don't win this one, don't win this one to be modified, deselect this and we have them here

47
00:03:53,170 --> 00:03:53,860
four times.

48
00:03:54,070 --> 00:03:56,920
So where are they also going to pop up?

49
00:03:56,920 --> 00:04:01,510
So they have them here in our button and anchored an icon tag.

50
00:04:01,900 --> 00:04:04,180
So let's see what happens if I.

51
00:04:06,000 --> 00:04:10,410
Replace this with the Bible now in order to use a variable.

52
00:04:10,440 --> 00:04:16,740
We said we need to declare the bar and then within parentheses we're going to use a variable of primary

53
00:04:17,160 --> 00:04:19,320
color, OK?

54
00:04:19,770 --> 00:04:22,600
And hate it still remains the same.

55
00:04:23,280 --> 00:04:27,450
Now, if I were change now my variable color to, let's say, my primary color.

56
00:04:28,520 --> 00:04:38,330
Let's say I'm going to use now a let's say red color, the same named red colors, red, and hey, there

57
00:04:38,330 --> 00:04:38,620
we go.

58
00:04:39,020 --> 00:04:44,360
So you could always say how useful variables are because if I just defined this.

59
00:04:45,760 --> 00:04:52,990
Only by defining this and it has repetitions with through our code, it would spare us a lot of time.

60
00:04:53,860 --> 00:04:57,970
Now, let me turn this back to a hash of F f.

61
00:04:59,990 --> 00:05:05,780
And I'm going to replace it here with typing in primary color,

62
00:05:09,950 --> 00:05:18,230
and as soon as I hit actually click on replace all yes, replace all everywhere where we had our Weitzel

63
00:05:18,230 --> 00:05:19,760
is such a bethwaite.

64
00:05:20,820 --> 00:05:28,680
Our hash of F it was it was replaced with primary color and did the same thing for her free WiFi, so

65
00:05:28,680 --> 00:05:30,090
that darker color.

66
00:05:30,810 --> 00:05:34,330
So we said that the secondary color would be the star color.

67
00:05:35,010 --> 00:05:37,440
So let's go and search for a few of them.

68
00:05:38,600 --> 00:05:43,130
Let's go to to to try this one to replace this one with VAR.

69
00:05:45,130 --> 00:05:48,850
And primary color, the second car, sorry about that.

70
00:05:50,970 --> 00:05:52,410
So the button stays the same.

71
00:05:52,620 --> 00:05:55,530
OK, so we just replace our back on the second deck.

72
00:05:56,190 --> 00:06:02,010
Now let's do this for each hash free, free, free that we have in our code.

73
00:06:02,020 --> 00:06:03,690
So let's search for free, free, free.

74
00:06:05,670 --> 00:06:09,180
OK, I'm going to deselect or initial success.

75
00:06:10,080 --> 00:06:19,530
And our our our our our variable, so we have it all around here, so let's replace it with secondary

76
00:06:19,530 --> 00:06:19,860
color.

77
00:06:23,960 --> 00:06:26,280
I actually also need to type in the VA.

78
00:06:26,470 --> 00:06:30,450
OK, so let's just go back let's go back to FFE.

79
00:06:30,810 --> 00:06:32,640
So right here with this.

80
00:06:32,640 --> 00:06:34,830
Select this one and.

81
00:06:35,920 --> 00:06:38,870
Also, this one pretty aifs, OK?

82
00:06:38,890 --> 00:06:45,120
It does not belong to see it, so let me just hit a few controls, these changes on back to FMF

83
00:06:47,680 --> 00:06:48,820
and let's try this again.

84
00:06:48,830 --> 00:06:51,760
So FFE search for them.

85
00:06:52,090 --> 00:06:52,870
Not here.

86
00:06:54,850 --> 00:06:57,880
We're going to deselect this and we need to use your VAR.

87
00:07:04,400 --> 00:07:10,850
OK, I can't click replace, and there we go now it's replaced all over the place, so we have it here,

88
00:07:10,860 --> 00:07:14,290
primary color and also here and here.

89
00:07:15,080 --> 00:07:17,480
Now it's also replace our secondary colors.

90
00:07:18,110 --> 00:07:19,040
So let's select this.

91
00:07:19,040 --> 00:07:19,850
Free, free, free

92
00:07:23,660 --> 00:07:25,040
to select stylesheet.

93
00:07:26,380 --> 00:07:31,000
And to select the variable, now, we only have this color selected right here.

94
00:07:31,330 --> 00:07:32,440
So let's replace them.

95
00:07:33,440 --> 00:07:34,310
With VAR.

96
00:07:35,490 --> 00:07:39,930
Going to go back and now if I go up here and change it, let's say, to red.

97
00:07:43,000 --> 00:07:47,060
It's safe or oh, and I had that black color.

98
00:07:47,560 --> 00:07:49,000
Now I have the red color.

99
00:07:50,150 --> 00:07:56,420
I cannot let me show you something else that's changed black to black.

100
00:07:59,320 --> 00:08:06,970
If I would go down here where we have all read and let's say I'm going to use here a bar, so this would

101
00:08:06,970 --> 00:08:14,170
be this title right here, and let's say this title should have a variable of title color.

102
00:08:18,660 --> 00:08:24,570
No, it just turned black because this was the initial color of the title and we also didn't define

103
00:08:24,570 --> 00:08:32,760
this favorite color anywhere, but I could type in here now red and see what happens if I hit save our

104
00:08:32,760 --> 00:08:33,900
color terms right now.

105
00:08:34,050 --> 00:08:36,640
There's something called a custom property fall backwards.

106
00:08:36,710 --> 00:08:44,460
So this variable will fall back on this value right here so we can declare variables and then give them

107
00:08:44,460 --> 00:08:44,940
values.

108
00:08:46,050 --> 00:08:50,340
Now, another thing that we can do with variables, we don't just need to use colors.

109
00:08:50,880 --> 00:08:54,000
We can also use them for smaller.

110
00:08:55,530 --> 00:09:02,340
For franchises or farm families or, for example, animation, SP's or transition speed, now I'm going

111
00:09:02,340 --> 00:09:08,610
to go through our code and simplify it a bit, actually make it or actually make it just a bit more

112
00:09:08,640 --> 00:09:09,240
variable.

113
00:09:10,840 --> 00:09:13,360
So let's see, we have, for example.

114
00:09:15,170 --> 00:09:20,690
A font size and step in here, another comment on font sizes.

115
00:09:26,340 --> 00:09:34,080
And this through here, a font s m so small, font size, I say this would be one point to remove.

116
00:09:36,450 --> 00:09:38,840
Then let's create a font and

117
00:09:42,160 --> 00:09:43,590
I'm going to give this to RIM.

118
00:09:45,990 --> 00:09:51,420
And that's on a font excel large font size.

119
00:09:52,900 --> 00:09:55,390
I'm going to give this a two point atrip.

120
00:10:01,030 --> 00:10:02,740
OK, now let's go from code.

121
00:10:04,250 --> 00:10:09,240
Let's say, for example, TA do we have our H2?

122
00:10:10,520 --> 00:10:11,930
We can replace this with the.

123
00:10:14,380 --> 00:10:15,100
Excel.

124
00:10:16,660 --> 00:10:19,460
So instead of this, I'm going to type in here.

125
00:10:20,110 --> 00:10:25,090
You could also, if you have emittance thought you just happen, happened and will show you all of the

126
00:10:25,540 --> 00:10:26,980
variables that you have.

127
00:10:28,110 --> 00:10:35,310
Or you could just type in font and it will show you all the font variables, let's use Excel, it's

128
00:10:35,310 --> 00:10:36,840
automatically placed in a variable.

129
00:10:38,900 --> 00:10:43,680
So let's make this just a bit larger north right here.

130
00:10:43,700 --> 00:10:49,970
We could use we have a bottom, for example, the eye contact, we could use the s.m.

131
00:10:54,370 --> 00:11:02,680
Font and SNL, you can see it actually remains the same, and if I was searching for another one to

132
00:11:02,700 --> 00:11:06,070
see, but we have another font size right here.

133
00:11:06,070 --> 00:11:14,590
So this could be a and the font and the and you could also be an M.D..

134
00:11:19,230 --> 00:11:23,600
OK, as I said, we could also use them for speed.

135
00:11:24,490 --> 00:11:29,850
So let's go to we do have we have these two animations right here.

136
00:11:29,890 --> 00:11:33,790
So our image animates in and also our text animation.

137
00:11:34,270 --> 00:11:37,320
And it could do something like take what you have on it.

138
00:11:37,570 --> 00:11:40,120
Each one is their head of text.

139
00:11:40,120 --> 00:11:42,610
And this has a animation of two seconds.

140
00:11:43,170 --> 00:11:46,960
Let's go up here in our route again and then step in here.

141
00:11:46,960 --> 00:11:47,650
Animations.

142
00:12:00,340 --> 00:12:03,160
OK, let's call this animation speed,

143
00:12:08,800 --> 00:12:11,110
so we said we had two seconds, let's close this up.

144
00:12:11,650 --> 00:12:23,140
And if we go down in our head a text and replace this with animation speed hit, enter and see.

145
00:12:23,140 --> 00:12:24,430
We have the same speed.

146
00:12:25,030 --> 00:12:29,500
Now let's go to our image and get selected.

147
00:12:35,610 --> 00:12:41,470
He was up here, if there's an image also, let's replace this with animation speed.

148
00:12:46,000 --> 00:12:52,360
Now, the cool thing about this is if we now change its policy, five seconds it saved.

149
00:12:53,990 --> 00:13:00,680
It applies to both of them, but just one variable, we can spare a lot of coal, for example, if the

150
00:13:00,680 --> 00:13:07,880
client comes and says, hey, this is just a bit too quick for me or Pittas to too slow for me to say,

151
00:13:07,880 --> 00:13:09,350
OK, let's just change this to two.

152
00:13:09,710 --> 00:13:10,520
How is it now?

153
00:13:11,310 --> 00:13:11,960
Is it better?

154
00:13:13,190 --> 00:13:15,200
Yeah, it's still a bit too quick.

155
00:13:15,230 --> 00:13:16,910
Well let's change it to free then.

156
00:13:18,470 --> 00:13:20,500
It's safe and there we go.

157
00:13:20,740 --> 00:13:25,430
Now imagine if you have this in like ten lines of code.

158
00:13:25,820 --> 00:13:28,660
You also need to and it needs to be the same.

159
00:13:29,180 --> 00:13:31,310
And there is where a variable comes into play.

160
00:13:33,100 --> 00:13:39,510
They also do this for the transition, so we have down here transitions, let's say we create up here

161
00:13:39,550 --> 00:13:40,930
variable of transition.

162
00:13:49,530 --> 00:13:52,700
And it was, I believe, point four seconds.

163
00:13:56,090 --> 00:13:57,580
And we are missing an arm.

164
00:14:00,190 --> 00:14:05,900
Okay, so if we go down here and just replace this tool, it's like going to select one command and

165
00:14:05,900 --> 00:14:08,510
type in transition speed.

166
00:14:09,860 --> 00:14:11,780
And let's go down to our contacts now.

167
00:14:14,300 --> 00:14:15,590
So if I go over my.

168
00:14:17,350 --> 00:14:19,990
Actually, to be in the desktop format.

169
00:14:21,180 --> 00:14:22,470
McKidd, there's a transition.

170
00:14:24,600 --> 00:14:33,940
Now, if I would change the speed now to policy one second again, clients wish the clients, which

171
00:14:33,940 --> 00:14:37,960
is wishes that there should be no whistleblower.

172
00:14:38,930 --> 00:14:39,880
Then hey, there we go.

173
00:14:41,140 --> 00:14:48,580
They could also spare you a huge amount of time if you take this colors and create for yourself a template

174
00:14:48,580 --> 00:14:55,060
with, let's say, the colors, social media colors.

175
00:14:58,180 --> 00:15:04,750
So every time you're going to reuse or create a specific or create some kind of icons and you need to

176
00:15:04,990 --> 00:15:09,130
the Facebook color, the incident color and so forth and so on, I would suggest to do something like

177
00:15:09,130 --> 00:15:09,450
this.

178
00:15:09,640 --> 00:15:11,470
So this one is with color.

179
00:15:14,040 --> 00:15:21,810
Actually going to copy them on let's get a copy of them down here and just going to start replacing

180
00:15:21,810 --> 00:15:21,970
them.

181
00:15:21,990 --> 00:15:26,550
So you need to have a hyphen to let this.

182
00:15:26,550 --> 00:15:28,310
And also they did this.

183
00:15:28,560 --> 00:15:31,830
There's one variable you need to have a hyphen.

184
00:15:33,600 --> 00:15:38,010
I want to let you and hope so.

185
00:15:40,970 --> 00:15:42,140
And also, did you.

186
00:15:46,910 --> 00:15:53,600
Then a Twitter variable and delete you and you and the YouTube variable.

187
00:16:11,170 --> 00:16:12,950
And that it you OK?

188
00:16:13,000 --> 00:16:21,160
So if we have this, I'm going to cut them now and go up in my root and paste them in underneath our

189
00:16:21,160 --> 00:16:27,610
social media collars and down here, I'm just going to use our social media callosal for the Facebook

190
00:16:27,970 --> 00:16:28,290
color.

191
00:16:28,300 --> 00:16:29,470
We're going to use Facebook.

192
00:16:34,040 --> 00:16:35,270
Then Instagram.

193
00:16:43,440 --> 00:16:48,030
Twitter, and we have the last one, YouTube.

194
00:16:56,700 --> 00:16:57,190
There you go.

195
00:16:57,630 --> 00:17:00,260
So let's have a. check them out if this will work.

196
00:17:04,870 --> 00:17:06,580
For you, much to.

197
00:17:14,410 --> 00:17:17,910
The truth is, working with a Facebook, what had just happened?

198
00:17:19,470 --> 00:17:21,780
OK, we have Facebook, you.

199
00:17:25,340 --> 00:17:25,970
There we go.

200
00:17:28,980 --> 00:17:36,180
Yep, so I was just creating calls for the social media icons that use, for example, rules for Snapchat

201
00:17:36,180 --> 00:17:42,990
or Tic-Tac or whatever you knew, you know, that there's a hash color and you still you are going to

202
00:17:42,990 --> 00:17:44,150
use it more often.

203
00:17:44,160 --> 00:17:47,820
I would suggest creating these variables and also creating just this template.

204
00:17:48,570 --> 00:17:54,630
He just created this template and will also have a project coming up where we are going to use a lot

205
00:17:54,630 --> 00:17:55,080
of this.

206
00:17:56,820 --> 00:17:59,220
So I believe that's everything I wanted to show you.

207
00:17:59,250 --> 00:18:04,100
Oh, yeah, one less thing, we could also create this go up here.

208
00:18:05,880 --> 00:18:11,520
And this is just very quick, I just wanted to show you that you could also have shadows of the colors,

209
00:18:11,520 --> 00:18:13,950
let that be a shadow,

210
00:18:19,290 --> 00:18:23,010
and it's creating a shadow very well to say that you will be taxed shadow.

211
00:18:26,550 --> 00:18:35,610
So that we had that we had this one exactly to do, had the texture, so exactly this one and then I'll

212
00:18:35,610 --> 00:18:36,210
copy.

213
00:18:37,490 --> 00:18:38,510
Paste up here.

214
00:18:42,290 --> 00:18:46,990
Close it up and every now go close this one up, they'll need you.

215
00:18:47,780 --> 00:18:54,650
If I would now go back to our shadow where I had a I would just need to type in now the shadow.

216
00:18:59,760 --> 00:19:00,510
And there we go.

217
00:19:00,840 --> 00:19:03,090
You could also change a color, for example, say.

218
00:19:04,170 --> 00:19:08,520
And the changing of the color to all the opacity has changed to eight.

219
00:19:12,520 --> 00:19:16,210
Or we could also change the color for red.

220
00:19:17,480 --> 00:19:19,790
We have no nice red color is awful.

221
00:19:20,210 --> 00:19:22,220
OK, so that's basically it for the very best.

222
00:19:22,220 --> 00:19:26,270
Let's create a project and I think you're going to understand it much better than so soon.

223
00:19:26,270 --> 00:19:27,350
The next one by.