Beginners Guide to SCSS, a Small Tutorial

Are you ready to take your web styling skills to the next level? If you’re familiar with the basics of CSS, SCSS (Sassy CSS) is a powerful tool that will supercharge your workflow. SCSS lets you write cleaner, more organized, and more adaptable stylesheets, making your web development projects a breeze!

What is SCSS and Why Should You Care?

Click here for my favorite SCSS online courses

• SCSS in a nutshell: SCSS is a CSS preprocessor. Think of it as CSS with extra superpowers. You write code in .scss files, and it gets compiled into regular CSS that browsers understand.
• Benefits of SCSS:
  • Organization: SCSS allows you to nest CSS rules, leading to more readable code that reflects your website’s structure.
  • Reusability: Variables and mixins let you define styles once and reuse them throughout your project.
  • Dynamic Style: Functions and operators let you do things like lighten/darken colors on the fly.
  • Maintainability: SCSS makes large projects easier to manage and update.

Setting Up Your SCSS Environment – Tutorial

We have a great article on how to set up SCSS with more detail here.

1. Choose Your Weapon: We’ll use Node-sass, a popular compiler. Firstly, make sure you have Node.js and npm installed (https://nodejs.org/).
2. Install: Open your terminal and type: npm install node-sass
3. Code Editor Integration: Explore extensions for your favorite code editor (like Visual Studio Code) that can automatically compile your SCSS on save.
4. Quick Experimentation: For quick tests, try an online compiler like Sassmeister (https://www.sassmeister.com/).

SCSS Fundamentals

• Nesting:

nav {
  ul {
    list-style: none;
  }
  li { 
    display: inline-block;
  }
}

See how much cleaner this is compared to regular CSS!

• Variables:

  SCSS

  $primary-color: #007bff;
  $font-stack: 'Arial', sans-serif;
  
  body {
    background-color: $primary-color;
    font-family: $font-stack;
  }
  

  Change the value of $primary-color once, and it updates everywhere!

• Mixins:

  SCSS

  @mixin border-radius($radius) {
      border-radius: $radius;
  }
  
  button {
    @include border-radius(5px);
  }
  

  Mixins save you from writing the same CSS repeatedly.

• Functions & Operators

  SCSS

  button {
    background-color: lighten($primary-color, 10%); 
  } 
  

  Calculate styles directly within your code!

Linking SCSS to HTML

• After you’ve compiled your SCSS into a .css file, you link it to your HTML like any other stylesheet:
  HTML

  <link rel="stylesheet" type="text/css" href="style.css"> 
  

Mini Project: Styling a Navigation Bar

Let’s use our new knowledge to create a simple navigation bar (see code examples on your blog platform). This will reinforce the concepts in a practical way.

Next Steps & Resources

• Official Docs: The SCSS documentation is your best friend: https://sass-lang.com/
• Advanced Tutorials: Explore more complex SCSS techniques as you get comfortable.