Responsive CSS with Sass and Compass
Video: WelcomeLearn how Compass (powered by Sass) can help you build a responsive layout workflow that is easier, faster, and more compatible than CSS alone.
- Next steps
Viewers: in countries Watching now:
Using a framework helps simplify your workflow and makes writing CSS fun again. Learn how Compass (powered by Sass) can help you build responsive layouts that are easier, faster, and more compatible than using CSS alone. In this course, Ray Villalobos shows how to automate your workflow with Grunt.js, scaffold your HTML, modularize your Sass with partials, and get started styling with variables and mixins. Plus, learn how to create a mobile-first grid with Susy—without adding nonsemantic HTML markup.
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
I'll show you how to scaffold the website so that you can understand how to best create a Mobile First layout for your pages. Then we'll examine how to create modules and partials for your Sass. How to use variables to create a color pallet and control Sass functions and Compass mixins in your code. Finally, I'll show you how to create a mobile first responsive grid with the Susy framework, which sits on top of Compass to give you an easy way to create responsive code without having to add Markup to your HTML. There's a lot to cover, so let's get started with responsive CSS with Sass and Compass.
Find answers to the most frequently asked questions about Responsive CSS with Sass and Compass .
Here are the FAQs that matched your search "" :
- Q: I am having trouble with the "Modularing your Sass with partials" video. Does Susy still support the @include at-breakpoint() mixin?
- A: The new version of Susy (2.1.3) doesn't support the @include at-breakpoint() mixin. This course is written for version 1.0 of Susy; however, you can still use the Susy 1.0 syntax as long as you modify the include command. In the styles.scss file, change the line that says:@import "susy"to@import "susyone"And you should be able to use the older syntax. There's more information at http://susy.readthedocs.org/en/latest/susyone/.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.