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.

Method 1: Using HTML Link Tag

The simplest way to include FSCSS in your HTML projects.

1

Create your FSCSS file

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

styles.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;])
}
2

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" rel="stylesheet" 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.

1

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>
2

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