Join Ray Villalobos for an in-depth discussion in this video Creating a color palette with variables, part of Responsive CSS with Sass and Compass.
As I mentioned on the movie on What is SaaS and Compass, one…of the key advantages that SaaS gives you, is the ability to create variables.…As a matter of fact, you usually create a whole separate partial just for variables.…And we've already done that.…That's really going to help you when your creating…a color palette and it's super easy to do.…I like to use a color palette…called Solarized, it is created by Ethan Schoonover.…And its really pleasant for reading and…it has excellent contrast.…It has a series of background tones, tones for content and accent colors.…
Now, I like to give my colors variable names that are easy for me to recognize.…So I've created a gist with the colors that I'm going to use for this project.…So you just need to copy and paste them from right here.…So I'm just going to grab these from here, and then copy them.…And then I'm going to switch over to my project, and go into…the _file, the components, and then the SaaS…folder, and pull up our variables that SCSS partial.…And just paste all those variables for colors.…
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
Skill Level Intermediate
Q: I am having trouble with the "Modularing your Sass with partials" video. Does Susy still support the @include at-breakpoint() mixin?
<div>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: </div><div> </div><div><span style="font-family: Courier;">@import "susy" </span></div><div> </div><div>to </div><div> </div><div><span style="font-family: Courier;">@import "susyone" </span></div><div> </div><div>And you should be able to use the older syntax. There's more information at <a target="_blank" href="http://susy.readthedocs.org/en/latest/susyone">http://susy.readthedocs.org/en/latest/susyone/</a>.</div><div> </div>