SCSS Cheat Sheet: Key Features of SCSS

SCSS (Sassy CSS) is a powerful CSS preprocessor widely adopted in modern web development due to its enhanced features over traditional CSS. It extends standard CSS syntax by introducing advanced capabilities such as variables, nesting, mixins, inheritance, and functions, allowing developers to write more efficient, modular, and maintainable stylesheets.

In this article, I’ve compiled all the essential SCSS features that are useful for building powerful front-end applications.

Introduction to SCSS

SCSS, or Sassy CSS, serves as a preprocessor that compiles down to plain CSS, adding valuable features which simplify CSS coding, enhance maintainability, and improve readability.

Key Features of SCSS

Variables

Variables in SCSS enable developers to define reusable values, promoting consistency across stylesheets.

// Declaration
$primary-color: #336699;
$base-padding: 16px;

// Usage
.button {
  background-color: $primary-color;
  padding: $padding-base;
}

Nesting

Nesting mirrors HTML structure in SCSS, resulting in clear and maintainable styles:

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: #444;
        &:hover {
          color: #000;
        }
      }
    }
  }
}

Mixins

Mixins encapsulate reusable blocks of CSS code, parameterized for flexibility:

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

.container {
  @include flex-center(space-between);
}

Functions

SCSS functions allow custom calculations or transformations:

@function px-to-rem($px, $base: 16px) {
  @return ($px / $base) * 1rem;
}

h1 {
  font-size: px-to-rem(32px); // Outputs 2rem
}

Mixins and Inheritance

Mixins encapsulate reusable code, while inheritance allows selectors to extend common styles:

// Mixin example
@mixin bordered($width, $color) {
  border: $width solid $color;
}

.button {
  @include bordered(1px, #000);
}

// Inheritance using placeholder selectors
%base-card {
  padding: 10px;
  border-radius: 8px;
}

.card-primary {
  @extend %base-button;
  background-color: blue;
}

.card-secondary {
  @extend %base-button;
  background-color: gray;
}

Conditionals and Loops

Conditionals and loops provide powerful control flows in SCSS:

// Conditional
@mixin theme($theme-type) {
  @if $theme-type == dark {
    background-color: #000;
    color: #fff;
  } @else if $theme-type == light {
    background-color: #fff;
    color: #000;
  }
}

body {
  @include theme(dark);
}

// Loops
@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

Maps

Maps store key-value pairs and are useful for theme definitions or grouped data:

$colors: (
  primary: blue,
  secondary: gray,
  danger: red
);

.button-primary {
  background-color: map-get($colors, primary);
}

Project Structure

Maintaining a professional file structure helps organize large projects effectively:

styles/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   ├── _footer.scss
│   └── _grid.scss
├── pages/
│   ├── _home.scss
│   └── _about.scss
└── main.scss

Compilation

SCSS needs compilation into standard CSS using tools such as Dart Sass or Node-Sass:

# Basic compilation
sass input.scss output.css

# Watch mode for automatic recompilation
sass --watch input.scss:output.css

Common build tools: Webpack, Parcel, Vite.

Best Practices

• Limit nesting to improve clarity (maximum three levels).
• Reuse code efficiently through mixins, inheritance, and functions.
• Maintain readability and modularity by organizing styles into separate files.
• Document SCSS functions and mixins clearly for team collaboration.

Conclusion

SCSS significantly enhances CSS development by introducing features that enable cleaner, reusable, and maintainable codebases, making it a fundamental skill for modern web developers.

Learn more from the video below: