Know the Code

Developing & Empowering WordPress Developers

You are here: Home / Sass

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.

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Git Commit and Congratulations

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 […]

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Main Styles

It’s time to check that we have all modules and sub-modules imported into their index files. And then we’ll make sure that everything is imported into the style.scss main style file. We’ll talk about the DocBlock too.

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Neat Breakpoints

There are various strategies available to you for handling the media query breakpoints including these options, which all do the same thing: The advantage to setting a new breakpoint in the _breakpoints.scss file is you make all changes to your breakpoints in one place. Now that we’ve integrated media queries into the styles at the component level, this technique means you are not searching through all of the partials to find where to change what you need. Therefore, using the Neat function new-breakpoint() allows you to be more efficient which will save you time in working with your new codebase. […]

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Apply BEM to Screen Sizes Variables

For the screen sizes, let’s use this naming convention: $screen-size–smallest. The name is now more clear and it complies with BEM. Whew.

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Refactor Colors

Did you notice that we are repeating hex colors within the color variables file? Why? That’s not efficient and it’s redundant. Instead, let’s specify the colors at the top of the file and then use those variables within the configuration.

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Apply BEM to Color Variables

Just as we did with the typography, let’s apply BEM naming convention to the color variables, e.g. $button–hover-background-color.

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Apply BEM to Typography Variables

Let’s start in the typography variables file and convert the current variable names to the BEM methodology. The convention we will use is: $primary-nav–font-size, where the block is $primary-nav and the modifier is the CSS property font-size. Within your IDE or editor, you will do a global search and replace. Follow along with me to ensure you have the right naming; although really this is your codebase, therefore, you can name these variables any way you want.

0 Videos Runtime

Part 2k- Finish Up the Sass Modules

Introducing BEM

Let me introduce you to Block Element Modifier (BEM) methodology. The variable naming convention that we’ve been doing is a modification of BEM along with camelCase. This naming may cause the linters to yell back at us. Therefore, we are going to refactor the naming to comply with BEM. First though let’s walk through and look at what it is. While you may wonder why we are doing this, it’s good to stop and consider the quality of your code and then reassess. It’s a natural trajectory as you are advancing towards craftsman. Embrace refactoring as it helps you to […]

0 Videos Runtime

Part 2j - Base & Common Classes Sass Modules

Git Commit

Let’s commit your changes and then push them to GitHub, GitLab, or Bitbucket. We’ll walk through the current commit in GitHub too to see what it looks like and how to read it. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github.

We're giving you the keys to build whatever you want in code.
Get Started

Know the Code develops and empowers professional WordPress developers, like you. We help you to grow, innovate, and prosper.

Know the Code flies on WP Engine. Check out the managed hosting solutions from WP Engine.

WordPress® and its related trademarks are registered trademarks of the WordPress Foundation. The Genesis framework and its related trademarks are registered trademarks of StudioPress.
This website is not affiliated with or sponsored by Automattic, Inc., the WordPress Foundation, or the WordPress® Open Source Project.