FSCSS array

#webdev #fscss #frontend #css

FSCSS Shutter: The `@arr()` Method – Bringing Array Power to Your Stylesheets

The world of CSS is constantly evolving, and with tools like Figured Shorthand CSS (FSCSS), developers are getting even more powerful ways to write clean, reusable, and dynamic styles. One such innovation is the @arr() directive, which introduces an array-based syntax for managing reusable value lists. Think of it as bringing a touch of JavaScript's array flexibility directly into your CSS for things like staggered animations, robust theming, and scalable utilities.
Understanding the Syntax
At its core, @arr() is straightforward:
@arr(name[item1, item2, item3, ...]);

name: This is your chosen identifier to reference the array later.
Items: These can be any valid CSS value—numbers, strings, colors, dimensions, etc.
1-Indexed: A crucial point to remember: FSCSS arrays are 1-indexed, meaning the first item is accessed at [1], not [0]. Animating with FSCSS Arrays: A Practical Example Let's dive into an example to see @arr() in action for animations:

@arr(e[0.1, 2.5, 7]);
@arr(col[red, blue, green]);

section {
  background: @arr.col[2]; /* Sets background to blue */
}
section :nth-child(@arr.e[]) {
  animation: spin 3s linear infinite;
  animation-delay: @arr.e[]s;
  rotate: 0;
  background: @arr.col[3]; /* Sets background to green for each animated child */
}

@keyframes spin {
  0%   { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

In this snippet:

We define an array e for animation delays and col for colors.
The section itself gets a blue background from col[2].
The magic happens with section :nth-child(@arr.e[]). This isn't a typo! Using [] without an index triggers a loop. How It Works Under the Hood When FSCSS processes your code:
@arr(e[0.1, 2.5, 7]) effectively creates:
- e[1] = 0.1
- e[2] = 2.5
- e[3] = 7
@arr(col[red, blue, green]) becomes:
- col[1] = red
- col[2] = blue
- col[3] = green You then access individual values using @arr.name[index]. Remember, arrays start at index 1, not 0. Looping with @arr.name[] (The Powerhouse Feature) One of the most powerful features of @arr() is its ability to create automatically expanded blocks when you use [] without a specific index. This is incredibly useful for applying staggered effects to multiple elements. Consider this:

section :nth-child(@arr.e[]) {
  animation-delay: @arr.e[]s;
}

This compiles to:

section :nth-child(1) { animation-delay: 0.1s; }
section :nth-child(2) { animation-delay: 2.5s; }
section :nth-child(3) { animation-delay: 7s; }

FSCSS intelligently iterates through the array, applying each value to the corresponding :nth-child element.
Real-World Use Cases
The possibilities with FSCSS arrays are vast:

Staggered Animations: Easily create complex animation sequences with different delays for each element.
Repeating Sections: Apply changing background colors or other styles to a series of elements.
Themeable Components: Define color palettes in arrays for easy theme switching across your components.
Responsive Breakpoints: Manage breakpoint values in a centralized array for consistent responsive design. Important Notes to Keep in Mind
1-Indexed: We can't stress this enough – FSCSS arrays are 1-indexed.
Out-of-Bounds: Accessing an index that doesn't exist will return undefined and fscss warning in the console, always check your console while writing fscss to follow up.

Synced Effects: For harmonious effects, ensure that multiple arrays used together (e.g., delays and colors) have matching lengths.
@arr.name[] with :nth-child(): This combination is designed to work seamlessly, automatically handling the indexing for you. Best Practices for Array Mastery To get the most out of FSCSS arrays:
Descriptive Naming: Name your arrays clearly (e.g., colors, delays, breakpoints) for better readability.
Check Lengths: If you're relying on fixed indexes, be mindful of your array lengths.
Dynamic Looping: Embrace @arr.name[] for dynamic, loop-based styling to reduce redundancy.
nth-child Integration: Leverage the built-in indexing behavior when using arrays with :nth-child(). The Final Compiled Output (from our example) For clarity, here's what the initial example compiles down to in standard CSS:

section {
  background: blue;
}

section :nth-child(1) {
  animation: spin 3s linear infinite;
  animation-delay: 0.1s;
  rotate: 0;
  background: green;
}

section :nth-child(2) {
  animation: spin 3s linear infinite;
  animation-delay: 2.5s;
  rotate: 0;
  background: green;
}

section :nth-child(3) {
  animation: spin 3s linear infinite;
  animation-delay: 7s;
  rotate: 0;
  background: green;
}

In Summary
The @arr() directive in FSCSS is a game-changer for writing more organized, dynamic, and scalable stylesheets. By introducing a clean, semantic syntax for array-based value referencing and powerful looping capabilities, it brings a touch of JavaScript's flexibility directly into your CSS. Whether you're crafting intricate animations, managing comprehensive themes, or building adaptable UI patterns, FSCSS arrays empower you to write cleaner, more efficient code.