DEV Community

Cover image for FSCSS update
FSCSS tutorial
FSCSS tutorial

Posted on • Edited on • Originally published at ekumedia.netlify.app

FSCSS update

#fscss #programming #webdev #testing

🚀 FSCSS 1.1.6 Update:

Introducing copy() and re() for Smart Style Transformations
We’re excited to announce a new powerful update to FSCSS (Figured Shorthand CSS)
– version 1.1.6 now introduces two intelligent methods: copy() and re() for transforming and generating CSS rules with enhanced reusability and minimal syntax.

🔧 New Features

🔁re(search, replace)

A simple but powerful string-based replacement method used directly inside FSCSS stylesheets.

/* Replace every dot with ellipsis */
re(dot,"rpt(3,'.')")

/* Replace keyword and assign to variable */
re(blood-color: '#a00 copy(4, var-red)')
Enter fullscreen mode Exit fullscreen mode

📋 copy(length, target)

Copies values like color codes, string snippets, or CSS property values with optional variable storage.

/* Store color code #a00 into CSS variable */
re(blood-color: '#a00 copy(4, var-red)')

/* Copy hex and assign to color map */
background: #110110 copy(7, dogblack);
Enter fullscreen mode Exit fullscreen mode

🧪 Example FSCSS Snippet

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>
<h2></h2>
<h3></h3>

<style>
/* FSCSS syntax with re() and copy() */

re(dot,"rpt(3,'.')")
re(blood-color: '#a00 copy(4, var-red)')
re(bodyBaseStyle,"
  color: skyblue;
  border: 2px solid #000;
")

$mx-gradient: $dogblack! 55% 77% mx(,111 10% 30%,222 20% 50%,333 40% 70%,444 60% 90%,555 80% 100%,",#fff");

body {
  bodyBaseStyle
  background: linear-gradient(70deg, $mx-gradient!);
}

h3:before {
  bodyBaseStyle
  content: "dot dot dot";
  color: blood-color;
  border: 2px solid $var-red!;
  background: #110110 copy(7, dogblack);
}
</style>
Enter fullscreen mode Exit fullscreen mode

💡 Why Use copy() and re()?

  • Reduce CSS repetition and manual typing.
  • Enable conditional or variable-based style logic.
  • Improve maintainability using dynamic variable injection.


🔗 Try It Now
Just add the script tag to your HTML:

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

And start writing FSCSS styles directly in <style> tags!
You can even execute external stylesheets by add the attribute type=”text/fscss”
E.g

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.6/e/exec.min.js" async></script>
<!---== whether .css or .fscss ==--->
<link rel="stylesheet" type="text/fscss" href="part/style.css">
Enter fullscreen mode Exit fullscreen mode

🙌 Credits
FSCSS execution powered by:

  • Publisher: Figsh
  • Writer: David-Hux
  • Contributor: You, the community!

More at:

Top comments (0)