FSCSS Functions - Complete Guide

Introduction to FSCSS Functions

FSCSS Functions provide powerful tools for creating dynamic, reusable, and intelligent styles. From mathematical calculations to random value generation, functions unlock new possibilities in your CSS workflow.

@fun - Function Objects

Create reusable collections of named values

@random - Random Values

Generate dynamic, ever-changing styles

num - Number based Calculations

Perform math operations directly in CSS

Utility Functions

copy(), length(), count() and more

@fun - Function Objects

Creating Reusable Value Collections

@fun

The @fun function lets you create organized collections of named values that can be reused throughout your stylesheets. Perfect for design systems and component libraries.

FSCSS

/* Define function objects */
@fun(theme){
  primary: #3b82f6;
  secondary: #8b5cf6;
  accent: #06b6d4;
  success: #10b981;
  warning: #f59e0b;
  danger: #ef4444;
}

@fun(spacing){
  xs: 0.5rem;
  sm: 1rem;
  md: 1.5rem;
  lg: 2rem;
  xl: 3rem;
}

@fun(typography){
  small: 0.875rem;
  base: 1rem;
  large: 1.125rem;
  xl: 1.25rem;
  xxl: 1.5rem;
}
@fun(full-block){
background: red;
width: 100px;
height: 50px;
border: 2px solid green;
} 
/* Use function values */
.button {
  padding: @fun.spacing.sm.value @fun.spacing.lg.value;
  border-radius: 4px;
  font-size: @fun.typography.base.value;
  font-weight: 600;
}

.button-primary {
  background: @fun.theme.primary.value;
  color: white;
}

