@ext() String Extractor in FSCSS

This content originally appeared on DEV Community and was authored by FSCSS tutorial

Introducing @ext() in FSCSS: Your New Go-To for Dynamic String Extraction!

Hey Devs!

Are you tired of repeating the same string values across your CSS, or needing to re-type parts of a string just to use them elsewhere in your styles? If so, get ready to streamline your workflow with the new @ext() method in FSCSS (Figured Shorthand CSS)!

The @ext() method is a powerful value and string slicing utility that lets you extract substrings from any given property string or value. What makes it truly special is its ability to store these extracted pieces as named variables, allowing for seamless reuse throughout your stylesheets. This means less redundancy, cleaner code, and more dynamic styling patterns!

Syntax Made Simple

Using @ext() is intuitive and straightforward:

@ext(startIndex, length: variableName)

Let’s break down those parameters:

• startIndex: This is where the magic begins! Specify the position to start your extraction. You can even use negative values to count backward from the end of the string – super handy for trailing elements!
• length: How many characters do you want to grab from your startIndex? This determines the size of your extracted piece.
• variableName: This is the alias you’ll use to store and reference your extracted result. Think of it as creating a mini-variable just for your substring.

Examples in Action

Let’s see @ext() in practice with a couple of real-world scenarios:

Example 1: Extracting from a Property String

Imagine you have a string that contains a color, and you want to use that specific color elsewhere in your styles without typing it out again.

body {
  property: "the red color @ext(4,3: myRed)"; /* Extracts "red" */
  color: @ext.myRed; /* Reuses the extracted "red" */
}

In this example:

• @ext(4,3: myRed) starts at index 4 (where "red" begins in “the red color”) and extracts 3 characters.
• The extracted value, “red”, is then stored as @ext.myRed.
• We can now effortlessly reuse @ext.myRed for the color property, ensuring consistency and reducing errors. Example 2: Extracting from the End of a String Sometimes, the information you need is at the very end of a string, like a brand identifier or a dynamic fragment. @ext() handles this beautifully with negative indexing:

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

Here’s what’s happening:

• @ext(-5,5: brand) starts 5 characters from the end of the string and extracts 5 characters.
• This effectively captures “FSCSS” and stores it as @ext.brand.
• Now, you can use @ext.brand for your font-family or any other property that needs this specific string. Why You’ll Love @ext() The @ext() method isn’t just a neat trick; it’s a powerful addition to your FSCSS toolkit that brings several key benefits:
• Dynamic Extraction: Pull values or keywords directly from inline strings, making your styles more adaptable and less rigid.
• Position-Based Logic: Enjoy full control over your slicing with both positive and negative indexing. Whether your target is at the beginning, middle, or end, @ext() has you covered.
• Reusable Variables: Store your extracted values under easily recognizable named variables (e.g., @ext.myRed, @ext.brand) to reference them multiple times, promoting consistency.
• Lightweight & Inline: This utility is designed to be efficient and work seamlessly within your existing styles, eliminating redundancy and simplifying complex styling patterns involving repeated content. Ready to give @ext() a try and make your FSCSS even more powerful? Start experimenting and share what you build.

FSCSS @ext function

This content originally appeared on DEV Community and was authored by FSCSS tutorial