DEV Community

FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

🚀 FSCSS Drops count() and length() Methods

#fscss #css #javascript #cli

Simplify Your CSS Magic! 🎉

Hey Devs! The latest FSCSS@1.1.11 release just landed, and it’s bringing two shiny new methods to level up your stylesheet game: count() and length(). If you love writing clean, expressive CSS without jumping through hoops, these are about to become your new best friends. Let’s dive in! 😎
🔢 count(): Generate Number Sequences Like a Pro
The count() method is here to save you from manually typing number sequences. Need incremental values for animations, margins, or array indexing? count() has you covered.

How It Works 

count(limit) /* Starts at 1, goes to limit */
count(limit, step) /* Custom step size */
Enter fullscreen mode Exit fullscreen mode

Quick Example

exec(_log, "count(5)") /* Outputs: 1, 2, 3, 4, 5 */
exec(_log, "count(10, 2)") /* Outputs: 2, 4, 6, 8, 10 */
Enter fullscreen mode Exit fullscreen mode

Imagine creating staggered animations without a single loop:

@arr num[count(5)]
div:nth-child(@arr.num[]) {
  animation-delay: @arr.num[];
  background: @random([red, blue, green]);
}
Enter fullscreen mode Exit fullscreen mode

Boom! Five divs with delays of 1s, 2s, 3s, 4s, and 5s, plus random colors. So clean! ✨

Why I Love It

  • No manual typing: Auto-generate sequences. Flexible steps: Customize with step for patterns.
  • Loop-friendly: Pairs perfectly with other FSCSS functions.

- 📏 length(): Text-Aware Styling Made Easy

The length() method counts characters in a string (spaces and punctuation included). It’s perfect for dynamic layouts that adapt to text content.

How It Works

length("Your Text Here") /* Returns character count */
Quick Example

.text-box {
  width: num(length("Hello World") * 10)px; /* 11 chars * 10 = 110px */
  background: lightblue;
  padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

This creates a box that auto-sizes based on the text length. No JavaScript needed! 🙌

Why I Love It

  • Precise: Counts every character.
  • Dynamic: Build responsive text-based layouts.
  • Lightweight: No external scripts required. 🧩 What Can You Build?
  • With count(): Staggered animations, incremental margins, or patterned gradients.
  • With length(): Auto-sized text containers, responsive typography, or character-based effects.

FSCSS@1.1.11’s count() and length() methods make your stylesheets smarter and more modular. Whether you’re crafting animations or text-reactive designs, these tools keep your code DRY and fun. Try them out and share your creations! 🚀

👉 Grab FSCSS@1.1.11 and start experimenting.

Top comments (0)