Ditch the Repetition! Introducing @arr for Smart CSS with FSCSS

Hey everyone! 👋 Ever find yourself writing the same CSS properties over and over for different elements? Or manually creating nth-child rules for a series of items? There's a smarter way!

I wanted to share a super-handy feature from FSCSS that's a game-changer for writing clean, efficient styles: the @arr array declaration.

What is `@arr`?

It's a simple, powerful way to declare and reuse lists of values directly in your CSS. Think of it as a variable for a series of values—perfect for colors, spacings, font stacks, or any repeatable pattern.

🔧 The Basic Syntax
Declaring an array is as simple as:

@arr(arrayName[value1, value2, value3,...])

You can then use it in some ways:

@arr.arrayName[]: Iterates through the values, perfect for applying a different value to each element in a sequence.
@arr.arrayName(separator): Expands all values at once, great for creating a single string like a font stack or a list of properties.
@rr.arrayName[index], 1-Indexed: Access begins from index [1], not [0].FSCSS arrays are 1-indexed Accessing out-of-bound indexes returns undefined

Let's dive into some examples to see how this works in practice.

🎨 Example 1: Sequential Styling
Imagine you have a list and want to give each item a different color without writing a separate rule for each one.

Before @arr:

ul li:nth-child(1) {
  color: red;
}
ul li:nth-child(2) {
  color: green;
}
ul li:nth-child(3) {
  color: blue;
}

With @arr:
First, declare your color array:

@arr(colors[red, green, blue])

Then, use the [] syntax to iterate through it with your selector:

ul li:nth-child(@arr.colors[]) {
  background-color: @arr.colors[];
}

Result:

The first li gets background-color: red;
The second gets background-color: green;
The third gets background-color: blue;

So clean! ✨

🖋️ Example 2: Creating a Font Stack
This is perfect for consolidating fallback fonts into a single, reusable variable.

Declare your font array:

@arr(fonts[Arial, 'Helvetica Neue', sans-serif])

Then, use the () syntax to expand all values into a single property:

body {
  font-family: @arr.fonts(,);
}

Result:

font-family: Arial, 'Helvetica Neue', sans-serif;

No more re-typing that long list of fonts!

📏 Example 3: Dynamic CSS with Prefixes
You can even add custom prefixes and suffixes when you expand an array, which is great for generating dynamic properties.

Declare a margins array:

@arr(margins[10px, 20px, 30px])

Use the () syntax with a custom prefix margin::

div {
  content: "margin: @arr.margins(;margin: );";
}

Result:

content: "margin: 10px; margin: 20px; margin: 30px;";

This is a powerful pattern for generating responsive units or dynamic classes.

✨ Why This Matters

DRY (Don't Repeat Yourself): Define your values once and reuse them everywhere.
Maintainability: Need to change a color or a font? Update the array declaration, and it's changed everywhere.
Readability: Your CSS becomes much cleaner and easier to understand.
Automation: @arr handles the repetition for you, saving you time and effort.

If you're using FSCSS, give @arr a try—it'll simplify your workflow and make your stylesheets much smarter.