Subscribe

SCSS Introduction

โœ๏ธ

An introduction to SCSS and how to set it up

29 Jul, 2020 ยท 2 min read

Hey Guys, I realized I've been using SCSS in most of my Codepens. But we never really touched based on this topic.

So let's dive into introducing SCSS to you all.

BTW: I have a free Giveaway on Twitter! ๐Ÿšจ Free Giveaway

What Does SCSS Mean?

It stands for sassy css and is basically the follow up for SASS stylesheets. You will find many people calling it SASS or SCSS, but either way, they are very similar and used for modular CSS setup.

In general, some common use cases are:

  • Variables
  • Nesting
  • @import
  • @mixin
  • @extend

We won't be going through all these topics today, but I will touch base on them during the next couple of days.

How Does SCSS Work

A major thing to keep in mind is that a browser won't understand SCSS or SASS code. We need to process it and turn it into regular CSS files.

There are several ways to do this; the simplest is using a pre-processing plugin, for instance for Visual Studio:

Download Sass Compiler

This will run in Visual Studio and compile your SCSS files into one CSS file.

There are also specific SASS compilers see the website for more information:

SASS Compilers

Our First SCSS Example

Let's get right in there with a very basic example:

<div class="container">
  <div class="box">
    ๐Ÿคฉ SCSS ๐Ÿคฉ
  </div>
</div>
$primary: #ffd670;
$secondary: #ff9770;

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: $primary;
}

.box {
  background: $secondary;
  padding: 50px;
  border-radius: 20px;
  color: $primary;
  font-size: 2rem;
  font-weight: bold;
}

As you can see, we can now quickly change our colors, instead of having them repeating in every element styling.

This will result in the following Codepen.

See the Pen SCSS Introduction by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Bringing perspective to CSS

7 Aug, 2022 ยท 2 min read

Bringing perspective to CSS

Creating a 3D Cylinder shape in CSS

29 Jul, 2022 ยท 3 min read

Creating a 3D Cylinder shape in CSS

Join 1828 devs and subscribe to my newsletter