Including External FSCSS Files

Learn how to integrate FSCSS into your HTML projects using different methods for various use cases.

FSCSS is a preprocessor - your .fscss files are converted to standard CSS at runtime by the FSCSS execution script.

@import method: >How it works

importing fscss within another fscss

style.fscss

@import(exec(style.fscss))
/*styles...*/

Method 1: Using HTML Link Tag

The simplest way to include FSCSS in your HTML projects.

Create your FSCSS file

Create a file with the .fscss extension (e.g., styles.fscss) and add your FSCSS code.

style.fscss

/* Variables */
$primary-color: midnightblue;
$bg-stack: #FF9955 url(image.png) no-repeat center;
$border: 1px solid #4CAF50;

/* Body element styling */
Body {
  Background: linear-gradient(30deg, #111, #000);
  color: $primary-color!;
}

/* Select by name attribute */
$(name: foo) {
  Background: $bg-stack!;
  Border: $border!;
  %2(width, height[:200px;])
}

Link in your HTML

In your HTML file, use a <link> tag with type="text/fscss" and include the FSCSS execution script.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>FSCSS Example</title>
  
  <!-- FSCSS file -->
  <link href="styles/style.fscss" type="text/fscss">
  
  <!-- FSCSS execution script -->
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.js" async></script>
</head>
<body>
  <div name="foo">
    This div will be styled by FSCSS.
  </div>
  
  <!-- Regular CSS still works -->
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
</body>
</html>

Key points:

Set type="text/fscss" to identify the file for processing
Include the FSCSS execution script from CDN
Regular CSS still works alongside FSCSS
Paths to local files should be relative to your HTML file

Method 2: Using JavaScript

For more control, especially with dynamic loading or error handling.

Option A: Direct Script Loading

Good for simple projects without module systems.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>FSCSS JavaScript Load</title>
</head>
<body>
  <div name="card" class="card">
    This is a card styled with FSCSS.
  </div>

  <!-- Load FSCSS execution script -->
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.js"></script>
  
  <script>
    // Call the exec function after loading
    exec({
      type: 'URL',
      content: 'styles/style.fscss',
      onSuccess: (styleElement) => {
        console.log('CSS applied:', styleElement);
      },
      onError: (msg) => {
        console.warn('Error applying CSS:', msg);
      }
    });
  </script>
</body>
</html>

Option B: ES Modules (Modern Approach)

Better for applications using JavaScript modules.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>FSCSS ES Module Load</title>
</head>
<body>
  <div name="card" class="card">
    Another card styled with FSCSS.
  </div>

  <script type="module">
    // Import the exec function
    import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";
    
    // Call the exec function
    exec({
      type: 'URL',
      content: 'styles/style.fscss',
      onSuccess: (styleElement) => {
        console.log('CSS applied:', styleElement);
      },
      onError: (msg) => {
        console.warn('Error applying CSS:', msg);
      }
    });
  </script>
</body>
</html>

Enhanced JavaScript with Error Handling

A robust implementation for production applications.

script.js

import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";

// Set to false for production
const DEBUG = true; 

function applyFSCSS({ type, content }) {
  exec({
    type,
    content,
    onSuccess: (styleElement) => {
      if (DEBUG) {
        console.log("✅ FSCSS applied successfully:", styleElement);
      }
    },
    onError: (error) => {
      console.error("❌ Failed to apply FSCSS:", error);
      
      // User-friendly error message
      const errorElement = document.createElement('div');
      errorElement.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px;
        background: #ff4757;
        color: white;
        border-radius: 5px;
        z-index: 1000;
        max-width: 300px;
      `;
      errorElement.innerHTML = `
        <strong>⚠️ Style Error</strong>
        <p>Could not load styles. Please try again later.</p>
      `;
      document.body.appendChild(errorElement);
      
      // Remove error after 5 seconds
      setTimeout(() => {
        errorElement.remove();
      }, 5000);
    }
  });
}

// Example usage:
applyFSCSS({
  type: "URL",
  content: "styles/main.fscss"
});

Benefits

DEBUG flag for development/production modes
Detailed error logging in console
User-friendly error notifications
Modular and reusable code
Automatic cleanup of error messages

Features

Success confirmation logging
Visual error alerts for users
Positioned notification that doesn't disrupt layout
Automatic removal of error messages
Reusable function for multiple style sheets

Key Considerations

Important Notes:

You must include the FSCSS execution script
For HTML method, type="text/fscss" is required
CDN is recommended for reliable script delivery
Path to local files should be relative to your HTML file
FSCSS processes files at runtime (no build step required)

HTML Link Method

When to use:

Simple websites and projects
Quick prototyping
When you have static stylesheets
When you prefer declarative approach

JavaScript Method

When to use:

Dynamic applications
When loading styles conditionally
When you need error handling
Modern JavaScript applications
When loading from external sources