Join Jen Kramer for an in-depth discussion in this video Foundation's Sass file structure, part of Foundation 4: Incorporating Sass and Compass.
- View Offline
I'm going to start working with the Sass files in depth now, now that everything is all set up and configured. So let's take a look at these files in detail, so you can understand how they're put together and how we can manipulate them. So right now I have open app.scss which is inside your exercise files folder. Go ahead and open that on up. As you have seen, there is a series of at import statements up here at the top of the document. And these import series of files in the order in which the files are listed here inside of the code. So this has the settings document first, followed by normalize.
Then, this thing called Foundation, then a bunch of documents are commented out and you'll see here that there's a ton of additional documents here that are all commented out on and on and on. And finally, the customs style sheet is down here at the bottom of the page. So, I'm going to take a look at each one of these Sass files so you can see how they're put together. I'm going to start with settings.scss. Double click on that. So, settings.scss contains all of the variables used to create foundation with their values.
So, for example, if I scroll on down here just say line 54. There's a variable called body-bg and it's set to f f f or white. Any time you see a dollar sign in front of some words like body-bg, that's an indication that this is a variable inside of Sass. Notice that most of these variables are commented out. This file's going to show you what the values are for these variables in the documents current format. And I'll show you how change all of this in the next video.
But this is actually designed to be an override document. The place where the values of these variables is actually drawn from is elsewhere in the Sass file format structure. And this file is designed to override things. So that you have your core settings and then these are your customizations. So that's what's going on here and any time you see that dollar sign, you can bet that that's a variable of some kind of another. _normalize.scss, go ahead and double click on that one. This is a normalize style sheet that's used in so many different CMs and framework.
The purpose of the normalize style sheet is to standardize spacing and styling. For all HTML elements across the browser. Sometimes browsers treat default styling of HTML elements differently and this can lead to a lot of cross browser bugs, for example, if you scroll down here. For example down the line at 114, you'll see that the h1 is being set to a certain size with the top and a bottom margin to overcome a bug that's mentioned in the comment above. See on lines 109 to 112, there's a comment here.
That says it's to address the variable h1, font size and margin within section and article, contexts in Firefox 4, Safari 5 and Chrome. It's not zeroing out the size and margin the way a reset style sheet would do. That's the difference between a reset style sheet and a normalized style sheet. The reset style sheet just takes out all of the spacing and sets everything to zero. Whereas a normalized style sheet will actually set them all to be the same sizes, regardless of what browser you're working with. The next document is foundation.scss.
I'm going to go ahead and double click on that one and this, as you can see, loads a bunch more documents beyond that. Let's take a look at where these documents are located. So you can read here in the code, say on line 13, you'll see that this is in the foundation folder, in the components folder, it's looking for something called type. So if we go to our, inside of the Sass folder of course, inside of the foundation folder, inside of the components folder. You're going to find a partial file here, partial of course meaning that it starts with an underscore, called _type.scss.
I double click on that, this is one of the documents that the -foundation.scss document is loading. As you would expect in a document called Type, we're looking at header font families, weights and styles, heading tags, paragraph styles and so forth. If you go right down this document you can read on down here to say around line 162, 163 here, you'll see that there is a bunch of variables here that have been called as part of paragraph styling.
So, the paragraph font family on line 164 here is a variable that was probably set elsewhere. It was probably set in the settings document, for example. And now that paragraph font family is being called here as part of the paragraph styling. I'll talk more about how this works in another video, but this is how all of these files fit together. As you can see this is quite intricate that you have calls happening all over the place. You have variables that are floating around in all directions, but it's actually organized in a way that kind of makes sense. But you just have to be very careful about your paths and following those paths.
And remember that for the most part these variables are set inside of settings.scss. So if you see something called paragraph hyphen.family and you want to change that in your paragraph here, you should go back to settings.scss. Find that variable and make the change there rather than actually editing the typed.scss file. I'll talk more about that in another video. But now that you have a sense of what Sass files are, how they are fitting together and where the're located, we're ready to start editing and start making changes to the look of the website
- Installing Ruby, Sass, Compass, and the Foundation gem
- Starting a new project
- Compiling Sass files
- Changing variables with _settings.scss
- Working with Google Fonts and Sass
- Styling the nav bar
- Adjusting spacing between elements
- Styling panel links
- Creating a custom button with mixins