Dynamic styling with FSCSS Events

Dynamic Styling with FSCSS Events

FSCSS Events bring powerful, event-driven conditional logic and dynamic value generation to CSS, enabling runtime styling without JavaScript.

Event Function Example

/* Define reusable event function */
@event theme(mode) {
  if mode: dark {
    return: #1a1a1a;
  }
  el {
    return: #f8f8f8;
  }
}

/* Apply dynamic styles */
body {
  background: @event.theme(dark);
  color: @event.theme(light);
}

Compile Code

Random Value Generation

/* Store random values */
str(primary, "@random([#4361ee, #f72585, #7209b7])")

/* Process with event */
@event color(type) {
  if type: primary {
    return: primary;
  }
  el {
    return: #ffffff;
  }
}

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

Numerical Calculations

/* Event with math */
@event spacing(size) {
  if size: small {
    return: num(8 * 1.25)px;
  }
  el {
    return: num(16 * 1.25)px;
  }
}

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

create and use array in event.

v1.1.6 up

@event spacing(size, status)  {
  if size: small, status: active {
    return: @arr( size[50,40,30]) @random([@arr.size(, )]);
 }
  el-if size: small  {
    return: num(16 * 1.25)px;
 }
el {
 return: num(8 * 1.25)px;
 }
}
.container {
  padding: @event.spacing(small);
}
.container.active{
  padding: @event.spacing(small,active);
}

Key Features

Conditional Logic: if, el-if, el for flexible conditions
Dynamic Values: @random and num() for runtime calculations
Function Composition: Nest and combine events
Units Support: Works with px, em, rem, %, pt, etc.

Notes

Use /* */ for comments to avoid parsing issues
Store values with str() for reuse
Combine @random and num() for dynamic themes

Events function example:

Html:

<div class="star"></div>
<style>
  @import(exec(_init themes))
  body{
    background: @event.theme(sunset);
  }
 .star{
   background: @event.theme(forest);
   tr Shape: @event.shape(star);
   %2(
     width, 
     height[: 200px;])
 }
</style>
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>

COMPILE FSCSS
output:

FSCSS Events simplify complex styling logic, making CSS more programmatic and responsive. Try it for dynamic, maintainable designs!.
fscss random method