The basic syntax of Sass

Sass is a CSS preprocessor that extends the functionality of CSS, providing features like variables, nesting, and mixins, making stylesheets easier to maintain and write. Below is a detailed introduction to the basic syntax and common usage of Sass.

Variables

Sass uses the $ symbol to define variables, which store values like colors, fonts, and dimensions. Variables can be reused throughout the stylesheet, and changes need only be made in one place.

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
$base-spacing: 12px;

body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $base-spacing;
}

Compiled CSS:

body {
  font-family: Helvetica, sans-serif;
  color: #3498db;
  padding: 12px;
}

Nesting

Sass allows nesting CSS rules, reducing repetitive code. The nested structure intuitively reflects the hierarchy of HTML.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        text-decoration: none;
        padding: 6px 12px;
      }
    }
  }
}

Compiled CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  padding: 6px 12px;
}

Mixins

Mixins allow defining reusable style blocks and support parameter passing. Use @mixin to define and @include to call.

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

.button {
  @include border-radius(5px);
  background: #2ecc71;
  padding: 8px 16px;
}

Compiled CSS:

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #2ecc71;
  padding: 8px 16px;
}

Inheritance

Use @extend to share a set of CSS properties, reducing repetitive code. Inherited styles are merged into the selector.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

Compiled CSS:

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

Operations

Sass supports basic mathematical operations, including addition, subtraction, multiplication, division, and modulo. Units must be consistent during operations.

.container {
  width: 100% - 30px;
  padding: 15px * 2;
  font-size: 12px + 2;
}

Compiled CSS:

.container {
  width: calc(100% - 30px);
  padding: 30px;
  font-size: 14px;
}

Conditional Statements

Use @if, @else if, and @else to implement conditional logic, outputting styles based on different conditions.

$theme: dark;

body {
  @if $theme == dark {
    background: #333;
    color: #fff;
  } @else if $theme == light {
    background: #fff;
    color: #333;
  } @else {
    background: #f9f9f9;
    color: #000;
  }
}

Compiled CSS:

body {
  background: #333;
  color: #fff;
}

Loops

Sass provides @for, @each, and @while loops for generating repetitive styles.

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

$sizes: small, medium, large;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: if($size == large, 24px, 16px);
  }
}

Compiled CSS:

.item-1 {
  width: 20px;
}
.item-2 {
  width: 40px;
}
.item-3 {
  width: 60px;
}

.icon-small {
  font-size: 16px;
}
.icon-medium {
  font-size: 16px;
}
.icon-large {
  font-size: 24px;
}

Functions

Sass includes built-in functions and supports custom functions. Use @function to define and @return to return a value.

@function calculate-rem($size) {
  $rem-size: $size / 16px;
  @return $rem-size * 1rem;
}

body {
  font-size: calculate-rem(18px);
}

Compiled CSS:

body {
  font-size: 1.125rem;
}

Import

Use @import to combine multiple Sass files into one, enabling modular stylesheet management. File extensions can be omitted when importing.

// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';

body {
  color: $primary-color;
}

Compiled CSS:

body {
  color: #3498db;
}

Comments

Sass supports single-line comments // and multi-line comments /* */. Single-line comments are not compiled into CSS.

// This is a single-line comment and won't appear in CSS
/* This is a multi-line comment,
   which will appear in CSS */

Placeholder Selectors

Use % to define placeholder selectors, which only generate CSS code when referenced by @extend.

%button-style {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.submit-btn {
  @extend %button-style;
  background: #2ecc71;
}

.cancel-btn {
  @extend %button-style;
  background: #e74c3c;
}

Compiled CSS:

.submit-btn, .cancel-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
}

.submit-btn {
  background: #2ecc71;
}

.cancel-btn {
  background: #e74c3c;
}

Parent Selector Reference

Use & to reference the parent selector, often used for pseudo-classes and nested contexts.

a {
  color: #3498db;
  &:hover {
    color: #2980b9;
  }
  .sidebar & {
    color: #2c3e50;
  }
}

Compiled CSS:

a {
  color: #3498db;
}
a:hover {
  color: #2980b9;
}
.sidebar a {
  color: #2c3e50;
}