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);
}
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
andnum()
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
andnum()
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>
output:
FSCSS Events simplify complex styling logic, making CSS more programmatic and responsive. Try it for dynamic, maintainable designs!.
fscss random method
Top comments (0)