FSCSS @ext() vs copy()

FSCSS: @ext() vs copy() - What's the Difference?

Struggling with repetitive values in FSCSS? @ext() and copy() can help, but they serve different purposes. Here's the breakdown:

1. @ext(): The Substring Extractor What it does: Extracts a specific part of a string based on position and length. Use case: Perfect for grabbing a piece of text within a rule, like a brand name from a content property.

h1 {
  content: "Welcome to FSCSS @ext(11,5: brand)"; /* Extracts "FSCSS" */
  font-family: @ext.brand; /* Reuses "FSCSS" */
}

Compile Code

1. copy(): The Global Theme Manager What it does: Copies an entire value (using an offset) into a reusable variable across your stylesheet(s). Use case: Ideal for design tokens, like a brand color you want to reuse everywhere.

body {
  background: #4ff000 copy(4, primary-color); /* Copies #4ff */
  color: $primary-color!; /* Reuses the color */
}
a {
  color: $primary-color!; /* Works here too! */
}

Run Code

---

Use @ext() for local text parsing.
Use copy() for global theming and design tokens.

Another FSCSS file can be imported to another FSCSS file and run together, import via this method: @import(exec(another.fscss)).
Thanks for reading🙏

👋Happy coding! 🚀