Stylesheets by their very nature do not comply with clean, quality principles as everything is one gigantic file that is filled with redundancies. It’s inefficient and error-prone to work with a stylesheet. But just like what you learned in Part 1, the stylesheets can be broken up into modules and partials using Sass. In this lab, you will take your first steps to working with Sass by splitting up the Genesis starter theme’s stylesheet and converting it to Sass.
What Do You Get Out of This Lab?
Hum, you get:
- Working Sass code and modular architecture
- Simplified, readable styles
- Learn about how to refactor using Sass including nesting, variables, and
& - Learn how to think about breaking code up
- Different strategies and techniques which you can use to make your own codebase that is specific for your needs and workflow.
This hands-on lab is Part 2 of a multi-part “Let’s Build a Custom Developer’s Genesis Starter Child Theme” series. Make sure that you have completed Part 1 – Introduction to Modularity before you do this lab.
Converting a stylesheet over to Sass is the largest part of this lab series. Therefore, it is split up into multiple sub-part labs. In this lab, you are learning about the process, Sass, and setting up the default variables and base styles. Here is a list of all the sub-part labs in the Sass series:
- Part 1 – Introduction to Modularity
- Part 2a – Modular CSS Using Sass
- Part 2b – Navigation Sass Module
- Part 2c – Header Sass Module
- Part 2d – Footer Sass Module
- Part 2e – Entry Content Sass Module
- Part 2f – Comments Sass Module
- Part 2g – Widgets Sass Module
- Part 2h – Plugins Sass Module
- Part 2i – Layouts Sass Module
- Part 2j – Base & Common Classes Sass Modules
- Part 2k – Finish Up the Sass Modules
To learn more about this series and each of the parts, see the main lab found here. It also includes all of the prerequisites that you will need to build this theme.
Whoever says that coding is hard, just smack them.
Episodes
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
What to Do Next?
