FSCSS Events

Powerful event-driven functions for conditional styling and dynamic value generation.

Events revolutionize CSS: Create complex conditional logic, generate dynamic values, and build responsive styles with functions that work at runtime.
1

Event Function Syntax

Create reusable event functions with conditional logic:

style.fscss 
/* Create event function */
@event event-name(param) {
  if param: white {
    return: black;
  } 
  el-if param: black {
    return: white;
  }
  el {
    return: blue;
  }
}

body {
  /* returns white */
  background: @event.event-name(black);
}

button {
  /* returns black */
  color: @event.event-name(white);
  /* returns blue */
  background: @event.event-name();
}
2

Combining with @random

Generate dynamic values with @random and process with events:

style.fscss 
/* Generate random values */
str(val1, "@random([lightgreen, skyblue, white])")
str(val2, "@random([darkgreen, midnightblue, red])")

/* Create event to process values */
@event myfunc(e) {
  if e: val1 {
    return: val2;
  } 
  el-if e: val2 {
    return: val1;
  } 
  el {
    return: white;
  } 
}

/* Apply dynamic styling */
.box {
  background: @event.myfunc(val1);
  border-color: @event.myfunc(val2);
  color: @event.myfunc(yellow);
}
3

Numerical Calculations

Perform math operations with the num() function and events:

style.fscss 
/* Event with numerical logic */
@event cal(num) {
  if num: num(40+20) {
    return: num(40+20 / 2)px;
  }
  el {
    return: num(60-40)px;
  }
} 

/* Calculate and store result */
str(calRes, "num(20+20)") 

button {
  /* Returns 30px (60 / 2) */
  padding: @event.cal(60);
  
  /* Returns 20px (60-40) */
  margin: @event.cal(calRes);
}

Core Event Features

Conditional Logic

  • if - Primary condition check
  • el-if - Secondary condition checks
  • el - Default fallback case
  • Supports complex nested conditions

Dynamic Value Generation

  • @random([values]) - Random selection
  • num(expression) - Mathematical operations
  • Combine with str() for stored values
  • Works with all CSS units (px, em, rem, %)

Function Composition

  • Events can call other events
  • Combine with variables for powerful logic
  • Accept parameters for flexible styling
  • Return values to CSS properties

Practical Examples

Dark/Light Mode Toggle

@event theme(mode) {
  if mode: dark {
    return: #1a1a1a;
  }
  el {
    return: #f8f8f8;
  }
}

body {
  background: @event.theme(dark);
  color: @event.theme(light);
}

Responsive Spacing

@event spacing(size) {
  if size: small {
    return: num(8 * 1.25)px;
  }
  el-if size: medium {
    return: num(16 * 1.25)px;
  }
  el {
    return: num(24 * 1.25)px;
  }
}

.container {
  padding: @event.spacing(medium);
}

Random Color Scheme

str(primary, "@random([#4361ee, #f72585, #7209b7])")
str(secondary, "@random([#4cc9f0, #4895ef, #560bad])")

@event color(type) {
  if type: primary {
    return: primary;
  }
  el {
    return: secondary;
  }
}

.card {
  background: @event.color(primary);
  border-color: @event.color(secondary);
}

Important Notes

Use Block Comments Only: In FSCSS, always use block comments (/* */) instead of inline comments (//) to avoid parsing errors with event functions.

@random Function

Generates a random value from the provided array on each page load:

@random([value1, value2, value3])
  • Works with any CSS values (colors, sizes, etc)
  • Perfect for generating dynamic themes
  • Combine with str() to store results

num() Function

Performs mathematical operations:

num(expression)
  • Supports +, -, *, / operations
  • Can be combined with other values
  • Use str() to store calculations

@event Function

Creates reusable conditional logic blocks:

@event name(param) {
  /* conditional logic */
}
  • Returns values to CSS properties
  • Accepts parameters for dynamic results
  • Can be nested and composed