🚀 A Quick Look at FSCSS Styling — Arrays & Console Logging

FSCSS (Figured Shorthand CSS) is a way to write expressive CSS with superpowers—functions, arrays, string helpers, and even inline JavaScript execution. Today, let’s look at one small but powerful feature: arrays in CSS.

• ✅ Declaring an Array in FSCSS

FSCSS lets you declare an array using @arr:

@arr fruits[
  apple,
  orange,
  banana,
]

Now you have an array called fruits that you can reuse anywhere in your stylesheet.

---

• 🖨 Logging the Array with exec()

FSCSS comes with an exec() function that lets you run small JavaScript helpers directly in CSS.

Example: logging the array to your console:

exec(_log, "@arr.fruits")

Console output:

apple orange banana

---

• 🍊 Using Array Methods (like .join())

FSCSS arrays even support helper functions such as .join() (e.g, @arr.myArray(separator)):

exec(_log, "@arr.fruits(\n)")

Output:

apple
orange
banana

This is great when debugging or organizing grouped values such as colors, sizes, breakpoints, or component variants.

---

How to use this