SASS Built-in Modules

 1@use "sass:color";
 2
 3$primary-color: #3498db;
 4$secondary-color: #e74c3c;
 5
 6// Mix two colors with equal weight
 7$blended-color: color.mix($primary-color, $secondary-color, 50%);
 8
 9// Adjust hue by 45 degrees using color.adjust()
10$adjusted-color: color.adjust($primary-color, $hue: 45deg);
11
12div {
13  background-color: $blended-color; // Result of mixing two colors
14  border-color: $adjusted-color;    // Hue adjusted by 45 degrees
15}

 1@use "sass:string";
 2
 3// base values
 4$base-url: "https://example.com";
 5$path: "/assets/style.css";
 6
 7// 1) Combine strings using interpolation and then quote the result
 8$full-quoted: string.quote("#{$base-url}#{$path}");
 9// Example result: "\"https://example.com/assets/style.css\""
10
11// 2) Remove quotes from a quoted string
12$full-unquoted: string.unquote($full-quoted);
13// Example result: https://example.com/assets/style.css
14
15// 3) Get the length of the unquoted string
16$url-length: string.length($full-unquoted);
17// Example output: number of characters in the URL
18
19// 4) Convert strings to upper/lower case and quote for safe CSS output
20$block-name: "main-header";
21// "MAIN-HEADER"
22$upper-quoted: string.quote(string.to-upper-case($block-name));
23// "main-footer"
24$lower-quoted: string.quote(string.to-lower-case("MAIN-FOOTER"));
25
26a::after {
27  /* Use quoted strings for content to ensure valid CSS */
28  content: $full-quoted; /* "https://example.com/assets/style.css" */
29}
30
31:root {
32  /* Insert numeric values with interpolation when needed */
33  --url-length: #{ $url-length }; /* Example: --url-length: 31; */
34}
35
36.header::before {
37  /* Output uppercase version */
38  content: $upper-quoted; /* "MAIN-HEADER" */
39}
40
41.footer::after {
42  /* Output lowercase version */
43  content: $lower-quoted; /* "main-footer" */
44}

 1@use "sass:math";
 2
 3// Using pow() to calculate exponential values
 4$base-size: math.pow(2, 3) * 10px; // 80px
 5
 6// Using sqrt() to compute a square root
 7$root-size: math.sqrt(144) * 1px; // 12px
 8
 9// Using abs() to ensure a positive value
10$offset: math.abs(-15px); // 15px
11
12// Using round(), ceil(), and floor() for different rounding methods
13$rounded: math.round(12.6px); // 13px
14$ceiled: math.ceil(12.1px); // 13px
15$floored: math.floor(12.9px); // 12px
16
17.container {
18  width: $base-size; // 80px
19  height: $root-size; // 12px
20  margin-left: $offset; // 15px
21}
22
23.values {
24  /* Demonstrating different rounding operations */
25  padding: $rounded;  // 13px
26  border-width: $ceiled; // 13px
27  margin-top: $floored; // 12px
28}

 1@use "sass:list";
 2
 3// Base list
 4$colors: ("red", "blue", "green");
 5
 6// Add an element to the end of the list
 7$colors-appended: list.append($colors, "yellow");
 8// ("red", "blue", "green", "yellow")
 9
10// Add an element to the beginning of the list using join()
11$colors-prepended: list.join(("black",), $colors);
12// ("black", "red", "blue", "green", "yellow")
13
14// Join two lists together
15$extra-colors: ("pink", "cyan");
16$merged-colors: list.join($colors-prepended, $extra-colors);
17// ("black", "red", "blue", "green", "yellow", "pink", "cyan")
18
19// Get list length
20$total-length: list.length($merged-colors);
21
22// Example usage in a loop: assign each color to a list item
23ul {
24  @for $i from 1 through $total-length {
25    li:nth-child(#{$i}) {
26      /* Get the color at index $i */
27      color: list.nth($merged-colors, $i);
28    }
29  }
30}

 1@use "sass:map";
 2
 3// Base theme map
 4$theme-colors: (
 5  "primary": #3498db,
 6  "secondary": #e74c3c
 7);
 8
 9// Update or add a value using set()
10$updated-theme: map.set($theme-colors, "warning", #f1c40f);
11// Map now has "warning": #f1c40f added
12
13// Get a value from the map
14$primary-color: map.get($updated-theme, "primary");
15
16// Get all keys from the map
17$all-keys: map.keys($updated-theme);
18// Example: ("primary", "secondary", "warning")
19
20button {
21  /* Apply color retrieved from the theme map */
22  background-color: $primary-color;
23}
24
25.debug {
26  /* Print keys as content for demonstration */
27  content: "#{$all-keys}";
28}

 1@use "sass:selector";
 2
 3// Nest selectors (combine parent and child)
 4$nested-selector: selector.nest(".parent", ".child");
 5// Result: ".parent .child"
 6
 7// Check if one selector is a superselector of another
 8$is-super: selector.is-superselector(".parent", $nested-selector);
 9// true because ".parent" matches all elements that
10// ".parent .child" can match as an ancestor
11
12// Replace part of a selector with another selector
13$replaced-selector: selector.replace(".parent .child", ".child", ".item");
14// Result: ".parent .item"
15
16// Use generated selectors in actual CSS output
17#{$nested-selector} {
18  /* Applies to .parent .child */
19  color: red;
20}
21
22@if $is-super {
23  .info::after {
24    /* Demonstrate boolean result */
25    content: "parent is a superselector";
26  }
27}
28
29#{$replaced-selector} {
30  /* Applies to .parent .item */
31  background: blue;
32}

 1@use "sass:meta";
 2
 3// Define a global variable
 4$color: #3498db;
 5
 6// Check if a variable exists in the current scope
 7@if meta.variable-exists("color") {
 8  body {
 9    /* Apply style only if $color exists */
10    background-color: $color;
11  }
12}
13
14// Create a local variable inside a block
15.container {
16  $local-size: 20px;
17
18  @if meta.variable-exists("local-size") {
19    /* Demonstrates detection of local variable */
20    width: $local-size;
21  }
22}
23
24// Check if a global variable exists
25$result: meta.global-variable-exists("color"); // true
26
27.debug {
28  /* Use inspect() to output the inspected value as a string */
29  content: meta.inspect($result); // "true"
30}

 1@use "sass:color";
 2@use "sass:math";
 3@use "sass:list";
 4
 5// Base color list
 6$base-colors: (#3498db, #e74c3c, #2ecc71);
 7$darkened-colors: (); // Empty list for processed colors
 8
 9// Loop through each base color and darken it by 10%
10@each $color in $base-colors {
11  $darkened-colors: list.append(
12    $darkened-colors,
13    // Darken color by decreasing lightness by 10%
14    color.adjust($color, $lightness: -10%)
15  );
16}
17
18div {
19  // Apply each processed color to a corresponding <div>
20  @for $i from 1 through list.length($darkened-colors) {
21    &:nth-child(#{$i}) {
22      // Set color by index
23      background-color: list.nth($darkened-colors, $i);
24    }
25  }
26}