DEV Community

Cover image for Getting started with FSCSS
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on • Edited on • Originally published at fscss.onrender.com

Getting started with FSCSS

#beginners #fscss #css #tooling

FSCSS (Figured Shorthand Cascading Style Sheets) is a relatively new CSS preprocessor designed to simplify and streamline CSS coding by introducing shorthand syntax, variables, and utility methods. While it's available on npm and can be integrated into projects.

📦 FSCSS on npm
FSCSS is available as an npm package and can be installed using:

npm install fscss
Enter fullscreen mode Exit fullscreen mode

Alternatively, you can include it directly in your HTML via a CDN:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/exec.min.js" async></script>
Enter fullscreen mode Exit fullscreen mode

Once included, you can write FSCSS code within a <style> tag in your HTML.

✨ Key Features of FSCSS
FSCSS introduces several shorthand methods to make CSS more concise:

Variables: Define reusable values.

  $primary-color: midnightblue;
  div {
    color: $primary-color!;
  }
Enter fullscreen mode Exit fullscreen mode

Grouping Properties: Apply multiple properties succinctly.

  div {
    %2(width, height[: 80px ;])
  }
Enter fullscreen mode Exit fullscreen mode

Repeat Method: Repeat values or patterns.

  div::after {
    content: 'rpt(5, "_")';
  }
Enter fullscreen mode Exit fullscreen mode

Replacement Method: Define and use custom replacements.

  Re(Greetings, 'Hello world!');
  div::after {
    content: 'Greetings';
  }
Enter fullscreen mode Exit fullscreen mode

Wildcard Prefixing (-*): Apply vendor prefixes automatically.

  div {
    -*-transform: skewX(9deg);
  }
Enter fullscreen mode Exit fullscreen mode

These features aim to reduce redundancy and enhance maintainability in CSS code.

🚀 Getting Started with FSCSS
To integrate FSCSS into your project:

Include FSCSS: Add the FSCSS script to your HTML.

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/exec.min.js" async></script>
Enter fullscreen mode Exit fullscreen mode

Write FSCSS Code: Use the shorthand syntax within a <style> tag.

<style>
$primary-color: midnightblue;
div {
  color: $primary-color!;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Compile if Necessary: Depending on your setup, you might need to compile FSCSS into standard CSS, though the included script often handles this in the browser or compile it using FSCSS compiler tool.

📚 Additional Resources
FSCSS on jsDelivr: package/npm/fscss

While FSCSS offers innovative approaches to writing CSS, its adoption is still growing. If you're interested in experimenting with new tools and enhancing your CSS workflow, FSCSS might be worth exploring.

read the docs

fscss.onrender.com

Top comments (0)