SCSS and LESS Pro

Pro · This feature is part of Snipfire Pro. Plans

A CSS snippet can be written in SCSS or LESS. Snipfire compiles it to minified CSS when you save, so your visitors only ever get plain, cached CSS: nothing is compiled on a page view.

Create an SCSS or LESS snippet #

Click + New and pick SCSS or LESS, or change an existing CSS snippet's type in the toolbar. Everything else works like a CSS snippet: Where, Load as, Priority and conditions.

$brand: #e63946;

.site-header {
    background: $brand;

    a:hover {
        color: darken($brand, 20%);
    }
}

Partials: share variables and mixins #

Any SCSS or LESS snippet can be used by others as a partial. Import it by its title (or its ID):

@use 'brand-variables' as b;

.button {
    background: b.$primary;
}

@import 'mixins';
@use '12';           // by snippet ID

In LESS:

@import 'brand-variables';

The settings panel's Use as a partial box shows the exact line to import the snippet you're looking at, plus Uses: (the partials it imports) and Used by: (the snippets that import it). A partial needs a title first: Give it a title first.

A partial that only holds variables or mixins can stay switched off. It's still available to the snippets that import it; switched off, it just doesn't load on its own.

Change a partial once, everything updates #

When you save a partial, Snipfire recompiles every stylesheet that uses it. If one of them no longer compiles, you get a warning naming it, and that stylesheet keeps its last compiled CSS on the site until you fix it.

Modern SCSS #

Snipfire compiles SCSS with scssphp and LESS with less.php. Modern SCSS works, including:

• @use and @forward, with as and with (…)
• the built-in modules: @use 'sass:math', sass:map, sass:color, sass:string, sass:list, sass:meta, sass:selector
• @layer, @container and :is() pass through to the CSS

Errors #

Compile errors show on the right line while you type, just like PHP errors. An error inside a partial is shown on the import line, with where it really is: In partial "Variables", line 4: …

When you save:

• A new stylesheet, or one that's switched off, with a compile error is saved switched off.
• A live stylesheet with a compile error stays live with its last compiled CSS: The site keeps using the last version of this stylesheet that compiled, until the error is fixed. A typo never takes your styles off the site.

Without Pro #

If Snipfire Pro is switched off or your licence ends, SCSS and LESS snippets keep their last compiled CSS on the site. To save changes to them you need Pro again.

Server requirement #

SCSS and LESS need PHP's mbstring extension. If it's missing, Snipfire says so: SCSS and LESS need the PHP "mbstring" extension, which is not installed on this server. Ask your host to enable it.

From the command line #

wp snipfire create --title="Buttons" --type=css --lang=scss --file=buttons.scss