As part of migrating the plugins, you will dive deeper into different nesting refactoring strategies and techniques in Sass. You get to see how to use the Sass ampersand &. You will also use the color variables. Little-by-little, you are learning what you can do in Sass to streamline, compress, and clean up the styles to be DRY, modular, and more readable. You are going to enjoy this one. Here are some additional resources to help you out: The Sass Ampersand – CSS Tricks Sass Nesting
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Migrate Widgets
Let’s migrate over the widgets into our modular Sass files. You are also taking your first steps to refactor the CSS by learning about removing redundancies and using the power of nesting.
Migrate Common Classes
Let’s migrate over the common classes. Where do we put these into our file structure? Hum, let’s create a spot for now and then when we refactor later, we’ll migrate those sub-modules and partials over to the appropriate buckets.
Migrate Structure and Layout
You will continue migrating the styles to Sass by moving the structure and layout section. In addition, I’ll give you a preview as to the power of Sass by doing a wee bit of refactoring. While native CSS runs in Sass, yes it does, you can streamline your styles and make yourself more efficient once you learn a few little tips and tricks.
Start Migrating the Stylesheet to Sass
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. […]
Color Variables
All of your colors for the site’s branding and color scheme go into the utility variables module. You assign the color to a variable and then use the variable within your styles. The advantage is: for each project, you have just one place to change the entire site’s branding. It will save you time and frustrations. Bam, that’s a great thing! In this episode, you’ll think about different variable naming strategies. You hear me walking through various alternatives until we find the one that seems to work better than the others. But like PHP variable naming, you have flexibility to […]
Layout the Sass File Structure
It’s now time for you to start creating the file structure and adding in the baseline partial Sass files. Make sure you are ready to work, as you will be actively creating the files. I want you to do this with me as you and I think about what is a good structure and why. You’ll hear my thought processes as though I’m sitting right there with you, working beside you.
Overview of the Theme’s Sass Architecture
Let’s talk about how we move from the stylesheet into an architecture, meaning how are we going to break up the styles into modules and a file structure. The structure is defined typically by tasks, features, views, and components. There are no hard and fast rules about how you set up your folder structure. I show you two different projects to show you different alternatives: my Hello theme for my personal blogs wd_s by WebDevStudios In this episode, you walk through a thought process of deciding how to break things up. I share my thought processes with you, as well […]
The How – Meet Sass
So now you know the benefits and how writing your styles in a modular fashion helps you to do more and make more. How are you going to do it? Native CSS doesn’t provide the means for modularity or clean, quality coding. Meet Sass, Syntactically Awesome Stylesheets. Sass adds the powers of functionality and variables to CSS. You now write your styles in a code-based format that is clean, DRY, and modular. Let’s talk about Sass and how it will help you.
The Why of Modular CSS
Just like we discussed in converting to a modular PHP theme architecture, modularity applies to everything you build in code, including your stylesheets and CSS. What are the benefits to you? Why would you want to write your styles in a modular fashion? It does the following for you: Saves you time Increases the quality of your code and product Reduces errors What does that mean for you? Takes you less time to produce solutions, meaning a lower product cost and time to market. Makes you more in demand, marketable, and valuable. That means you can make more moola. Let’s […]
