Sass Cheat Sheet

Sass (Syntactically Awesome Stylesheets) is a popular CSS preprocessor that adds features like variables, nesting, and mixins to make stylesheets more maintainable and easier to write. Here’s a cheat sheet for Sass:

Variables

$primary-color: #3498db;
$font-family: 'Arial', sans-serif;

body {
  color: $primary-color;
  font-family: $font-family;
}

Nesting

nav {
  background-color: #333;

  ul {
    list-style-type: none;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

Mixins

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

Partials

_variables.scss:

$primary-color: #3498db;
$font-family: 'Arial', sans-serif;

styles.scss:

@import 'variables';

body {
  color: $primary-color;
  font-family: $font-family;
}

Operators

$base-padding: 10px;

article {
  padding: $base-padding * 2;
}

Control Directives

@if, @else if, @else:

$theme: 'dark';

body {
  @if $theme == 'dark' {
    background-color: #333;
    color: #fff;
  } @else {
    background-color: #fff;
    color: #333;
  }
}

@for:

@for $i from 1 through 5 {
  .col-#{$i} {
    width: 20px * $i;
  }
}

Extends

%clearfix {
  overflow: auto;
  zoom: 1;
}

.container {
  @extend %clearfix;
}

Functions

@function calculate-width($columns, $total-columns: 12) {
  @return percentage($columns / $total-columns);
}

.column {
  width: calculate-width(4);
}

Interpolation

$property: 'color';

body {
  #{$property}: #3498db;
}

Importing CSS Files

@import 'reset.css';

Comments

// Single-line comment

/*
 * Multi-line
 * comment
 */

Output Style

Expanded:

sass input.scss output.css --style expanded

Compressed:

sass input.scss output.css --style compressed

This Sass cheat sheet covers some of the essential features and syntax. Sass provides a powerful set of tools to enhance your CSS workflow. It’s recommended to explore the official Sass documentation for a comprehensive understanding of its features and capabilities.