Let's break down how to add external .fscss files to your HTML, making it clearer and easier to understand.
FSCSS (Fig's Shorthand CSS) is a preprocessor that extends CSS with features like variables, custom selectors, and more concise syntax. To use it, you need to include the FSCSS execution script in your HTML, which then processes your .fscss files into standard CSS that browsers can understand.
There are two primary ways to include external .fscss files in your HTML: using the HTML tag or using JavaScript.
Method 1: Using the HTML Tag (Recommended for Simplicity)
This method is generally the simplest and most direct way to include your FSCSS files.
Step 1: Create your .fscss file.
Create a file with the .fscss extension (e.g., styles.fscss) and write your FSCSS and CSS code within it.
Example styles.fscss:
/* Variables */
$primary-color: midnightblue;
$bg-stack: #FF9955 url(image.png) No-repeat center;
$border: 1px solid #4CAF50;
$gradient: mx(#111, #222, #333, #444, #555,#000,'00f,');
/* Body element styling */
Body {
Background: linear-gradient(30deg, $gradient!#0f0);
color: $primary-color!;
}
/* Select by name attribute (FSCSS specific) */
$(name: foo) {
Background: $bg-stack!;
Border: $border!;
%2(width, height[:200px;]) /* This is a FSCSS shorthand */
}
Step 2: Link it in your HTML.
In your HTML file, within the
Example HTML:
<!DOCTYPE html>
<html>
<head>
<title>FSCSS Example</title>
<link href="styles/style.fscss" rel="stylesheet" type='text/fscss'>
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/exec.js" async=""></script>
</head>
<body>
<div name='foo'>
This div will be styled by FSCSS.
</div>
<style>
/* You can still have regular CSS here */
body {
font-family: sans-serif;
}
</style>
</body>
</html>
Live Example:
The following Codepen demonstrates this method:
Method 2: Adding External FSCSS using JavaScript
This method gives you more control, especially for dynamic loading or error handling.
Option A: Using the exec.js script directly (simpler JavaScript)
This is a good option if you want to load an FSCSS file from a URL and don't need advanced module imports.
<!DOCTYPE html>
<html>
<head>
<title>FSCSS JavaScript Load</title>
</head>
<body>
<div name="card" class="card">
This is a card.
</div>
<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.js"></script>
<script>
// Call the exec function provided by the FSCSS script
exec({
type: 'URL',
content: 'https://raw.githubusercontent.com/Figsh/style_sheet/refs/heads/main/style.fscss',
onSuccess: (styleElement) => console.log('CSS applied:', styleElement),
onError: (msg) => console.warn('Error applying CSS:', msg)
});
</script>
</body>
</html>
Option B: Using ES Modules (for more structured JavaScript applications)
This approach is better for modern JavaScript development where you might be using modules and want better control over imports.
<!DOCTYPE html>
<html>
<head>
<title>FSCSS ES Module Load</title>
</head>
<body>
<div name="card" class="card">
Another card.
</div>
<script type="module">
// Import the exec function from the FSCSS module
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";
// Call the exec function
exec({
type: 'URL',
content: 'https://raw.githubusercontent.com/Figsh/style_sheet/refs/heads/main/style.fscss',
onSuccess: (styleElement) => console.log('CSS applied:', styleElement),
onError: (msg) => console.warn('Error applying CSS:', msg)
});
</script>
</body>
</html>
Live Example:
The following Codepen demonstrates JavaScript loading:
Enhanced JavaScript for Development (Error Handling)
For a more robust development setup, especially for debugging, you can add better error handling to your JavaScript loading.
import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js";
const DEBUG = true; // Set to false for production
function applyFSCSS({ type, content }) {
exec({
type,
content,
onSuccess: (styleElement) => {
DEBUG && console.log("✅ FSCSS applied:", styleElement); // Log success in debug mode
},
onError: (error) => {
console.error("❌ Failed to apply FSCSS:", error); // Log the error to console
alert("⚠️ Could not load styles. Please try again later."); // User-friendly alert
}
});
}
// Example usage:
applyFSCSS({
type: "URL",
content: "yourStyles/shorter.fscss" // Replace with the actual path to your .fscss file
});
This enhanced JavaScript code provides:
- DEBUG flag: Easily switch between verbose logging (for development) and silent operation (for production).
- Success message: Confirms when the FSCSS has been successfully applied.
- Detailed error logging: Provides more information in the console if there's an issue loading or processing the FSCSS.
- User-friendly alert: Informs the user if styles couldn't be loaded. Key Points to Remember:
- FSCSS Processor: FSCSS is a preprocessor, meaning your .fscss files are not directly understood by browsers. The exec.js script acts as the processor, converting them into standard CSS at runtime.
- Include exec.js: Regardless of whether you use the tag or JavaScript, you must include the FSCSS execution script (
https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.jsor ES modules importhttps://cdn.jsdelivr.net/npm/fscss@1.1.6/e/xfscss.min.js) in your HTML. Without it, your .fscss files won't be processed. - type='text/fscss': When using the tag, setting type='text/fscss' is crucial for the FSCSS processor to identify and process the file correctly.
- CDN Usage: It's common to load the FSCSS execution script from a Content Delivery Network (CDN) like cdn.jsdelivr.net for ease of use and reliability.
- Local Files: If you're using local .fscss files (e.g., styles/style.fscss), make sure the path in your href or content is correct relative to your HTML file.
By following these steps, you can effectively integrate external .fscss files into your HTML projects and leverage the features of FSCSS for more efficient styling.
READ THE FULL DOCS FOR MORE DETAILS
Top comments (0)