Join Ray Villalobos for an in-depth discussion in this video Modifying our secondary content, part of Responsive CSS with Sass and Compass.
We already started working for our grid and controlled what happens…to our layout when our page gets to be a certain width.…So, we're creating two columns, we need to play…around with this second column right here a little bit.…And I'm also going to fix a couple of little problems that I noticed.…So, one is that these links aren't the right color, and…if I go to My base.scss in this section right here.…I should have added a dollar sign…at the beginning of this name to make sure that it was a variable.…So I'm going to save that and these links should now look right.…
Also, I think right over here, it would be nice…if we added the default border radius, to this image.…So, I'm going to go into my modules and find the next…meeting image. And just add at include border…radius here.…And then I'm going to put a semi colon save it and…hopefully that gives this this nice rounded edges which looks pretty good.…So, let's go ahead and work on our side bar component now.…
Back into Layout and what I need to do now is create a section for our sidebar.…
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>