Introduction to FSCSS Arrays

FSCSS Arrays let you store organized collections of values that can be reused throughout your stylesheets. Perfect for color palettes, spacing systems, animation timing, and any situation where you need consistent, reusable values.

Organized Collections

Store related values together in logical groups

Dynamic Access

Access values by index for flexible styling

Combination Power

Combine with @random, @fun, and other FSCSS features

Clean Syntax

Intuitive array declaration and access patterns

Basic Array Declaration

Creating and Using Arrays

@arr

The simplest form of FSCSS arrays. Define collections of values and access them by index throughout your stylesheet.

FSCSS 
/* Define arrays */
@arr(colors[#3b82f6, #8b5cf6, #06b6d4, #10b981]);
@arr(spacing[0.5rem, 1rem, 1.5rem, 2rem, 3rem]);
@arr(font-sizes[12px, 14px, 16px, 18px, 24px, 32px]);

/* Use array values */
.primary-button {
  background: @arr.colors[1];
  color: white;
  padding: @arr.spacing[2] @arr.spacing[3];
  font-size: @arr.font-sizes[3];
  border-radius: 4px;
}

.secondary-button {
  background: @arr.colors[2];
  color: white;
  padding: @arr.spacing[1] @arr.spacing[2];
  font-size: @arr.font-sizes[2];
}

Dynamic Array Usage

Auto-Indexing and Looping

Dynamic Arrays

Arrays can automatically iterate through their values when used with empty brackets, making them perfect for generating multiple similar styles with variations.

FSCSS 
/* Define arrays for staggered animations */
@arr(delays[0.1s, 0.3s, 0.5s, 0.7s, 0.9s]);
@arr(colors[#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6]);
/* helper for indexes */
@arr(indexes[count(5, 1)])
/* Auto-index through array values */

.loading-dot:nth-child(@arr.indexes[]) {
/* capture current index using FSCSS scope variable*/
  $index: @arr.indexes[];
  animation: bounce 1.5s infinite @arr.delays[$index!];
  background: @arr.colors[$index!];
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

Arrays with @random

Random Value Selection

@random + Arrays

Combine arrays with the @random function to create dynamic, ever-changing styles that select random values from your predefined collections.

FSCSS 
/* Define arrays of possible values */
@arr(backgrounds[#3b82f6, #8b5cf6, #06b6d4, #10b981, #f59e0b, #ef4444]);
@arr(rotations[0deg, 5deg, -5deg, 10deg, -10deg]);
@arr(scales[1, 1.05, 1.1, 0.95, 0.9]);

/* Apply random values from arrays */
.dynamic-card {
/* array join method */
  background: @random([@arr.backgrounds(,)]);
  transform: 
    rotate(@random([@arr.rotations(,)])) 
    scale(@random([@arr.scales(, )]));
  padding: 2rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.dynamic-card:hover {
  transform: 
    rotate(@random([@arr.rotations(,)])) 
    scale(@random([@arr.scales(, )]));
}
Dynamic Card

Arrays with @fun

Function-Based Arrays

@fun + Arrays

Combine arrays with the @fun function to create reusable collections of related values that can be accessed through a clean, organized interface.

FSCSS 
/* Define function-based arrays */
@fun(theme){
  primary: #3b82f6;
  secondary: #8b5cf6;
  accent: #06b6d4;
  success: #10b981;
  warning: #f59e0b;
  danger: #ef4444;
}

@fun(spacing){
  xs: 0.5rem;
  sm: 1rem;
  md: 1.5rem;
  lg: 2rem;
  xl: 3rem;
}

/* Use function-based arrays */
.alert {
  padding: @fun.spacing.md @fun.spacing.lg.value;
  border-radius: 4px;
  margin-bottom: @fun.spacing.sm.value;
}

.alert-success {
  background: @fun.theme.success.value;
  color: white;
}

.alert-warning {
  background: @fun.theme.warning.value;
  color: white;
}

.alert-danger {
  background: @fun.theme.danger.value;
  color: white;
}
Success Alert
Warning Alert
Danger Alert

Array Types Comparison

Choosing the Right Array Type

Different array types serve different purposes. Choose the right one for your use case.

Array Type Syntax Best For Example Use Case
Basic Arrays @arr(name[val1, val2]) Simple value collections Color palettes, spacing scales
Dynamic Arrays @arr.name[] (auto-index) Generating multiple similar styles Staggered animations, grid systems
@random Arrays @random([@arr.name(,)]) Dynamic, varied styling Random backgrounds, interactive elements
Arrays join @arr.name(separator) separate array with words or character commonly used with random and similar functions
@fun Arrays @fun(name){key: value} Organized design systems Theming, design tokens, component libraries

Real World Examples

Practical Applications

Here are some practical examples of how arrays can be used in real projects:

Design System

@arr(colors[#1e40af, #1d4ed8, #3b82f6, #60a5fa]);
@arr(spacing[0.25rem, 0.5rem, 1rem, 1.5rem, 2rem]);

.btn {
  padding: @arr.spacing[2] @arr.spacing[3];
  border-radius: 4px;
  font-weight: 600;
}

.btn-primary {
  background: @arr.colors[2];
  color: white;
}

Animation System

@arr(delays[0s, 0.1s, 0.2s, 0.3s, 0.4s]);
@arr(durations[0.3s, 0.5s, 0.7s, 1s]);

.fade-in:nth-child(@arr.delays[]) {
  animation: fadeIn @arr.durations[2] @arr.delays[];
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Grid System

@arr(columns[1, 2, 3, 4, 6, 12]);
@arr(gaps[0.5rem, 1rem, 1.5rem, 2rem]);

.grid-@arr.columns[] {
  display: grid;
  grid-template-columns: repeat(@arr.columns[], 1fr);
  gap: @arr.gaps[2];
}

Best Practices

Using Arrays Effectively

Follow these guidelines to make the most of FSCSS arrays in your projects.

Naming Conventions

  • Use plural names: colors, spacings, sizes
  • Be descriptive: primary-colors vs colors1
  • Group related arrays with prefixes

Organization

  • Define arrays at the top of your file
  • Group related arrays together
  • Use comments to document array purposes
  • Consider using @fun for complex design systems

Advanced Tips

  • Combine with @random for dynamic interfaces
  • Use auto-indexing for repetitive patterns
  • Create array-based design systems
  • Document your arrays for team collaboration