Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Modular CSS with Sass!
You have completed Modular CSS with Sass!
Preview
Let's start by writing a configuration file that defines variables for our project's common colors, fonts, text styles, and more.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So here we're looking at our simple UI
prototyping tool kit called Poly, and
0:00
it's currently built with native Vanilla
CSS.
0:04
Now everything looks great visually.
0:07
As we can there are UI components like
navigations, typography, buttons,
0:09
forms and
0:14
more, but if we open up the style sheet we
can see that it's not only difficult to
0:15
understand since it's using many element
selectors and descendent selectors.
0:19
There's also a lot of repeated CSS
happening here, and because of that,
0:24
there's no modularity, mainly because
there are a lot of contextual styles,
0:29
creating dependencies on other elements.
0:33
So for example,
0:36
a CSS with a nav component uses CSS rules
that rely on a parent element.
0:37
Now if this nav needs to be inside another
section of the page that's not the header,
0:43
it will break.
0:47
Then we'd have to write more unnecessary
CSS to style it for
0:48
whatever the new context is.
0:52
And for that reason, this can become a big
maintenance and scalability problem.
0:54
So when writing modular CSS our goal
should always be to get to
0:58
a point where modifying or
1:02
rearranging anything about the structure
will not break the front end.
1:04
Okay, so I've set up a new SAS project in
Workspaces, and this is where we're
1:08
gonna start writing our modular SAS rules
for the poly prototyping toolkit.
1:13
We're gonna replace that messy CSS we saw
earlier with an architecture that's
1:18
easier to understand and
1:22
maintain and we'll start simple by writing
a config file for our project.
1:24
So what we are gonna do first is define
clear naming conventions for
1:30
our colors, fonts and text sizes, using
Sass variables.
1:33
Because we don't want colors, fonts, and
1:38
text styles, scattered throughout our
style sheets.
1:40
That can become difficult to maintain
after a while.
1:43
Now, after we define those config
variables, we're gonna write mix ins and
1:47
functions that will help make our project
easier to scale and maintain.
1:51
So, in the config.scss partial,
1:56
let's first declare variables for the font
families in our project.
2:00
Now, the main font we wanna use is the
Google web font Lato.
2:04
So, let's name our very first variable,
font-url-Google.
2:10
[SOUND] And the value for this variable
will be
2:16
the URL to the Lato Google web font with a
few font weights.
2:20
And later we'll use this variable to write
a simple directive that
2:26
imports a Google web font URL in our style
sheet if it exists.
2:31
So next we'll create a variable for our
primary font family.
2:36
So let's call this one
font-family--primary.
2:40
And the value for
2:47
font-family--primary will be a font stack
for our Lato web font.
2:48
So let's go ahead and first define that.
2:54
And then we'll want it to fall back to
Helvetica New or
2:57
Helvetica if the browser is unable to load
Lato.
3:01
So let's define the Helvetica New font
next.
3:04
And I'll just go ahead and
3:07
paste the rest of the font stack for
Helvetica, Arial and Sans-Serif.
3:12
And next, let's create another font family
variable for the secondary font.
3:17
So, right below, we'll say
font-family--secondary,
3:22
and our secondary font will be Helvetica
Neue.
3:32
So, I'll just go ahead and copy the font
stack for
3:35
that in the family primary value, and just
paste it right below.
3:38
So fonts have different weights and
3:44
not all fonts map their weights to the
same values.
3:46
So for instance, our primary font Lato,
3:50
is using these five values, as it's font
weights.
3:54
Now we can use these numbers as the font
weight values, but
3:58
instead of plugging the numbers as values
in our style sheet,
4:01
let's instead write variables that
describe what a given value means.
4:04
So we're gonna describe a font weight thin
all the way to a font weight ultra bold.
4:09
So, let's call our first font weight
variable, font-weight--thin and
4:16
we'll make the value 100.
4:25
Now, I just go ahead and copy this
variable and paste it below four times.
4:26
So, let's call this second variable
font-weight--light and
4:35
we'll make the weight 300.
4:38
And below that, we'll create
font-weight--medium and
4:40
make the value 400.
4:46
Let's create a font weight bold with a
value of 700 and
4:52
finally font weight ultra bold will be
900.
4:56
Let me just clean this up.
4:59
And there we go.
5:07
So now we can use this variable as our
font weight values.
5:07
And if for some reason the font family
changes, we can
5:11
adjust the weights here instead of having
to search for them in our style sheet.
5:15
And notice the pattern we're using to
define our variables.
5:20
We're first describing what the variable's
for.
5:24
So for example, font family and font
weight.
5:27
Then we're using the two dashes to define
the variations.
5:31
So here we have primary, secondary, thin,
light, medium and so forth.
5:35
This closely maps to the BEM naming
convention we're gonna discuss in
5:40
the next stage.
5:44
So keep in mind that we're writing our
variables this way for a good reason.
5:45
So next, using the main colors and the
poly tool kit.
5:49
Let's define an initial color palette
that's more descriptive and
5:52
easier to read than a bunch of random hex
values.
5:56
So, for instance right underneath the
comment for descriptive base colors
6:00
instead of using the hex value for the
color white, we can create a variable
6:04
called white and make the value the hex
code for the color white.
6:11
And again for black, we'll create a
variable called black and
6:16
we'll use a lighter shade of black as the
value, so we'll say #0b0b0b.
6:22
And let's do one more for our base gray.
6:28
We'll make that #797e83.
6:35
So to speed things up, I'll go ahead and
6:40
paste the rest of the color variables and
values right below.
6:42
So here I've added descriptive color
variables for
6:46
the rest of the colors used in a toolkit.
6:49
Now using these natural color names for
6:52
variables will let us know exactly what
color a given variable will output.
6:54
And I used this pretty neat tool called
Name that Color,
6:59
to give me better color names than simply
red, green, teal, blue, and so forth.
7:03
So here we have fountain blue, emerald,
sunglow, purple majesty, and scooter.
7:09
Now we can even use these base colors to
create variables for
7:13
some of the most commonly used colors and
shades in our projects.
7:18
So for instance the primary and secondary
brand colors, accent and
7:22
shadow colors, and so on, and we'll just
create a few for now.
7:27
So first we'll create a variable for our
primary color, we'll call it color
7:30
primary and let's make the value the
fountain blue color.
7:37
So I'll just go ahead and paste in the
fountain blue variable and right below,
7:41
we'll create a new variable called
color-secondary and
7:46
the value for this will be the scooter
color.
7:53
So below, I'll go ahead and paste the
variables for color-accent and
7:59
color-shadow, so we're using emerald as
the accent and for
8:04
the shadow we're using the base black and
knocking the alpha down to 0.2.
8:08
Later, we'll learn how to reference many
of these color variables within Sass maps,
8:13
to structure different color palettes that
create other shades and
8:18
variations of some of these colors.
8:21
We'll also use them to dynamically
generate theme classes for our buttons.
8:24
Finally, let's also define variables for
our base font size and line height.
8:29
So let's create a new variable called base
double underscore font size.
8:35
And we'll make the value 16 pixels and
below we'll create a variable for
8:42
the line height.
8:47
We'll call it base_line and let's make it
24 pixels.
8:48
So we're initially defining the font size
and
8:56
line height in pixel unit as we can see
here, even though I prefer using m's for
8:58
font sizes and unit list values for line
heights.
9:04
So coming up in the next video we're gonna
write a function that calculates and
9:07
converts pixel values to m's.
9:11
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up