- [Instructor] Hi, this is Chris Converse
and in this episode,
we'll be looking at using SASS and LESS
to more efficiently apply colors to our CSS properties.
Now we'll start with a project from an earlier episode,
where we created a neon text effect in CSS.
This technique required compounding multiple properties,
meaning we had to repeat some property values
a number of different times.
In this episode,
we'll define those values or colors as variables,
once in a SASS file and another time in a LESS file.
And then, we'll apply those variables
within our CSS properties,
giving us the ability to change the colors
of the effect from one place.
Now if you'd like to follow along,
you can download the exercise files.
However, you will need to be familiar
with CSS Pre-Processing workflow,
which includes using software to convert
or process your files into CSS.
Otherwise, you can simply watch the short tutorial
and decide if this is a workflow
that you'd like to explore later,
by watching a more in-depth course on CSS Pre-Processing.
Now if you download the exercise files,
there's going to be two folders inside of that archive.
There's a Development folder and a Publish folder.
In the Development folder,
there's a less folder and a sass folder
and inside the less folder is a style.less file
and inside the sass folder is a file called style.scss.
For my particular pre-processing software,
I'm using a product called Code Kit
so in my particular files here,
there's a config.codekit3 file.
Your folders will not have these files,
unless of course, you're using Code Kit as well.
Now down in the Publish folder,
there's an Images directory with our city background.
There's an index.html file
and there's a style.css file.
Now the pre-processing software
that you're going to be using,
whether it's LESS or SASS,
is going to compile these source files
into this resulting style.css file.
So to see what we're working with,
let's come in here and open index.html up in the browser.
So this is that previous project we're going
to be working with
and we're going to be setting up the colors
in the neon text effect so that we can change all
of those properties from one spot.
So to begin, let's come back to the exercise files
and let's open up the style.scss file in a text editor.
Now even though this file ends in .scss
and I'm using the SASS CSS version of SASS,
I haven't actually added any SASS code yet.
Now the other thing I want to do
is to open up the resulting style.css file
so we can see the conversion happening in real time.
So to do that in my text editor,
I'm going to come up here and just split the screen.
Then I'll go back to the exercise files
inside the Publish folder,
I'm going to take style.css
and open it in the second window.
So again, on the left hand side here, is the SASS file.
On the right hand side, is the result
of processing that SASS file into CSS.
So we're not going to touch this right hand side here,
but my pre-processing software will make the updates
that we can see over here.
So on the left hand side, let's scroll down.
Let's find this neon text.
This is where we have all of those compounded rules
and repeating the same color values.
So let's come up here, above neon
and let's define a SASS variable.
SASS variables start with a dollar sign
and we'll name this color_1,
then a colon, then a space.
The syntax looks very much like CSS
and then the values going to be the white color.
So put a pound sign, three F's,
then a semicolon.
So now that we've defined a variable of color one,
let's come in here and copy that.
Let's come down into the CSS
and let's replace the pound sign and three F's
with that color variable.
So now with the first one in place,
let's come down here and replace the second one.
Paste that in place and now at this point,
I'm going to come in here and hit command S to save.
In the upper right hand corner,
you'll see a notification.
My particular software is telling me
that it has compiled this SCSS file into CSS
and if I come over here into this style.css file,
I can see that the color is still being injected here.
So I can see the pound sign and three F's here
and the pound sign and three F's here.
So there is no change in the resulting style.css file,
however, we did get to just define the color one
in our CSS file.
So now let's come in here and duplicate that variable.
Let's name the second one color two
and I'll come down here and I'll copy the color.
This is that bright pink color.
Now let's come in here and copy the color to name
and then let's come down here
and replace each instance of that hashtag
for that color pink with the color two variable.
Once that's in place, all the command has to save.
Again, my software will tell me that it's made the change
and we can see the change from the right hand side.
And just like before,
the style.css file will be that same,
however, in the original file,
we only had to specific the color once
and we used four different instances.
So at this point, we'll go back to the browser.
Let's come up and hit reload.
The design should look exactly the same
and so now that we have variables in for our colors,
let's go back to our SASS file
and let's come in here and make a color change.
So for color two, let's replace that pink color
with a green color.
So after the pound sign, let's put two zeroes for red,
let's put ff for green and ba for blue.
Save,
again, notice that the style sheet's updated.
If we come over here now,
look at the bottom of this CSS file,
we can now see that that color has been applied
four times in this particular CSS rule
and then if we go back to the browser,
come up and hit reload.
We'll see the neon text effect is now showing in green,
instead of pink.
And so now that our variables are working in the SASS file,
let's make the same changes in our LESS file.
So let's come in here and select both color variables
in the neon rule.
Let's copy that to the clipboard,
let's go back to our exercise files.
Let's grab the style.less file,
let's open that in our text editor.
Let's scroll down to the bottom,
let's come in here and select the neon rule.
Let's delete that,
we'll hit a few returns
and then we'll paste in our SASS code.
And the only syntax difference between LESS and SASS
in this example is the variables are defined
with an at symbol instead of a dollar sign.
So let's come in here to color one,
let's replace the dollar sign with an at symbol.
Let's come in to color two, do the same thing
and then down here where we use the colors,
we're going to replace all of these dollar signs
with an at symbol.
And then before we hit save and compile this,
let's come up here and change the color
from green to blue.
So type zero, zero for red,
b4 for green and two F's for blue.
I'll hit save and our resulting CSS file,
we'll now see we have four instances
of that new blue color, showing up in the neon class.
Then we'll go back to the browser,
hit reload and we'll see our neon text now showing in blue
and this time it was our LESS file
that modified this CSS instead of the SASS file.
So now we have a much more efficient workflow
for generating reusable values in CSS.
Now we'll be covering more tips with pre-processors
throughout this series,
but if you'd like to learn more about SASS and LESS
and the software you'll need to take advantage
of this workflow,
I'd recommend that you take Joe Marini's course
entitled CSS with LESS and SASS
and so with that, I'll conclude this episode
and as always, thanks for watching.