DEV Community

Cover image for Dynamic styling with FSCSS Events
FSCSS tutorial for FSCSS tutorial

Posted on • Edited on • Originally published at fscss.onrender.com

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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(https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/trshapes.fthemes.fscss))
  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>
Enter fullscreen mode Exit fullscreen mode

output:

fscss event

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

fscss event full description and usage example

Top comments (0)