.card {
  padding: @fun.spacing.lg.value;
  margin-bottom: @fun.spacing.md.value;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.test-card{
@fun.full-block
} 
.test-card2{
@fun.full-block.background
color: white;
}

.button {
  padding: 1rem 2rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
}

.button-primary {
  background: #3b82f6;
  color: white;
}

.card {
  padding: 2rem;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.test-card{
background: red;
width: 100px;
height: 50px;
border: 2px solid green;
} 
.test-card2{
background: red;
color: white;
}

Card Content

@random - Random Value Generation

Dynamic, Ever-Changing Styles

@random

The @random function generates random values from arrays, creating dynamic styles that change on each compilation. Perfect for creative designs and interactive elements.

FSCSS

/* Define arrays for random selection */
@arr(colors[#3b82f6, #8b5cf6, #06b6d4, #10b981, #f59e0b, #ef4444]);
@arr(rotations[0deg, 5deg, -5deg, 10deg, -10deg, 15deg, -15deg]);
@arr(scales[0.9, 0.95, 1, 1.05, 1.1]);

/* Apply random values*/
.dynamic-element {
  background: @random([@arr.colors(,)]);
  transform: 
    rotate(@random([@arr.rotations(,)])) 
    scale(@random([@arr.scales(,)]));
  padding: 2rem;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.dynamic-element:hover {
  transform: 
    rotate(@random([@arr.rotations(,)])) 
    scale(@random([@arr.scales(,)]));
}

/* Random with direct values */
.random-button {
  background: @random([#3b82f6, #8b5cf6, #06b6d4]);
  padding: 1rem 2rem;
  border-radius: 4px;
  color: white;
  border: none;
  margin: 0.5rem;
}

/* Note: @random generates different values on each compilation */
.dynamic-element {
  background: #8b5cf6; /* Random selection */
  transform: rotate(5deg) scale(1.05); /* Random selection */
  padding: 2rem;
  border-radius: 8px;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.dynamic-element:hover {
  transform: rotate(-5deg) scale(1.1); /* Random selection */
}

.random-button {
  background: #06b6d4; /* Random selection */
  padding: 1rem 2rem;
  border-radius: 4px;
  color: white;
  border: none;
  margin: 0.5rem;
}

Dynamic Element

num - Number Calculations

Inline Math Operations

num

The num function allows you to perform number only calculations directly in your stylesheets. Perfect for responsive designs and dynamic sizing.

FSCSS

/* Base variables for calculations */
$base-size: 16;
$spacing-unit: 1;

/* calculations */
.container {
  width: num(100 - 10)%;
  max-width: num(1200 + 200)px;
  padding: num($spacing-unit! * 2)rem;
}

.grid-item {
  width: num(100 / 3)%;
  height: num($base-size! * 10)px;
  margin: num($spacing-unit! * 0.5)rem;
}

.responsive-text {
  font-size: num($base-size! * 1.125)px;
  line-height: num($base-size! * 1.5)px;
}

/* Complex calculations */
.circle {
  width: num(100 * 2)px;
  height: num(100 * 2)px;
  border-radius: 50%;
  background: #3b82f6;
}

/* With random combinations */
.dynamic-size {
  width: num(@random([100, 150, 200]) * 1.5)px;
  height: num(@random([100, 150, 200]) * 1.5)px;
}

.container {
  width: 90%;
  max-width: 1400px;
  padding: 2rem;
}

.grid-item {
  width: 33.3333333333%;
  height: 160px;
  margin: 0.5rem;
}

.responsive-text {
  font-size: 18px;
  line-height: 24px;
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #3b82f6;
}

.dynamic-size {
  width: 225px; /* Random: 150 * 1.5 */
  height: 300px; /* Random: 200 * 1.5 */
}

Circle

Dynamic Size

Utility Functions

Essential Helper Functions

Utilities

FSCSS provides several utility functions for common tasks like string manipulation, counting, and measurement.

copy() - String Extraction

/* Extract and store parts of values */
.element {
  background: #4ff000 copy(4, primary-color);
  color: $primary-color!;
}

.text::before {
  content: "blue or midnightblue copy(-13, dark-blue)";
  color: $dark-blue!;
}

length() - String Length

/* Get length of strings */
.text-element {
  width: num(length("Dynamic Text") * 10)px;
  background: lightblue;
  padding: 10px;
}

/* length("Dynamic Text") = 12 */
/* Result: width: 120px */

count() - Number Sequences

/* Generate number sequences */
@arr(numbers[count(5)]);
/* Result: [1, 2, 3, 4, 5] */

.item:nth-child(@arr.numbers[]) {
  animation-delay: @arr.numbers[]s;
}

/* With custom step */
@arr(evens[count(5, 2)]);
/* Result: [2, 4, 6, 8, 10] */

Function Combinations

Powerful Function Synergy

Combinations

Combine multiple FSCSS functions to create incredibly dynamic and intelligent styles.

FSCSS

/* Define function objects */
@fun(design){
  base-size: 16;
  spacing-unit: 1;
  colors: [#3b82f6, #8b5cf6, #06b6d4, #10b981];
}

/* Combine functions for dynamic design */
.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(@random([2, 3, 4]), 1fr);
  gap: num(@fun.design.spacing-unit.value! * 2)rem;
}

.grid-item {
  background: @random(@fun.design.colors.value);
  height: num(@fun.design.base-size.value! * @random([5, 10, 15]))px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: scale(@random([1.05, 1.1, 1.15]));
  background: @random(@fun.design.colors.value);
}

/* Responsive typography system */
.responsive-heading {
  font-size: num(@fun.design.base-size.value! * @random([1.5, 2, 2.5, 3]))px;
  margin-bottom: num(@fun.design.spacing-unit.value! * 1.5)rem;
  color: @random(@fun.design.colors.value);
}

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.grid-item {
  background: #8b5cf6;
  height: 160px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: scale(1.1);
  background: #06b6d4;
}

.responsive-heading {
  font-size: 32px;
  margin-bottom: 1.5rem;
  color: #3b82f6;
}

Grid Item

Function Types Comparison

Choosing the Right Function

Different functions serve different purposes. Choose the right one for your use case.

Function	Syntax	Best For	Example Use Case
@fun	`@fun(name){key: value}`	Organized design systems	Theming, design tokens, component libraries
@random	`@random(array)`	Dynamic, varied styling	Interactive elements, creative designs
num	`num(expression)`	Number based calculations	Responsive layouts, dynamic sizing
copy()	`copy(length, variable)`	String manipulation	Extracting values, dynamic content
length()	`length("text")`	String measurement	Dynamic sizing based on content
count()	`count(limit, step?)`	Number sequences	Iterative patterns, staggered animations

Best Practices

Follow these guidelines to make the most of FSCSS functions in your projects.

Organization

Group related values in @fun objects
Use descriptive names for functions
Define functions at the top of your file
Document complex function combinations

Performance

Use @random sparingly for critical layouts
Cache complex calculations in variables
Combine functions strategically
Test function outputs thoroughly

Advanced Tips

Combine @fun with arrays for flexibility
Use num for responsive calculations
Create function-based design systems