🔥 New in FSCSS: Conditional @event + Debug exec()

Now you can add logic in CSS & debug values live!
num() used to change string to numbers for calculation.
@event for defining a function.

@event scaleSize(e) {
  if e >= 8 { 
    return: num(8*2)em  
    exec(_log, ">=8: Scaling to 16em for optimal readability");
    /* Caps at 16em for larger inputs */
  }
  el-if e < 8 { 
    return: num(8/5*8)em  
    exec(_log, "<8: Scaling to ~10.24em for compact views");
    /* Scales down to ~10.24em for smaller inputs */
  }
  el { 
    return: num(8)em
    exec(_warn, "No match: Using default 8em – check your input value");
      /* Default fallback */
  }
}

.card {
  width: @event.scaleSize(8);   /* Outputs 16em */
  height: @event.scaleSize(7);  /* Outputs ~10.24em */
  transition: all 0.3s ease;    /* Smooth it out */
}

Compile

✅ Conditions: ==, >=, <=, >, <
✅ Debug: _log, _warn, _info, _error
Example: Logging a variable during stylesheet processing or event triggers.

$greetings: Hello, World!;  /* Define a string var */

/* Basic logging */
exec(_log, $greetings);       /* Outputs: Hello, World! to console */

/* With context */
exec(_info, "Var value:  $greetings");  /* Outputs: Var value: Hello, World! */

/* Warning for potential issues */
exec(_warn, "Deprecated var used:  $greetings");  /* Yellow warning in console */

/* Error for critical failures */
exec(_error, "Failed to compute: $greetings");   /* Red error in console */

Compile

Browser Support: Works in modern browsers with the FSCSS JS loader (e.g., <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6" async></script>). Check the console after page load or event fire.

CSS is evolving, and with FSCSS, you're not just styling—you're engineering. Got questions, bugs, or cool use cases? Hit up the DEV Community thread or X—let's iterate together! 🔧💻