Join Jen Kramer for an in-depth discussion in this video Understanding Foundation, Sass, and Compass, part of Foundation 4: Incorporating Sass and Compass.
Foundation is an open source front end responsive design framework created by Zurb a web design and development company to streamline building websites. Open source means the source code is available to download and modify, and in this case it's also free. Front end refers to the client side of the website. That's the part of the website that displays in the browser window. Responsive design is a technique which allows a single HTML document to respond to the screen size in which it's being viewed.
Adopting it's look accordingly. A framework is a bunch of code that's been written for you already which you can use to build your website. You can learn more about Foundation here at their website. Foundation.zurb.com. Hopefully, before you start watching this video, you've already watched Up and Running with Foundation. One of my other courses here at lynda.com. If you're not familiar with Foundation already, this is a great way to get started. In the Up and Running with Foundation course, I went through the basics of Foundation.
But I didn't get much into customizing the CSS. On several occasions, I strongly recommended that you modified the CSS using the Sass files that come with foundation. That might leave many of you wondering, what is Sass? Sass is a CSS pre-processor. What on earth does that mean? Well, consider a standard CSS file for a website. You picked out a few colors and some standard spacing elements for that page. Using plain old CSS, you have to type in those values over and over again.
If you are not want to change that shade of blue and how many places do you have to change in your style sheet. Sass centralizes those variables so that you can change the color or the (UNKNOWN) in one place. And it updates everywhere on your website. Since this concept of a variable is foreign to see a CSS itself. You will write your style sheets using the Sass syntax. And then compile it which is a geek way of saying transform it into regular old CSS that you can use on your website. You can read more about Sass here on their website, sass-lang.com.
Ruby is a fairly well known programming language. So where does Compass fit into all of this? Compass describes itself as a CSS authoring framework. But that definition didn't help me much at all. Compass is actually a framework for working with sass. It contains many shortcuts, tools, and patterns for writing CSS and sass. Compass is also Ruby based, and it's designed to integrate well with Foundation. It's possible work with just Foundation plus Sass but as you will see Compass can save us some time when writing customizations.
I recommend that you use Compass when working with Foundation and its sass files. To work with Foundation, Compass and Sass, we'll also need two more pieces of technology. One is a text editor. I will be using Sublime Text 2, but you can use any editor you want. Like Dreamweaver, BBEdit, Aptana, and so forth. If you're following me closely and want to use Sublime Text 2, I'll show you how to download it and install it in the next video. The other item we'll need is a command line on your local computer, and that's already available on your Mac or your PC.
The command line will be used for working with Sass. Alternatively, you can use a GUI interface for working with Sass. Scout is an example of one of these things. I found it a little bit buggy when I was testing out interfaces for working with this course. So I'm going to be working on the command line instead, which I found to be a little bit more reliable, although not quite as user friendly. Now that you understand some of the terminology and technology behind Foundation and the Sass and Compass. Let's get these technologies installed on your computer.
- 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