Interactive FSCSS Examples

These examples demonstrate how FSCSS simplifies complex CSS tasks with its intuitive shorthand syntax. Each example includes FSCSS code, compiled CSS, and a live demo.

Fast Development

Write CSS faster with powerful shorthand syntax

Clean Code

Reduce repetition with variables and functions

Powerful Features

Advanced capabilities like loops, conditionals, and array mutations

Variables & Style Stores

Dynamic Theming with Variables

Basic

FSCSS variables make it easy to create dynamic, reusable styles. Change the values below to see the theme update in real-time.

FSCSS 
/* Dynamic theme variables */
$primary: #3b82f6;
$radius: 8px;
$shadow: 0 4px 6px rgba(0,0,0,0.1);

/* Style store for card */
str(card-style, "
  background: white;
  border-radius: $radius!;
  box-shadow: $shadow!;
  padding: 1.5rem;
  transition: all 0.3s ease;
")

/* Apply styles */
.themed-card {
  card-style
  border-left: 4px solid $primary!;
}

.themed-button {
  background: $primary!;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: $radius!;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(black 10%, $primary! 90%);
    transform: translateY(-2px);
    box-shadow: $shadow!;
  }
}
Compiled CSS 
.themed-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
  transition: all 0.3s ease;
  border-left: 4px solid #3b82f6;
}

.themed-button {
  background: #3b82f6;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.themed-button:hover {
  background: linear-gradient(black 10%, #3b82f6 90%);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Themed Card

This card uses dynamic variables for styling.

Arrays & Loops

Staggered Animations with Arrays

Intermediate

FSCSS arrays make it easy to create complex patterns and animations without repetitive code.

FSCSS 
/* Define arrays for delays and colors*/
@arr delays[0.1s, 0.3s, 0.5s, 0.7s, 0.9s]
@arr colors[#3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981]
@arr indexes[count(5, 1)]

/* Create staggered animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Apply to elements */
.box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: inline-block;
  margin: 0 10px;
  animation: bounce 2s infinite;
}

/* Loop through items*/
.box:nth-child(@arr.indexes[]) {
/* Get current index */
  $index: @arr.indexes[];
  animation-delay: @arr.delays[$index!];
  background: @arr.colors[$index!];
}
Compiled CSS 
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.box {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: inline-block;
  margin: 0 10px;
  animation: bounce 2s infinite;
}

.box:nth-child(1) {
  animation-delay: 0.1s;
  background: #3b82f6;
}

.box:nth-child(2) {
  animation-delay: 0.3s;
  background: #8b5cf6;
}

.box:nth-child(3) {
  animation-delay: 0.5s;
  background: #ec4899;
}

.box:nth-child(4) {
  animation-delay: 0.7s;
  background: #f59e0b;
}

.box:nth-child(5) {
  animation-delay: 0.9s;
  background: #10b981;
}

Array Mutation Helpers

Reusable @add / @remove with @define

Advanced

Combine @define with FSCSS array mutation syntax (@arr.name!+[...] and index-based removal) to create clean, reusable helpers. Then inspect the result with exec(_log, ...).

FSCSS 
/* Reusable append helper */
@define add(arr, new){
  @arr.@use(arr)!+@use(new)
}

/* Reusable remove-by-index helper */
@define remove(arr, index){
  @arr.@use(arr)!-@use(index)
}

/* 1. Create the array */
@arr a[A, B, C]

/* 2. Append D */
@add(a, [D])          /* → [A, B, C, D] */

/* 3. Remove index 1 (B) */
@remove(a, 1)         /* → [A, C, D]  – wait, demo uses different order */

/* Full sequence from the test: */
@arr a[A,B,C]
@add(a, [D])          /* [A, B, C, D] */
@remove(a, 1)         /* remove B → [A, C, D]  (actual test may vary) */
@add(a, [A])
@remove(a, 1)
@add(a, [B])

/* Log final state */
exec(_log, "[@arr.a!.surround(',')]")
/* Expected console: ['C' 'D' 'A' 'B'] */
Console Result 
['C' 'D' 'A' 'B']

Step-by-step array state

Operation Array after operation
@arr a[A,B,C] [A, B, C]
@add(a, [D]) [A, B, C, D]
@remove(a, 1) [B, C, D]
@add(a, [A]) [B, C, D, A]
@remove(a, 1) [C, D, A]
@add(a, [B]) [C, D, A, B]

Final log via exec(_log, "[@arr.a!.surround(',')]") produces: ['C' 'D' 'A' 'B']

Minimal working snippet (append only)

HTML + FSCSS 
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.0/runtime.min.js" async></script>
<style type="text/fscss">
  @define add(arr, new){
    @arr.@use(arr)!+@use(new)
  }

  @arr a[A,B,C]
  @add(a, [D])

  exec(_log, "@arr.a")
  /* Console → [A,B,C,D] */
</style>

Key points:

  • @arr.name!+[items] is the official mutation syntax for appending.
  • Wrapping it inside @define lets you build dynamic helpers that accept the array name as a parameter.
  • exec(_log, "...") is the built-in console helper — perfect for debugging array state.
  • Works with both runtime.js (auto) and esm.js (manual xfscss.reboot()).

Functions & Calculations

Dynamic Layouts with Functions

Advanced

FSCSS functions like @num() and @random() enable dynamic calculations and randomization directly in your stylesheets.

FSCSS 
// Dynamic grid with calculations
$columns: 4;
$item-count: 6;

/* Calculate widths */
$item-width: num(100 / $columns!);

/* Grid container */
.grid {
  display: grid;
  grid-template-columns: rpt($columns!, "1fr ");
  gap: 1rem;
  margin: 1rem 0;
}

/* Grid items */
.grid-item {
  background: @random([#3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981]);
  border-radius: 8px;
  padding: 1.5rem;
  color: white;
  text-align: center;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: rpt(num($columns! / 2), "1fr ");
  }
}
Compiled CSS 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

.grid-item {
  background: #3b82f6;
  border-radius: 8px;
  padding: 1.5rem;
  color: white;
  text-align: center;
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Shorthand Properties

Efficient Styling with Shorthands

Basic

FSCSS shorthand properties like %2, %3, etc., let you apply the same value to multiple properties at once.

%2 - Two Properties

FSCSS 
.square {
  %2(width, height[: 100px;])
  background: #3b82f6;
}

%3 - Three Properties

FSCSS 
.circle {
  %3(width, height, border-radius[: 80px;])
  background: #8b5cf6;
}

mx() - Multiple Properties

FSCSS 
.spaced-element {
  mx(padding, margin, gap, ": 1rem;")
  background: #ec4899;
}
Spaced

@define name() - define reusable style block

FSCSS 
@define flex-center(gap:15px){
  display: flex;
  justify-content: center;
  align-items: center;
  gap: @use(gap);
} 
.card{
  @flex-center(1em)
}

@import() - import external FSCSS

FSCSS 
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.0/runtime.min.js" async></script>
<style>
@import((
  circle-progress as clp,
  progress-range as pr, 
  progress-root as p-root
) from circle-progress)

@p-root()
body{
  background: black;
}
@clp(.progress-circle)

.p72 {
  @pr(72)
}
</style>

<div class="progress-circle p72">72%</div>

Ready to try FSCSS?

Start simplifying your CSS workflow today with FSCSS. Explore the documentation to learn more about all the features and capabilities.

View Documentation API Reference Install via NPM GitHub Repository