DEV Community

FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on Originally published at fscss.devtem.org

FSCSS loops

#fscss #tutorial #webdev #css

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/fscss@1.2.5/runtime.min.js" async></script>
Enter fullscreen mode Exit fullscreen mode

Or compile: npm install -g fscss@1.2.5 → 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;])
}
Enter fullscreen mode Exit fullscreen mode

→ 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!];
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

→ 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[];
  --val-@arr.idx[]: @arr.values[$i!]px;
}")
Enter fullscreen mode Exit fullscreen mode

Pair with num() for spacing math

5. empty{ /* preserve */ }

Loop machinery can look like selectors. A leading:

empty{ /* preserve */ }
Enter fullscreen mode Exit fullscreen mode

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

next

Resource URL
Loops (canonical) fscss.devtem.org/loop
Arrays /arrays
Array methods /array-methods
num & count /num
Examples /examples 
npm install fscss
Enter fullscreen mode Exit fullscreen mode

Top comments (0)