FSCSS Arrays, Methods & @define

Where arrays show up in the ecosystem

Arrays are core language features. Modules build on them for data, colors, and generated CSS:

Module	Array usage	Links
st-core@v2	Series data, `count(length)`, point vars, multi-line charts	GitHub · Builder
overlapui	Letter/color maps for `data-alph`, palette indexes	GitHub · npm
circle-progress	Ranges / multi-slice setups via defines + tokens	GitHub
icon-mask	Icon packs / named sets (module tokens + classes)	GitHub
patterns	Phrase libraries; pair with `pattern()` + define	GitHub
/ libraries	More packs and templates	/libraries · /libraries

Runtime: https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js

1. Basic arrays (`@arr`)

Arrays are 1-indexed, string-native collections.

@arr colors[#3b82f6, #8b5cf6, #06b6d4, #10b981];
@arr spacing[0.5rem, 1rem, 1.5rem, 2rem];
@arr sizes[8, 12, 16, 24];

.primary {
  background: @arr.colors[1];          /* first item */
  padding: @arr.spacing[2] @arr.spacing[3];
}

Access modes

@arr.name — direct output (list context)
@arr.name[1] — specific index (1-based)
@arr.name[] — auto-loop (rule expands once per item)
@arr.name! — method access mode

2. Array methods (v1.1.14+)

Append ! to enable methods. Methods return strings (no chaining — use derived arrays instead).

Method	Description	Example
`.length`	Item count	`@arr.n!.length`
`.first` / `.last`	Ends of list	`@arr.n!.first`
`.list`	Comma-separated	`@arr.n!.list`
`.join(sep)`	Custom join	`@arr.n!.join(+)`
`.reverse`	Reverse order	`@arr.n!.reverse`
`.shuffle` / `.sort` / `.unique`	Reorder / dedupe	`@arr.n!.sort`
`.indices`	1-based indices	`1,2,3`
`.randint`	One random item	`@arr.n!.randint`
`.segment`	Wrap each in `[]`	`[a][b][c]`
`.sum` / `.min` / `.max`	Numeric helpers	with `num()`
`.unit(val)`	Append unit to each	`@arr.n!.unit(px)`
`.prefix(v)`	Prefix each	`btn-A,btn-B`
`.surround(b,a)`	Wrap each	`[A][B][C]`

Mutation

@arr.name!+[item4, item5]     /* append */
@arr.name!-[2]                /* remove index 2 (1-based) */

3. Derived arrays (v1.2.3+)

Create a new @arr from another array’s method result. Official way to “chain”.

@arr colors[#1E2783, #8C29B2, #C41348]

@arr reversed[@arr.colors!.reverse]
@arr asList[@arr.colors!.list]
@arr idx[count(@arr.colors!.length, 1)]   /* → 1,2,3 */

@arr more[#0ea5e9]
@arr.colors!+[@arr.more!.list]

exec(_log, "@arr.reversed!.list")
exec(_log, "@arr.idx!.list")

Common pattern (st-core charts, staggered UI, overlap color maps):

@arr data[30, 55, 80, 45]
@arr idx[count(@arr.data!.length, 1)]

See num() & count() and Loops.

4. `@define` — parameterized blocks

Reusable generators. Parameters via @use(param). Full reference: /define.

Simple property define

@define card(bg: black, color: white, pad: 20px, bd-r: 10px) {
  background: @use(bg);
  border-radius: @use(bd-r);
  padding: @use(pad);
  color: @use(color);
}

.box {
  @card(#007999)
}

Block define (backticks)

@define mobile(size){`
@media (max-width: @use(size)) {
  .container { padding: 10px; }
}
`}

@mobile(768px)

`@define` + arrays

@define abc(arr){`
empty{ /* preserve */ }
@arr i-levels[count(@arr.@use(arr)!.length)]
.p@arr.@use(arr)[@arr.i-levels[]] {
  --@arr.i-levels[]: @arr.@use(arr)[@arr.i-levels[]];
}
`}

@arr arr[RED, BLUE, GREEN]
@abc(arr)

st-core-style point normalization

@define st-chart-points(p){`
inline("
  @arr @use(p)-idx[count(@arr.@use(p)!.length, 1)]
  empty-@arr.@use(p)-idx[] {
    $idx: @arr.@use(p)-idx[];
    --st-p$idx: num(100 - @arr.@use(p)[$idx])%;
  }
")
`}

Reusable mutation helpers

@define add(arr, new) {
  @arr.@use(arr)!+@use(new)
}

@define remove(arr, index) {
  @arr.@use(arr)!-[@use(index)]
}

@arr a[A, B, C]
@add(a, [D])
@remove(a, 2)

Quick mental model

Feature	Purpose	Key syntax
`@arr`	Store lists	`@arr name[val1, val2]`
Methods (`!`)	Transform / inspect	`@arr.name!.reverse`
Derived arrays	New array from method	`@arr new[@arr.old!.list]`
Auto-loop	Expand per item	`@arr.name[]`
`@define`	Reusable generators	`@use(param)`

Together these power nested selectors, charts, staggered animation, design tokens, and module libraries.

Arrays, methods & @define