Sass - Script

Sass - Script

SassScript is the scripting language used within Sass files. It allows you to compute values dynamically, manipulate data, and add logic to your stylesheets. SassScript expressions can be used in property values, variable assignments, and within Sass directives like @if, @for, @each, @mixin, and @function.

Key Components of SassScript:

1. Variables ($)

Variables store reusable values. They start with a $ sign.

$primary-color: #3498db;
$base-font-size: 16px;
$base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;

body {
  font-family: $base-font-stack;
  font-size: $base-font-size;
  color: darken($primary-color, 20%);
}

2. Data Types

SassScript supports several data types:

• Numbers: Integers (10, 0, -5) or decimals (1.5, 0.2), potentially with units (10px, 1.5em, 80%, 2s). Sass understands units and can perform calculations with them.
• Strings: Sequences of characters. Can be quoted ("Hello", 'World') or unquoted (bold, center). Quoted strings are generally safer, especially if they contain spaces or special characters. Use interpolation #{} to embed expressions within quoted strings.
• Colors: Can be specified as hex codes (#ff0000, #f00), RGB (rgb(255, 0, 0)), RGBA (rgba(0, 0, 255, 0.5)), HSL (hsl(120, 100%, 50%)), HSLA (hsla(0, 100%, 50%, 0.8)), or named colors (red, blue).
• Booleans: true or false.
• Null: Represents an empty or missing value (null). Evaluates to false in conditions.
• Lists: Ordered sequences of values, separated by spaces or commas. Can contain mixed data types. Example: 10px 20px 0 5px (space-separated), Helvetica, Arial, sans-serif (comma-separated). Use functions from sass:list to manipulate.
• Maps: Collections of key-value pairs. Keys must be unique, values can be any data type. Example: (key1: value1, 'key 2': value2, 3: value3). Use functions from sass:map to manipulate.

3. Operations

SassScript supports various operators:

• Mathematical: +, -, *, /, % (modulo). Work on numbers, respecting units. Division / might require parentheses or the math.div() function in modern Sass to avoid ambiguity with the CSS shorthand separator.
• Comparison: == (equal), != (not equal), <, <=, >, >=. Work on various data types.
• Logical: and, or, not. Used in conditional logic.
• String Concatenation: + joins strings. Numbers and other types are often automatically converted to unquoted strings in concatenation.

$base-padding: 10px;
$double-padding: $base-padding * 2; // 20px
$font-size: 16px;
$line-height: $font-size * 1.5; // 24px

$is-large: $font-size > 14px; // true

.element {
  padding: $double-padding;
  line-height: $line-height;
  font-weight: if($is-large, bold, normal); // 'bold'
}

4. Parentheses ()

Used to control the order of operations in complex expressions, just like in mathematics.

width: (100% / 3) - 10px * 2;

5. Functions

Sass provides many built-in functions (organized into modules like sass:math, sass:color, sass:string, etc.) and allows defining custom functions (@function). Functions take arguments and return a value.

@use 'sass:color';

$link-color: blue;

.link {
  color: $link-color;
  &:hover {
    color: color.adjust($link-color, $lightness: 15%); // Use built-in color function
  }
}

6. Interpolation #{}

Allows inserting the result of a SassScript expression (usually a variable) into selectors, property names, or quoted strings.

$name: 'icon';
$property: 'border-radius';

.{$name}-user {
  #{$property}: 5px;
  background-image: url("/images/#{$name}.png");
}

7. Parent Selector & in SassScript

While primarily used in selectors, the & can sometimes be used within SassScript (though less common) if you need to manipulate the current parent selector string. Functions like selector.append() or selector.nest() are often used for this.

8. Variable Defaults (!default)

Assigns a value to a variable only if that variable hasn’t been previously assigned or is null. Crucial for creating configurable libraries or frameworks.

$user-font-size: 18px;

// Library default
$base-font-size: 16px !default;

body {
  // $base-font-size remains 16px because it was already defined
  font-size: $base-font-size;
}

// If $user-font-size was not defined above, $base-font-size would become 18px here.
$base-font-size: $user-font-size !default;

SassScript provides the dynamic capabilities that make Sass a powerful preprocessor, enabling programmatic generation of CSS.