Quick SCSS Crash Course

[cosminbrn]

SCSS

Why use CSS when you can use the S(steroid)CSS.

SCSS comes with a lot of Quality of Life changes, which you can read about in detail by following the link inside Useful Links, but I'm also going to provide a quick crash course.

Nesting & BEM

The most important concept that we really really want to follow. We don't want our StyleSheet to Cascade everywhere, so we want to somehow contain it to only affect our critical .jsx file. That is why we are going to follow this naming convention using the powerful concept called nesting, along with the Ampersand (&) selector.

SCSS

.text-container {
  &__slider {
    border: 0.3rem solid;
    border-image: linear-gradient(to right, #08D0FE, #FF007B) 1;
  }
  @include subpage-format();

  @media (min-width: 768px) {
    &__slider {
      width: 95vw;
      height: 25rem;
    }
  }
}

JSX

<div className="text-container">
   {/* Note the double underscore matching the SCSS */}
   <div className="text-container__slider">
      <DancingShadow />
   </div>
</div>

Take the following code as an example. We have the main container named after the parent component (.text-container named after the Text folder that it is in) while we nest all of its children inside it. This creates a unique class name (.text-container__slider) that will never clash with a .footer-container__slider for example, ensuring our CSS will not cascade unexpectedly.

All of our SCSS code will be written in a container named after the parent component (for example .footer-container, .questions-container). Afterwards, you can name the class selectors however you want, but remember that you have powerful tools that you can use if you name them a certain way (Ampersand). Send me a blue emoji on WhatsApp if you read this far!!!!

Variables

You can define constants in SCSS:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Mixins

They are essentially functions that accept parameters and contain different SCSS code that is based on the said arguments. You can also write empty Mixins that you can just use to avoid copy pasting a certain section of code everywhere.

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

Mobile First

We start with the ugly first

This is the new industry standard. Because most of a Website's traffic comes from mobile devices, we want our Website to look the best it can look on mobile. Also, a new algorithm update has regulated Google to only use mobile device driven statistics to calculate a website's popularity. This means that the traffic from our mobile users is the most important there is

Concept

We want to write code that looks good on Mobile, that add Media Queries to adapt it to Desktop:

.product-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 column (stacked) */
  gap: 1rem;
}

/* We only apply this rule if the screen is WIDER than 768px */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr); /* Switch to 3 columns */
    gap: 2rem; /* Add more breathing room */
  }
}

Useful Links

• [Figma]
• SCSS
• Mobile First