FSCSS - Native Shorthand Features

FSCSS (Figured Shorthand CSS) is a preprocessor that compiles compact syntax into standard CSS. Below are the native shorthand features that cut repetition without inventing a new layout model. The output stays plain CSS.

VS Code highlighting: Figsh.fscss

Property multiplexing (%N)

Apply one value block to several properties:

/* width + height, 100px each */
.square {
  %2(width, height[: 100px;])
}

/* three properties, one value (same to %4, 5, etc)*/
.spaces {
  %3(padding, margin, border-radius[: 25px;])
}

Compiles to normal declarations, less typing when axes or box fields share a value.

Multi-target blocks ($(…))

Attach one rule body to several selectors, or bind a keyframe name to elements:

$(@keyframes slideIn, .box, .card, &[3s linear infinite]) {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

Attribute selectors work the same way:

$(type:submit) {
  background: green;
  color: white;
}

Targets [type=submit] (submit controls) without repeating the full selector form.

Vendor prefix stub (-*-)

.box {
  -*-transform: rotate(45deg);
}

Expands to the usual prefixed + standard transform set your build expects, useful when you still care about older engines.

String repeat (rpt)

.separator::after {
  content: "rpt(10, '— ')";
}

Generates a repeated string at compile time (here, a quick rule line). Same rpt idea appears in selector/loop patterns elsewhere in FSCSS.

Variables ($name)

$dark-bg: #111111;
$light-bg: #ffffff;

body {
  background: $dark-bg;
}

Simple shared tokens; pair with @event when the value depends on a mode or input.

@event: logic in the style layer

$dark-bg: #111111;
$light-bg: #ffffff;

@event themedBackground(mode) {
  if mode: dark {
    return: $dark-bg!;
  }
  el {
    return: $light-bg!;
  }
}

body {
  background: @event.themedBackground(dark);
}

Branch on a parameter, return a value. Good for themes, progress color steps, and other "small decision" styles without a JS class map.

Arrays + random

@arr backgrounds[#3b82f6, #8b5cf6, #06b6d4];

.dynamic-card {
  background: @random(@arr.backgrounds);
}

Declare a list once; pick a value for demos, variants, or generative UI. (Deterministic builds can prefer explicit indexes instead of random.)

Mental model

Feature	Role
%N(props[: value])	Multiplex one value across properties
$(selectors) { }	One body, many targets / keyframe wiring
-*-prop	Prefix expansion
rpt(n, 'str')	Compile-time string (or pattern) repeat
$var	Reusable tokens
@event	Parameterized style decisions
@arr + @random	Lists and picks

FSCSS is a shorthand layer on top of CSS, not a replacement for modern features (:has(), container queries, color-mix, etc.). You write less; the browser still sees normal CSS.

Try it

• Runtime: https://cdn.jsdelivr.net/npm/fscss@1.2.1/runtime.min.js
• CLI: npm i -g fscss, then fscss in.fscss out.css
• Editor: VS Code · Figsh.fscss
• Docs: fscss.devtem.org

Figured shorthand in, standard CSS out.