As I was thinking about the rest of this lab, it dawned on me that starting with the variable declarations is not the best approach to helping you make the leap from working in native CSS to maximizing what you can do in Sass. Therefore, let’s adapt and start migrating the Genesis Sample Theme’s
style.css over into the Sass files. The remainder of this lab is walking through step-by-step, copying each section of the styles and moving them over into the Sass files. You and I will walk through the process and actively think about how to divide it up.
Let’s get started by migrating the first section.
Work with me through the process, as I’m sharing how I think about the code and giving you alternatives to help you to adapt it for your needs.
Break. Go rest your noodle for a couple of minutes.
Total Lab Runtime: 02:16:49
- 1 Lab Introductionfree 02:17
- 2 The Why of Modular CSSfree 11:50
- 3 The How - Meet Sassfree 08:15
- 4 Overview of the Theme's Sass Architecturepro 08:39
- 5 Layout the Sass File Structurepro 17:14
- 6 Color Variablespro 10:11
- 7 Start Migrating the Stylesheet to Sasspro 11:43
- 8 Migrate Structure and Layoutpro 10:18
- 9 Migrate Common Classespro 04:34
- 10 Migrate Widgetspro 08:43
- 11 Migrate Pluginspro 08:12
- 12 Migrate Skip Linkspro 02:24
- 13 Migrate Site Headerpro 10:09
- 14 Migrate Site Navigationpro 07:34
- 15 Migrate Content & Sidebarspro 06:37
- 16 Migrate Site Footer & Widgetspro 03:08
- 17 Handling Media Queriespro 05:01
- 18 Wrap it Upfree 00:00