WooHoo! You are now done with converting the native CSS stylesheet over into modular Sass. I know that was a long process, but you only needed to do it once. Now you have a codebase that you can use on every single project and site that you build.
Quick Summary of What You Learned:
- It’s Sass and not SASS.
- You have a modular codebase that you can use on every single project.
- Color changes are quicker as you change them in one spot and your entire stylesheet changes.
- Typography changes are quicker.
- Dimensions are customizable in one spot.
- It will allow you to work faster and with less errors.
- It will save you moola.
Excellent job! You just completed your Sass modules! You now have a modular styling architecture and codebase that will serve you on every single job. You do not have to go through this long, arduous process again. Nope, you have your codebase. Now you can extend and add to it.
Check out the Genesis Theming Framework for more hands-on labs, insights, Docx, and more.
Check out the series page for more labs: Let’s Build a Custom Developer’s Genesis Starter Child Theme
If you listen carefully, you can hear the 1s and 0s flowing in your computer.
Total Lab Runtime: 01:19:50
- 1 Introducing BEMpro 07:28
- 2 Apply BEM to Typography Variablespro 10:50
- 3 Apply BEM to Color Variablespro 10:57
- 4 Refactor Colorspro 04:00
- 5 Apply BEM to Dimensions Variablespro 07:47
- 6 Apply BEM to Screen Sizes Variablespro 02:26
- 7 Neat Breakpointspro 16:10
- 8 Main Stylespro 13:54
- 9 Git Commit and Congratulationspro 06:18