Skip to content

Latest commit

 

History

History
86 lines (57 loc) · 3.06 KB

SCSS.md

File metadata and controls

86 lines (57 loc) · 3.06 KB

SCSS And BEM

As a web project grows, it can be quite difficult to manage ever growing CSS files and nested HTML elements. In this lesson, we're going to learn some approaches and tools that can help us manage this complexity.

Prerequisites

Before beginning this lesson, you should be familiar with
HTML
CSS
Building a React Application

You can review any of those things at their respective links.

SCSS

SCSS (called Sass, as in, don't give me that sass!) is a CSS engine that allows us to nest our css, similar to how we nest HTML elements. Before we implement it in a React project, let's give it try by starting out on Codepen.

First, in the CSS box, select the gear icon:

Screen Shot 2023-10-02 at 2 52 37 PM

This will open a settings panel. You can see this is in the following image:

Screen Shot 2023-10-02 at 2 52 48 PM

Click the dropdown and select SCSS from the list of pre-processors.

Let's build a simple component with a title and a bit of text:

Screen Shot 2022-01-13 at 2 30 45 PM

First, let's write out all the HTML. We'll use the component we built in the first part of this lession:

<div class="info-card">
  <div class="info-card__title">Info Card</div>
  <div class="info-card__text"> 
    This is an info card with some content.
  </div>
</div>

Next we move to the styling with CSS. Without SCSS, we would need to write our styles like this:

.info-card {
  text-align: center;
  border: 1px solid black;
  width: 250px;
  margin: 0 auto;
  padding: 20px;
}

.info-card .info-card__title {
   font-weight: 600;
   padding: 10px;
}

However, as long as we have selected the SCSS from the dropdown (as shown above), we can start to use one of the features of SCSS - nested styling.

.info-card {
  text-align: center;
  border: 1px solid black;
  width: 250px;
  margin: 0 auto;
  padding: 20px;
  
  &__title {
   font-weight: 600;
   padding: 10px;
  }
}

We have only scratched the surface of what is possible through SCSS, but hopefully this demonstrates that it is just CSS with a few extra capabilities.

NOTE: You can always run vanilla CSS in a file ending with .scss. In other words, you can change the file extension without having to re-write the whole file.

Before we move into working on a React project, let's improve our Info Card by using BEM notation.