FSCSS loops

FSCSS loops: @arr, %n(), rpt(), and inline()

source: fscss.devtem.org/loop

FSCSS loops expand arrays into properties, selectors, or value fragments. They run at compile time (CLI) or in the browser runtime. The browser only ever sees plain CSS.

This post is a short tour. See The full cheat sheet.

Setup

<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js" async></script>

Or compile: npm install -g [email protected] → fscss in.fscss out.css.

Rules of thumb

• Arrays are 1-indexed.
• [] iterates; [n] is a fixed index.
• Index lists: count(@arr.name!.length) or count(n, 1).
• Put empty{ /* preserve */ } before many loop-driven rules so intermediate tokens are not treated as selectors.
• %n → properties · rpt + @arr[] → selectors · inline("@arr[] { }") → fragments inside values.

1. Property loop — %n()

Same value on many properties:

@arr sizing[width, height, max-width, max-height]
$sizing: @arr.sizing!;

.box {
  bg: red;
  %4($sizing.list[: 200px;])
}

→ width / height / max-width / max-height: 200px.

Classics: %2(width, height[: 100px;]). Also see 1.2.5 shorthands.

2. Auto-index — :nth-child

@arr delays[0.1s, 0.3s, 0.5s, 0.7s]
@arr colors[#ef4444, #f59e0b, #10b981, #3b82f6]
@arr indexes[count(@arr.colors!.length, 1)]

empty{ /* preserve */ }

.loading-dot:nth-child(@arr.indexes[]) {
  $index: @arr.indexes[];
  animation: bounce 1.5s infinite @arr.delays[$index!];
  background: @arr.colors[$index!];
}

One rule per index — staggered delays and colors without copy-paste.

3. Nested selectors — rpt()

@arr colors[orange, purple, indigo, blue]
@arr levels[count(@arr.colors!.length)]

empty{ /* preserve */ }

rpt(@arr.levels[], "div ") {
  background: @arr.colors[@arr.levels[]];
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}

→ div, div div, div div div, …

Guide: nested-loop.

4. Value fragments — inline()

Loops inside a declaration (custom props, clip-path, chart polygons):

@arr values[10, 20, 30, 40]
@arr idx[count(@arr.values!.length, 1)]

inline("empty{}
@arr.idx[] {
  $i: @arr.idx[];
  [email protected][]: @arr.values[$i!]px;
}")

Pair with num() for spacing math

5. empty{ /* preserve */ }

Loop machinery can look like selectors. A leading:

empty{ /* preserve */ }

keeps rpt / auto-index / inline blocks from eating the surrounding structure (1.2.1+)

next

npm install fscss