DEV Community

Cover image for FSCSS @define, pattern(), and @import — Explained in Plain English
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

FSCSS @define, pattern(), and @import — Explained in Plain English

#fscss #css #webdev #beginners

FSCSS @define, pattern(), and @import

Explained in plain English

FSCSS gives you three powerful ways to write less and reuse more.

Here’s what each one actually means — without the complicated words.

1. @define — Create your own shortcut

Think of @define as saying to FSCSS:

“Hey, look here! I’m creating a brand new shortcut command that I want to reuse later.”

Example:

@define card(bg, color) {
  background: @use(bg);
  color: @use(color);
  border-radius: 12px;
  padding: 24px;
}
Enter fullscreen mode Exit fullscreen mode
  • card → the custom name of your shortcut
  • (bg, color) → the placeholders (like empty boxes) where you will later put real values
  • @use(bg) and @use(color) → how you use those placeholders inside the shortcut

How you use it later:

.box {
  @card(#667eea, white)
}
Enter fullscreen mode Exit fullscreen mode

FSCSS fills in the placeholders and gives you real CSS.

You can also give default values:

@define button(bg: #764ba2, text: white) {
  background: @use(bg);
  color: @use(text);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Now you can call it with or without values.

2. pattern() — Describe what you want in normal words

pattern() is the more flexible cousin of @define.

Instead of calling a shortcut by its exact name, you just write a normal sentence that describes the style.

FSCSS looks at your sentence, finds the closest matching pattern, and injects the CSS for you.

Example:

pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #764ba2;
  font-weight: 600;
  cursor: pointer;
`)
Enter fullscreen mode Exit fullscreen mode

Then later you can write:

.btn {
  rounded primary button
}
Enter fullscreen mode Exit fullscreen mode

or even:

.btn {
  nice rounded purple button
}
Enter fullscreen mode Exit fullscreen mode

As long as the words are close enough (the number 0.6 is the confidence threshold), FSCSS understands what you mean.

When to use which?

Feature Best for How strict?
@define Exact, reusable components Very precise
pattern() Fast writing & natural language Flexible / fuzzy

3. @import — Bring shortcuts from other files

@import lets you pull in the shortcuts (@define or patterns) you already created in another file.

Basic selective import:

@import((card, button) from "./components.fscss")
Enter fullscreen mode Exit fullscreen mode

Only card and button are brought in — nothing else.

Wildcard (bring everything):

@import((*) from "./components.fscss")
Enter fullscreen mode Exit fullscreen mode

The powerful part — renaming on the fly:

@import((card as my-card, button as btn) from "./components.fscss")

.box {
  @my-card(#8f6bff, white)
}

.action {
  @btn()
}
Enter fullscreen mode Exit fullscreen mode

You can give the imported shortcuts new names that fit the current file better.

This is especially useful when different modules use similar names, or when you just want cleaner code.

Quick mental model

  • @define → “I’m inventing a new reusable command”
  • pattern() → “I’m describing the style in normal English”
  • @import → “Bring those commands from another file (and rename them if I want)”

Together they let you write less CSS, keep things organized, and still stay 100% compatible with normal CSS at the end.

Try it yourself

Extension is vailable on vscode

Docs: fscss.devtem.org

Learning hub: hub.devtem.org

npm: npmjs.com/package/fscss

Happy coding ❤️

fscss image

FSCSS tutorial

Figured Shorthand Cascading Style Sheet

Top comments (0)