Join Ray Villalobos for an in-depth discussion in this video Styling our base partial with variables, selector helpers, and parent selectors, part of Responsive CSS with Sass and Compass.
Alright, so it's time to do some styling.…We're going to touch on a few features of compass and SaaS in context.…We'll start with our base partial.…This is where the general styles for your content is going to go.…So that's right here under the components folder in the SaaS…folder, right underneath the two import links that we just generated.…First thing I'll do is start with the body tag and…its so, what we're going to do is use some of the…variables that we've created and this variables.css partial.…So we've got two things fonts and the colors.…
So back into our base.css, we're going to apply that to our body tags.…So Font Family, and we're going to use the variable called Font-Primary,…and we'll save this and take a look at our document.…You can see that its already applying that base font.…Then I'll do a font-size, and…I'm going to use 1.2 rems.…Now rems is a newer measurement, it's available at IE9 and above.…And if you really take a look at this article right here.…Most web designers currently use ems to size their fonts.…
Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.
- What are Sass and Compass?
- Adding version control
- Setting up a workflow with Grunt.js
- Modularizing your Sass with partials
- Creating a color palette with variables
- Using Compass mixins
- Creating a mobile-first layout
- Creating media-query breakpoints with Susy
- Designing a responsive grid with Susy