LollipopCSS - Same CSS. Less typing.

Try it yourself

Edit the LollipopCSS. See the CSS instantly.

Change the code below and see it compile into CSS as you type.

LollipopCSS input

Compiled CSS output Ready

The lazy bargain

Define it once. Then stop typing so much.

CSS and Sass can already do the job. LollipopCSS just lets you pay the setup cost once, then use the tiny version everywhere.

CSS repeat declarations

/* Definition cost */
/* none */

/* Usage cost */
.card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #ffafcc;
}

.header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #ffafcc;
}

.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #ffafcc;
}

SCSS mixin + include

/* Definition cost */
$pink: #ffafcc;
$space: 16px;

@mixin flexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Usage cost */
.card {
    @include flexCenter;
    padding: $space;
    background: $pink;
}

.header {
    @include flexCenter;
    padding: $space;
    background: $pink;
}

.modal {
    @include flexCenter;
    padding: $space;
    background: $pink;
}

LollipopCSS define once, type less

/* Definition cost */
@lollipop {
    pink #ffafcc
    space 16px
    pMd padding space
    BGpink background pink

    flexCenter {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Usage cost */
.card {
    ...flexCenter
    pMd
    BGpink
}

.header {
    ...flexCenter
    pMd
    BGpink
}

.modal {
    ...flexCenter
    pMd
    BGpink
}

Imports

Split shortcuts into reusable LCSS files.

Real syntax from this project: @importlollipop "./var.lcss". Use compileAsync() or LollipopCSS.load() when imports are involved.

tokens.lcss shared vocabulary

@lollipop {
    pink #ffafcc
    ink #31283a
    pMd padding 16px
    BGpink background pink
    textInk color ink
}

style.lcss uses imports

@importlollipop "./tokens.lcss"

.button {
    pMd
    BGpink
    textInk
}

What it actually does

Small features, plain output.

Unknown CSS stays untouched. Recognized LollipopCSS commands compile to regular CSS.

Custom shortcuts

Define reusable values and map short commands to CSS declarations.

@lollipop {
    pink #ffafcc
    pMd padding 16px
}

Quick setup

Load the compiler and use an LCSS file like a regular stylesheet.

<script src="lollipop-css.js" defer></script>
<link rel="lollipop-stylesheet" href="style.lcss">

Style blocks

Reuse a block with ...name

@lollipop {
    flexCenter {
        display: flex;
        align-items: center;
    }
}
.card {
    ...flexCenter
}

Imports

Keep a vocabulary file and pull it into another LCSS file.

@importlollipop "./var.lcss"

Plain CSS compatibility

Normal CSS can live beside shortcuts.

.card {
    display: grid;
    pMd
}

Browser compiler

Load a stylesheet or compile a string directly in the browser.

const css = await new LollipopCSS()
    .compileAsync(source, { baseUrl });

Why this exists

SCSS can already do all of this.

That's not the problem.

The problem is that when I'm maintaining a large project, I'm too lazy to keep writing @mixin and @include over and over again.

So I made LollipopCSS.

Yes, I'm lazy. Very lazy. More time for McFlurries and lollipops. 🍦🍭

Try the playground Manual import example README