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 and conditionals

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;
}

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

mxs() - Multiple Shared

FSCSS 
.bordered-box {
  mxs(border-width, outline-width" 4px")
  border-style: solid;
  border-color: #f59e0b;
}
Bordered

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 Install via NPM GitHub Repository