FSCSS Random - Dynamic Styling

Introduction to FSCSS Random

FSCSS @random brings dynamic, unpredictable styling to your CSS. Generate random values for any property to create interfaces that feel alive, unique, and engaging on every page load.

Dynamic Values

Generate different styles on each compilation

Color Variations

Create unique color combinations automatically

Creative Designs

Perfect for artistic and experimental interfaces

Interactive Elements

Combine with hover effects for dynamic interactions

Basic @random Usage

Simple Random Value Generation

@random

The simplest form of @random selects values from arrays to create dynamic styles that change on each compilation.

FSCSS

/* Basic random color generation */
.dynamic-button {
  background: @random([#3b82f6, #8b5cf6, #06b6d4, #10b981, #f59e0b, #ef4444]);
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  margin: 0.5rem;
  transition: all 0.3s ease;
}

.dynamic-button:hover {
  background: @random([#1d4ed8, #7c3aed, #0891b2, #047857, #d97706, #dc2626]);
  transform: translateY(-2px);
}

/* Random sizes and rotations */
.random-box {
  width: @random([100px, 150px, 200px, 250px]);
  height: @random([100px, 150px, 200px, 250px]);
  transform: rotate(@random([0deg, 15deg, -15deg, 30deg, -30deg]));
  background: @random([#3b82f6, #8b5cf6, #06b6d4]);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

/* Note: @random generates different values on each compilation */
.dynamic-button {
  background: #8b5cf6; /* Random selection */
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  margin: 0.5rem;
  transition: all 0.3s ease;
}

.dynamic-button:hover {
  background: #7c3aed; /* Random selection */
  transform: translateY(-2px);
}

.random-box {
  width: 200px; /* Random selection */
  height: 150px; /* Random selection */
  transform: rotate(15deg); /* Random selection */
  background: #06b6d4; /* Random selection */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

Random Box

@random with Arrays

Organized Random Value Collections

@random + Arrays

Combine @random with arrays to create organized collections of possible values for more controlled randomness.

FSCSS

/* Define organized arrays for random selection */
@arr(primary-colors[#3b82f6, #1d4ed8, #60a5fa, #93c5fd]);
@arr(accent-colors[#8b5cf6, #7c3aed, #a78bfa, #c4b5fd]);
@arr(sizes[1rem, 1.25rem, 1.5rem, 1.75rem, 2rem]);
@arr(border-radius[4px, 8px, 12px, 16px, 24px]);

/* Use arrays with @random */
.random-card {
  background: @random([@arr.primary-colors(,)]);
  color: white;
  padding: 2rem;
  border-radius: @random([@arr.border-radius(,)]);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 1rem;
  transition: all 0.3s ease;
}

.random-card:hover {
  background: @random([@arr.accent-colors(,)]);
  transform: translateY(-5px) scale(1.02);
}

.random-heading {
  font-size: @random([@arr.sizes(,)]);
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Multiple random properties */
.dynamic-element {
  background: @random([@arr.primary-colors(,)]);
  border: 3px solid @random([@arr.accent-colors(,)]);
  border-radius: @random([@arr.border-radius(,)]);
  padding: @random([@arr.sizes(,)]);
  transform: rotate(@random([0deg, 5deg, -5deg, 10deg, -10deg]));
}



.random-card {
  background: #60a5fa; /* Random from primary-colors */
  color: white;
  padding: 2rem;
  border-radius: 12px; /* Random from border-radius */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 1rem;
  transition: all 0.3s ease;
}

.random-card:hover {
  background: #a78bfa; /* Random from accent-colors */
  transform: translateY(-5px) scale(1.02);
}

.random-heading {
  font-size: 1.75rem; /* Random from sizes */
  margin-bottom: 1rem;
  font-weight: 700;
}

.dynamic-element {
  background: #3b82f6; /* Random from primary-colors */
  border: 3px solid #7c3aed; /* Random from accent-colors */
  border-radius: 8px; /* Random from border-radius */
  padding: 1.5rem; /* Random from sizes */
  transform: rotate(-5deg); /* Random rotation */
}

Random Card

This card uses random values from organized arrays

@random with num

Dynamic Mathematical Calculations

@random + num

Combine @random with num to create dynamic calculations and responsive random values.

FSCSS

/* Base variables for calculations */
$base-size: 16;
$spacing-unit: 1;

/* Dynamic calculations with random values */
.responsive-element {
  width: num(@random([100, 150, 200, 250]) * 1.5)px;
  height: num(@random([80, 100, 120, 150]) + 50)px;
  background: @random([#3b82f6, #8b5cf6, #06b6d4]);
  border-radius: 8px;
  margin: num($spacing-unit! * @random([1, 2, 3]))rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

/* Random grid system */
.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(@random([2, 3, 4]), 1fr);
  gap: num($spacing-unit! * @random([1, 1.5, 2]))rem;
}

.grid-item {
  background: @random([#3b82f6, #8b5cf6, #06b6d4, #10b981, #f59e0b]);
  height: num(@random([100, 150, 200]) * 1.2)px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

/* Random typography scale */
.dynamic-text {
  font-size: num($base-size! * @random([1, 1.125, 1.25, 1.5, 2]))px;
  line-height: num($base-size! * @random([1.5, 1.75, 2]))px;
  color: @random([#1e293b, #334155, #475569]);
  margin-bottom: num($spacing-unit! * @random([0.5, 1, 1.5]))rem;
}

.responsive-element {
  width: 300px; /* Random: 200 * 1.5 */
  height: 170px; /* Random: 120 + 50 */
  background: #8b5cf6; /* Random selection */
  border-radius: 8px;
  margin: 2rem; /* Random: 1 * 2 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Random selection */
  gap: 1.5rem; /* Random: 1 * 1.5 */
}

.grid-item {
  background: #10b981; /* Random selection */
  height: 180px; /* Random: 150 * 1.2 */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.dynamic-text {
  font-size: 24px; /* Random: 16 * 1.5 */
  line-height: 28px; /* Random: 16 * 1.75 */
  color: #334155; /* Random selection */
  margin-bottom: 1rem; /* Random: 1 * 1 */
}

Grid Item

Creative Examples

Inspiring Use Cases

Creative Applications

Explore creative ways to use @random in real-world projects.

Loading Animations

@arr(delays[0s, 0.1s, 0.2s, 0.3s, 0.4s]);
.loading-dot {
  animation: bounce 1s infinite @random([@arr.delays(,)]);
  background: @random([#3b82f6, #8b5cf6, #06b6d4]);
}

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

Background Patterns

.pattern-bg {
  background: linear-gradient(
    @random([45deg, 90deg, 135deg, 180deg]),
    @random([#3b82f6, #8b5cf6]),
    @random([#06b6d4, #10b981])
  );
  min-height: 200px;
  border-radius: 12px;
}

Interactive Elements

.interactive-card {
  transition: all 0.3s ease;
  background: @random([#f8fafc, #f1f5f9, #e2e8f0]);
}

.interactive-card:hover {
  transform: 
    rotate(@random([-2deg, -1deg, 1deg, 2deg]))
    scale(@random([1.02, 1.03, 1.04, 1.05]));
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

Best Practices

Using @random Effectively

Follow these guidelines to make the most of @random in your projects.

Controlled Randomness

Use arrays to define acceptable value ranges

Color Harmony

Create color arrays that work well together

Responsive Design

Combine with num for adaptive random values

User Experience

Use sparingly for critical interface elements

Good Example - Controlled Randomness

/* Good - organized color palette */
@arr(brand-colors[#3b82f6, #1d4ed8, #60a5fa]);
.element {
  background: @random([@arr.brand-colors(,)]);
}

Avoid This - Uncontrolled Randomness

/* Avoid - too many unrelated colors */
.element {
  background: @random([red, blue, green, yellow, purple, orange]);
}