- [Instructor] Hi, this is Chris Converse
and in this episode, we'll be taking a look
at adjusting colors
in CSS using both SASS and LESS.
Now when designing your project,
you probably have some colors
you want to use to defined either in a creative brief
or in a style or branding guide.
Using SASS or LESS will allow you to define a color,
then adjust that color's properties
with built in color functions.
This will give you a quick and consistent
way to define colors
and generate new colors, based on the rules of your project.
So if you'd like to follow along with me,
download the exercise files and let's take a look
at what's included.
Now in the exercise files, there's a SASS file
which is .scss which is written in the SASS css syntax
and the LESS file.
Each of these files is set to compile
into the style.css file.
And since I'm using code kit
to compile my SASS and LESS files,
I also have a code kit file here
which is not included in your files.
And typically, you would only either work in SASS
or LESS but for this particular tutorial,
I'm going to be covering both.
So to begin, let's start by opening the Index.html file
in the Text Editor.
Now once you have the html file open, you'll see here
in the head area, I have a link to the final compiled
CSS file which is called style.css.
Inside the body area, we have a header and a main element.
Inside of the main, we have an article and then a side.
And then outside of the main element, I have a few divs
just to create some color bars.
Just so we have a few extra elements
to apply some color adjustments to.
And if you'd like to preview this file,
you can open index.html in a browser
to see the layout.
Inside of the browser, everything here that's showing up
in blue is being controlled by a color variable
that we have setup in both LESS and SASS.
And we're going to be starting with our SASS file.
So to begin making our adjustments,
let's go back to the exercise files
and let's find style.scss and let's open that in our
Text Editor.
Now inside of here at the top
you can see we have a color variable.
We covered color variables in SASS and LESS
in an earlier episode and we're setting this color variable
equal to this blue color here.
And then if I scroll through the document,
you'll see we're using this in a number of different places.
We're using it as the background of the main body element
in addition to a pattern which are the dots down here,
we're using it as the background of the H1 tag
and again if I scroll through here,
you'll see this being used in a number of different places.
So the first thing we're going to do is
come up to the top and what I want to do
is I want to set the background color
which is defined here in the body selector
to be a little bit darker than the main color.
So here, the background color behind the dots,
is the same as the color behind each one
and everywhere else that this particular variable's
being used.
So what we can do is get our cursor
before the dollar sign.
Let's type in the word, Darken beginning parenthesis
and then after the variable name, we'll add an ending,
a parenthesis, then inside,
we're going to put a comma after the variable name,
and then we're going to type 10%.
Let's hit Save.
My particular compiling software will give me notification
letting me know that it has complied this into style.css.
Then I go over to the browser and I can hit Reload.
Now, we'll see at the bottom, the background color
of the body element is now 10% darker than the color
we specified everywhere else.
So SASS is making the calculation and darkening that color
automatically based on the hex value that we put in here
for the value of that variable.
So now that adjustment made,
I'd like to make the same adjustment
to the background color of the H1.
So scroll down here a little bit.
Let's come up here and copy that function.
Let's come down here to background color
inside of the H1 selector.
Let's paste that.
Again I'll hit Save.
Over to my browser, hit Reload.
Now the background of the H1 tag
is just as dark as the background color of the body.
Let's keep scrolling down.
We're going to come down to the bottom here.
I want to find the two class selectors for bar.
Now down here, I wanted the colors to be a little bit
different, so what I did is I actually picked hex values
in a graphics program to get the lighter blue
and darker blue.
But instead of doing this
when I'd rather do is use the darken and lighten feature.
So for the .bar let's come in here and let's paste in our
darkened color and let's set the darkened value
to just 5%.
And I'll come down here to the background color
for the div that's inside of the class of bar.
Let's paste our darkened function here.
Let's change Darken to Lighten.
And for the color, we're going to leave this at 10%.
So with these in place, we'll hit Save.
Come back to the browser,
We'll hit Reload.
And now we have our new colors being generated
from that main variable.
And now that we've made a few adjustments to our color,
now we'll create a new color
by adjusting the original color
using the adjust hue function in SASS.
And later we'll do the same thing in LESS
with the spin function.
Now when using the color adjustments,
we may first think of colors in the order that we're
used to seeing them on paper,
which is in the CMYK model.
However, we do need to remember, that the color model
for emitted light is RGB.
So adjustments we make are based on this model.
So the opposite of violet,
the 180 degree hue adjustment
would result in green and not yellow.
So now back in our CSS
let's define another color and base that color
off of an adjustment from the first color.
So up here at the top under Color One,
let's type a dollar sign.
Let's type color_2: and we'll set the value of this
to an adjustment of Color One.
So let's come up here and copy the Color One variable name.
Then after the colon for Color Two,
let's type adjust-hue
put in our parenthesis and semicolon.
Inside, let's paste the Color One variable
then a comma, and then what I want to do is just adjust
this a little bit.
I'm going to set a 10 degree hue adjustment.
So 10 D-E-G.
And so now with this new color variable defined,
let's come over here and select and copy,
$color_2, let's come down to the body element.
Instead of darkening the main color,
let's come in here and replace that simply
with Color Two.
Then let's scroll down.
The other place I want to use this will be
for the div with the class of bar
and then the div inside of that.
So basically, everything that shows
at the bottom of the page I want to use the adjusted color.
So for the selector.bar
let's come in here and change this to Color Two
and then the same thing for the background color of the div
inside of the class of bar.
Set that to color_2 as well.
Then I'll save my file.
Go back to the browser, hit Reload
and now we can see the slight adjustment
showing up down here
for the background of the body
and the two div elements at the bottom of the page.
So this is a pretty subtle change
but it does give us a slight variation
on the original blue that we define.
So now let's create a second color
that's going to have a little more of an adjustment.
So after Color Two,
$color_3:
I'll come up here and copy that adjustment,
paste it on the next line,
and let's come in here
and let's change this to negative 60 degrees.
We're still going to adjust the original Color One.
Now to use this color,
let's come in here and copy the color_3 variable name.
So let's scroll down,
let's find the div that's inside of the aside.
Here we have a board of color.
The board of color is being set to Color One.
Let's come in here and replace that with Color Three.
And then right below this property,
let's change the text color.
So inside Color Two, Color Three.
And we'll come down a little bit to the H3.
The background color here, we're going to set
this to Color Three as well.
And then one additional property I'd like to set
is to set up background color on the div
that's inside of the aside.
So let's come back up here.
I put color.
Let's hit Return.
Let's add background color.
So what we can do in SASS
is use the RGBA color space.
So I can type RGBA,
put in our parenthesis and then a semicolon.
Inside, let's paste Color Three
and a comma, and now I can put in alpha setting.
So I'm simply going to put .1
and that's going to give me a 10% version of Color Three.
So with these in place we'll hit Save.
And then over here in the browser,
we can see the result of making
a negative 60 degree hue adjustment
for the Color One variable.
So now with these color variables set up
and all of our adjustments in place,
we can now make global changes to our color from one spot.
So in the CSS file, let's scroll up.
Let's find the definition for the Color One variable
and let's come in here and change this
from a blue to a violet color.
So let's change the red value to 79.
Let's change the green value to 3C
and the blue value to A0.
Well hit Save.
Back to the browser.
We'll hit Reload.
And now we can see all of the new colors being generated
based off of modifying that one variable.
So now we're ready to convert our SASS file
into a LESS file.
So let's come over here to our SASS file.
Let's do a Select All.
Let's choose Copy, to copy this to the clipboard.
Switch back to the exercise files.
Let's find style.less.
Let's open this in our Text Editor.
And I left this blank.
So let's come in here and delete the comment.
Let's paste in all of our SCSS code.
Let's scroll to the top.
And I'll use my Text Editors
Search and Replace field
to replace our variables.
So first let's come in here and select.
$color_
I'm going to put that into my Find field,
into my Replace field.
Going to paste that again and I'm going to change
the dollar sign for an At symbol.
And then I'll replace all of those instances
so that all of the variables
are now following the LESS syntax.
Now there's a few other adjustments I need to make.
The first one, for Color Two and Three,
LESS does not use the function name adjust-hue.
It uses the word Spin instead.
So let's change these to Spin.
And let's scroll down to find the div
inside of the aside.
LESS does not allow us to use the RGBA color space
to make an adjustment here.
So instead of RGBA, we're going to type in the word Fade,
and then we're going to change the .1 to 10%.
This will essentially do the same thing as SASS
but again, the syntax is a little different.
And then before I save this,
let's change the over all color again
just to make sure the LESS file is compiling properly.
Let's come up to Color One.
And let's change this to 90 for red,
60 for green, and 31 for blue.
With that in place, let's hit Save.
Check to make sure your LESS file
got properly complied down into style.css.
Come back to the browser
and then hit Reload.
So we've now used a SASS and LESS
to create color variations from a single color
defined in the variable.
Using these adjustment techniques,
you'll be able to create an entire range of colors
for your website based on any color rules
you need to adhere to.
Now if you'd like to learn more
about SASS and LESS,
I'd recommend taking Joe Marini's course entitled
CSS with LESS and SASS which is available here
in the library.
And so with that, I'll conclude this episode
and as always, thanks for watching.