Start a free 7-day trial to check out our newest course, WordPress Basics!

Join the Treehouse affiliate program and earn 25% recurring commission!

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

Well done!

You have completed Modular CSS with Sass!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

The Project Config File

9:14 with Guil Hernandez

Let's start by writing a configuration file that defines variables for our project's common colors, fonts, text styles, and more.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Quick Reference

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related 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 up

You need to sign up for Treehouse in order to set up Workspace

Sign up