FSCSS @events function and logic descriptions

`@event` Tutorial

The @event function in FSCSS lets you add logic and dynamic behavior into your stylesheets. Instead of repeating values, you can create reusable functions that return different results based on conditions.

Think of it like this: Normal CSS is static. With @event, your CSS can decide what value to use at runtime — just like functions in programming.

Basic Syntax

To create an event, use the @event keyword, give it a name, and optionally pass parameters. Inside, write conditions that return values.

example.fscss

/* Basic event */
@event theme(mode) {
  if mode: dark {
    return: #111111;
  }
  el {
    return: #ffffff;
  }
}

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

Conditional Logic

Inside events, you can use if, el-if, and el blocks:

if → Primary check
el-if → Additional checks
el → Fallback if no condition matched

logic.fscss

@event size(type) {
  if type: small {
    return: 12px;
  }
  el-if type: medium {
    return: 16px;
  }
  el {
    return: 20px;
  }
}

p {
  font-size: @event.size(small);
}

Comparison Operators

FSCSS events support operators for number comparisons:

== → Equal
> → Greater than
< → Less than
>= → Greater than or equal
<= → Less than or equal

compare.fscss

@event rating(score) {
  if score >= 90 {
    return: green;
  }
  el-if score >= 50 {
    return: orange;
  }
  el {
    return: red;
  }
}

.user-score {
  color: @event.rating(72);
}

Math and Random

Events can also use num() for calculations and @random() for randomness.

math-random.fscss

/* Random colors */
str(primary, "@random([#ff0000, #00ff00, #0000ff])")

/* Spacing calculator */
@event spacing(level) {
  if level == 1 {
    return: num(4*2)px;
  }
  el-if level == 2 {
    return: num(8*2)px;
  }
  el {
    return: num(16*2)px;
  }
}

.card {
  background: primary;
  padding: @event.spacing(2);
}

Creating Valuable Events

Valuable events are reusable helpers that save time. For example, instead of repeating breakpoints everywhere, create a @event once.

breakpoints.fscss

@event device(width) {
  if width <= 480 {
    return: mobile;
  }
  el-if width <= 1024 {
    return: tablet;
  }
  el {
    return: desktop;
  }
}

.container {
  flex-direction: @event.device(768);
}

Advanced Composition

Events can combine with variables for even more flexibility.

advanced.fscss

$second-test: #302030;
@event themedBackground(mode) {
  if mode: dark {
    return: $second-test!;
  }
  el {
    return: ;
  }
}

body {
  background: @event.themedBackground(dark);
}

Best Practices

✅ Use clear names (spacing, theme, device)
✅ Keep events small and focused (one responsibility)
✅ Store reusable values with str() when possible
⚠️ Avoid deeply nested conditions — split into smaller events
⚠️ Always use block comments (/* */), not //

@event Tutorial