SCSS Tutorial for Beginners

SCSS Tutorial for Beginners: What It Is and How to Use It (With Examples)

SCSS (Sassy CSS) is a powerful CSS preprocessor that extends CSS with features like variables, nesting, mixins, and functions. It helps developers write cleaner, reusable, and more structured styles for modern web projects.

What is SCSS?

SCSS is a syntax of Sass that uses the .scss file extension. It allows you to write CSS with advanced features and then compile it into regular CSS that browsers can understand.

Why Use SCSS?

• Cleaner & maintainable code
• Use of variables, mixins, and functions
• Faster development with reusable styles
• Better file structure using partials

1. SCSS Variables Example

$primary-color: #4a90e2;
$font-size: 16px;

body {
  background: $primary-color;
  font-size: $font-size;
}
  

Output CSS:

body {
  background: #4a90e2;
  font-size: 16px;
}
  

2. Nesting in SCSS

.navbar {
  background: #333;

  ul {
    list-style: none;

    li {
      display: inline-block;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}
  

Output CSS:

.navbar {
  background: #333;
}
.navbar ul {
  list-style: none;
}
.navbar ul li {
  display: inline-block;
}
.navbar ul li a {
  color: white;
  text-decoration: none;
}
  

3. Mixins (Reusable Styles)

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include center;
  width: 200px;
  height: 200px;
  background: #f1f1f1;
}
  

4. Extend / Inheritance

%btn-style {
  padding: 10px 20px;
  border-radius: 5px;
}

.btn-primary {
  @extend %btn-style;
  background: blue;
  color: white;
}

.btn-secondary {
  @extend %btn-style;
  background: gray;
  color: black;
}
  

5. SCSS Function Example

@function pxToRem($px) {
  @return ($px / 16) * 1rem;
}

.title {
  font-size: pxToRem(24);
}
  

How to Use SCSS in Blogger

Since Blogger doesn’t support SCSS directly, follow these steps:

1. Write your SCSS in a code editor like VS Code
2. Use a compiler (Live Sass Compiler) to convert SCSS to CSS
3. Copy the generated CSS
4. Paste it inside Blogger → Theme → Customize → Add CSS

Final Thoughts

SCSS is one of the best tools for modern web styling. It makes CSS cleaner, more powerful, and easier to manage. Using variables, mixins, and functions can save you hours of development time, especially on large projects.