DEV Community

FSCSS tutorial profile image FSCSS
FSCSS for FSCSS tutorial

Posted on

FSCSS Import System You Actually Wanted

#webdev #fscss #frontend #css

FSCSS v1.1.16+: Import System

JavaScript-Style Imports

@import((
flex-center,
flex-wrap, 
flex-x
) from flex-control)
@import((
circle-progress as clp,
progress-range as pr,
progress-root as p-root
) from circle-progress/fscss)

@p-root() 
@clp(.progress)
.p-72{
  @pr(72) 
}
.container {
  @flex-center()
}
Enter fullscreen mode Exit fullscreen mode

Named imports. Aliases.

5 Ways to Import

Named imports

@import((flex-x, flex-center) from flex-control)
Enter fullscreen mode Exit fullscreen mode

Aliases (when names clash)

@import((circle-progress as cp) from circle-progress)
Enter fullscreen mode Exit fullscreen mode

Everything (when you're lazy)

@import((*) from themes)
Enter fullscreen mode Exit fullscreen mode

Remote (CDN friendly)

@import((btn) from "https://cdn.example/buttons.fscss")
Enter fullscreen mode Exit fullscreen mode

Built-in libs (no quotes needed)

@import((*) from icon-mask)
Enter fullscreen mode Exit fullscreen mode

Also: It's Faster Now

v1.1.16+ CDN loads quicker than older versions.

The Error Messages Actually Make Sense

@import((* as all) from "style.fscss")
// Warning: syntax error at @import((* as all) from "style.fscss"): unexpected *
Enter fullscreen mode Exit fullscreen mode

No more cryptic parser errors at 2am.

Same modular architecture. Way less noise.

👉 https://github.com/fscss-ttr/fscss-modules/

Top comments (0)