Introduction to FSCSS Variables

FSCSS variables give you flexible ways to store and reuse values across your stylesheets. They can be inline, scoped to elements, global, or even store entire blocks of styles. Define once, reuse anywhere.

Inline Variables

Simple $name: value; syntax with $name! usage

Global Variables

Available everywhere in your stylesheet

Scoped Variables

Defined inside selectors, used only in that block

Block Variables

Store entire chunks of CSS with str(name, "block")

Basic Variable Declaration

Simple Variable Usage

Basic Variables

The simplest form of FSCSS variables. Define values once and use them throughout your stylesheet.

FSCSS 
/* Define variables */
$primary-color: #3b82f6;
$secondary-color: #8b5cf6;
$font-size: 16px;
$spacing: 1rem;

/* Use variables */
.button {
  background: $primary-color!;
  color: white;
  font-size: $font-size!;
  padding: $spacing! calc($spacing! * 2);
  border-radius: 4px;
  border: 2px solid $secondary-color!;
  
  &:hover {
    background: $secondary-color!;
  }
}

Scoped Variables

Component-Specific Variables

Scoped Variables

Variables can be scoped to specific selectors, making them available only within that context. This is useful for component-specific values that shouldn't be globally available.

FSCSS 
.card {
  /* These variables are scoped to .card only */
  $card-bg: #f8fafc;
  $card-padding: 1.5rem;
  $card-radius: 8px;
  
  background: $card-bg!;
  padding: $card-padding!;
  border-radius: $card-radius!;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  .card-title {
    $title-color: #1e293b;
    color: $title-color!;
    margin-bottom: 0.5rem;
  }
}

/* This would cause an error - $card-bg is not available here */
/* .other-element { background: $card-bg!; } */
Card Title

This card uses scoped variables for its styling.

Block Variables with str()

Reusable Style Blocks

Block Variables

Store entire blocks of CSS as reusable variables. Perfect for maintaining consistent patterns across your application without repeating code.

FSCSS 
/* Define block variables */
str(shadowBlock, "
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 0.75rem;
");

str(flexCenter, "
  display: flex;
  align-items: center;
  justify-content: center;
");

/* Use block variables */
.card {
  background: white;
  padding: 1.5rem;
  shadowBlock
}

.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 4rem 2rem;
  flexCenter
  flex-direction: column;
  text-align: center;
}
Card with shadow
Centered Hero

Dynamic Variables

Calculated Values

Dynamic Variables

FSCSS variables can be dynamic and calculated on the fly. Combine them with functions for powerful, responsive designs.

FSCSS 
/* Base variables */
$base-size: 16;
$multiplier: 2;

/* Dynamic calculations */
$large-size: num($base-size! * $multiplier!)px;
$small-size: num($base-size! / $multiplier!)px;

/* Using dynamic variables */
.heading {
  font-size: $large-size!;
  margin-bottom: $small-size!;
}

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

.small-text {
  font-size: $small-size!;
  opacity: 0.8;
}
Dynamic Heading
This text uses the base size with calculated line height.
Small text with reduced opacity

CSS Custom Properties Output

Native CSS Variables

CSS Custom Properties

FSCSS variables compile to native CSS Custom Properties (CSS Variables), making them accessible to JavaScript and enabling runtime updates.

FSCSS 
/* FSCSS variables become CSS custom properties*/
$primary: #3b82f6;
$secondary: #8b5cf6;
$spacing: 1rem;

:root {
  --primary: $primary!;
  --secondary: $secondary!;
  --spacing: $spacing!;
}

.component {
  background: var(--primary);
  color: white;
  padding: var(--spacing);
  
  &:hover {
    background: var(--secondary);
  }
}

/* You can also override them in specific contexts */
.dark-theme {
  --primary: #1e40af;
  --secondary: #5b21b6;
}
Default Theme
Dark Theme

Variable Types Comparison

Choosing the Right Variable Type

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

Variable Type Syntax Scope Use Case
Basic Variables $name: value; File Global design tokens, colors, spacing
Scoped Variables $name: value; (inside selector) Selector block Component-specific values
Block Variables str(name, "block") File Reusable style patterns
Dynamic Variables $name: calculation!; Depends on definition Responsive values, calculated properties
CSS Custom Properties --name: $var!; CSS cascade Runtime theming, JavaScript integration

Best Practices

Using Variables Effectively

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

Naming Conventions

  • Use descriptive names: $primary-color instead of $color1
  • Follow consistent patterns: $spacing-small, $spacing-medium
  • Group related variables: $color-primary, $color-secondary

Organization

  • Define global variables at the top of your file
  • Use scoped variables for component-specific values
  • Group related variables with comments
  • Use block variables for reusable style patterns

Advanced Tips

  • Combine variables with functions for dynamic values
  • Use CSS custom properties for runtime theming
  • Create design token systems with consistent naming
  • Document your variables with comments