SCSS

Description #

SCSS (Sassy CSS) is a syntax of Sass, a popular CSS preprocessor that extends CSS with variables, nesting, mixins, and functions—while maintaining full compatibility with standard CSS.

History #

Sass (Syntactically Awesome Stylesheets) was first released in 2006 by Hampton Catlin, with SCSS syntax introduced in 2010 as a more CSS-like alternative to the original indentation-based syntax. SCSS quickly became the more widely adopted format.

Hello World Code #

$color: hotpink;

h1 {
  color: $color;
}

How to Run #

Option 1: Online
Use the Sass Playground:
https://sass-lang.com/try

Option 2: Local
Install Dart Sass:

npm install -g sass

Then compile:

sass input.scss output.css

Key Concepts #

• Fully compatible with standard CSS
• Variables with $, e.g., $color: red;
• Nested selectors
• Mixins and includes for reusable styles
• Functions for dynamic logic
• Partials and @import or @use
• Mathematical operations
• Extends via @extend
• Compiles to clean, browser-ready CSS
• Supported by all major frontend build tools

Try It Online #

https://sass-lang.com/try

Fun Facts #

• SCSS was introduced after developers requested a CSS-compatible syntax.
• It powers many popular CSS frameworks, including Bootstrap (before v5).
• While PostCSS has gained ground, SCSS remains widely used in production teams and legacy projects.

Resources #

Official site
Docs or tutorial
GitHub or interpreter
Community or learning resources