Introduction to FSCSS Events

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

Conditional Logic

Use if/el-if/el blocks for decision making

Reusable Functions

Create parameterized events for reuse

Dynamic Calculations

Combine with num() for mathematical operations

Comparison Operators

Use ==, >, <, >=, <= for value comparisons

Basic @event Usage

Simple Event Function

@event

The simplest form of @event creates a function that returns values based on parameters and conditions.

FSCSS

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

/* Using the event in styles */
body {
  background: @event.theme(dark);
  color: @event.theme(light);
}

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

/* Compiled CSS */
body {
  background: #111111;
  color: #ffffff;
}

.container {
  background: #ffffff;
  color: #111111;
}

Dark Theme

Light Theme

Conditional Logic

Using if, el-if, and el Blocks

Conditional Logic

Events support multiple conditional blocks: if, el-if, and el for comprehensive decision making.

FSCSS

/* Event with multiple conditions */
@event size(type) {
  if type: small {
    return: 12px;
  }
  el-if type: medium {
    return: 16px;
  }
  el-if type: large {
    return: 20px;
  }
  el {
    return: 24px;
  }
}

/* Applying the event */
p {
  font-size: @event.size(small);
}

h1 {
  font-size: @event.size(large);
}

h2 {
  font-size: @event.size(medium);
}

/* Compiled CSS */
p {
  font-size: 12px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 16px;
}

Small Text (12px)

Medium Heading (16px)

Large Heading (20px)

Comparison Operators

Using Mathematical Comparisons

Comparison Operators

Events support comparison operators for numeric values: ==, >, <, >=, <=.

FSCSS

/* Event with comparison operators */
@event rating(score) {
  if score >= 90 {
    return: #10b981; /* Success green */
  }
  el-if score >= 70 {
    return: #f59e0b; /* Warning yellow */
  }
  el-if score >= 50 {
    return: #f97316; /* Orange */
  }
  el {
    return: #ef4444; /* Danger red */
  }
}

/* Applying the rating event */
.user-score-95 {
  color: @event.rating(95);
}

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

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

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

/* Compiled CSS */
.user-score-95 {
  color: #10b981;
}

.user-score-75 {
  color: #f59e0b;
}

.user-score-60 {
  color: #f97316;
}

.user-score-30 {
  color: #ef4444;
}

Score: 95 (Excellent)

Score: 75 (Good)

Score: 60 (Average)

Score: 30 (Poor)

Math and num() Function

Dynamic Calculations

num() Function

Combine events with the num() function for dynamic mathematical calculations.

FSCSS

/* Event with mathematical calculations */
@event spacing(level) {
  if level == 1 {
    return: num(4*2)px;
  }
  el-if level == 2 {
    return: num(8*2)px;
  }
  el-if level == 3 {
    return: num(16*2)px;
  }
  el {
    return: num(32*2)px;
  }
}

/* Applying the spacing event */
.card-small {
  padding: @event.spacing(1);
}

.card-medium {
  padding: @event.spacing(2);
}

.card-large {
  padding: @event.spacing(3);
}

.card-xlarge {
  padding: @event.spacing(4);
}

/* Compiled CSS */
.card-small {
  padding: 8px;
}

.card-medium {
  padding: 16px;
}

.card-large {
  padding: 32px;
}

.card-xlarge {
  padding: 64px;
}

Small (8px padding)

Medium (16px padding)

Large (32px padding)

Advanced Composition

Events with Variables

Advanced

Events can work with variables for even more flexibility and reusability.

FSCSS

/* Define variables */
$dark-bg: #111111;
$light-bg: #ffffff;
$dark-text: #333333;
$light-text: #f8fafc;

/* Event using variables */
@event themedBackground(mode) {
  if mode: dark {
    return: $dark-bg!;
  }
  el {
    return: $light-bg!;
  }
}

@event themedText(mode) {
  if mode: dark {
    return: $light-text!;
  }
  el {
    return: $dark-text!;
  }
}

/* Applying the themed events */
body {
  background: @event.themedBackground(dark);
  color: @event.themedText(dark);
}

.container {
  background: @event.themedBackground(light);
  color: @event.themedText(light);
}

/* Compiled CSS */
body {
  background: #111111;
  color: #f8fafc;
}

.container {
  background: #ffffff;
  color: #333333;
}

Dark Theme with Variables

Light Theme with Variables

Creative Examples

Real-World Use Cases

Practical Applications

Explore practical ways to use @event in real-world projects.

Responsive Breakpoints

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

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

Accessibility Levels

@event accessibility(level) {
  if level: high {
    return: 1.5;
  }
  el-if level: medium {
    return: 1.25;
  }
  el {
    return: 1;
  }
}

body {
  line-height: @event.accessibility(high);
}

Component States

@event button(state) {
  if state: primary {
    return: #3b82f6;
  }
  el-if state: success {
    return: #10b981;
  }
  el-if state: warning {
    return: #f59e0b;
  }
  el-if state: danger {
    return: #ef4444;
  }
  el {
    return: #64748b;
  }
}

.btn {
  background: @event.button(primary);
}

Best Practices

Using @event Effectively

Follow these guidelines to make the most of @event in your projects.

Clear Naming

Use descriptive names like theme, spacing, device

Single Responsibility

Keep events focused on one specific task

Reusability

Design events to be reusable across your project

Documentation

Always use block comments (/* */) for documentation

Good Example - Clear and Focused

/* Good - focused on one responsibility */
@event spacing(level) {
  if level: small { return: 8px; }
  el-if level: medium { return: 16px; }
  el { return: 24px; }
}

Avoid This - Too Complex

/* Avoid - doing too many things */
@event everything(type, size, color) {
  /* Complex nested conditions... */
}