Local Variables

Local variables can be defined inside @fun bodies.

Rules

Local variables are only valid inside the function body where they are defined
They cannot be accessed from outside the function
They are not registered as global variables; they are not written to :root
$name is the definition syntax; ${name} is the access syntax — the two cannot be used interchangeably
If two local variables with the same name are defined in the same function, the second overwrites the first

Syntax

Local variables are defined with the $name syntax and used with ${name}.

Type	Definition	Access
Scalar	`$x: 12px;`	`${x}`
Array	`$arr: [1, 2, 3];`	`${arr[0]}`
Object	`$obj: { key: value; };`	`${obj.key}`

Scalar Local Variable

Stores a single value. Can be a constant or an expression derived from a parameter.

@fun: make-spacing(base) {
  $sm: ${base};
  $md: ${base * 2};
  $lg: ${base * 4};

  .space-sm { margin: ${sm}px; }
  .space-md { margin: ${md}px; }
  .space-lg { margin: ${lg}px; }
}

@fun.make-spacing(4);

Generated CSS:

.space-sm { margin: 4px; }
.space-md { margin: 8px; }
.space-lg { margin: 16px; }

Array Local Variable

Stores a series of values. Accessed with an index.

@fun: make-palette(base) {
  $stops: [10, 20, 40];

  @for(s, ${stops}) {
    .bg-${s} {
      opacity: ${s / 100};
      background: ${base};
    }
  }
}

@fun.make-palette(#2060ff);

Generated CSS:

.bg-10 { opacity: 0.1; background: #2060ff; }
.bg-20 { opacity: 0.2; background: #2060ff; }
.bg-40 { opacity: 0.4; background: #2060ff; }

Direct access to a specific index:

@fun: first-and-last(a, b, c) {
  $vals: [${a}, ${b}, ${c}];

  .first { color: ${vals[0]}; }
  .last  { color: ${vals[2]}; }
}

@fun.first-and-last(red, green, blue);

Generated CSS:

.first { color: red; }
.last  { color: blue; }

Object Local Variable

Stores key-value pairs. Accessed with .key syntax.

@fun: make-button(variant) {
  $styles: {
    bg: #2060ff;
    fg: #ffffff;
    radius: 6px;
  };

  .btn-${variant} {
    background: ${styles.bg};
    color: ${styles.fg};
    border-radius: ${styles.radius};
  }
}

@fun.make-button(primary);

Generated CSS:

.btn-primary {
  background: #2060ff;
  color: #ffffff;
  border-radius: 6px;
}