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.

Imports only find snippets #

@import, @use and @forward only ever find other SCSS and LESS snippets, by title or ID. They can't read files on the server: an import of a path (@import "/path/to/file.less", ../, file://) finds nothing, and neither do LESS's (inline) and (less) imports of files. Partials are compiled from memory, with no temporary files.

In LESS, these aren't available, because they would read a file from the server:

• data-uri(), image-size(), image-width() and image-height(): data-uri() isn't available in Snipfire: it would read a file from the server. Use url() with the file's address instead.
• @plugin: @plugin isn't available in Snipfire.

Use url() with the image's address instead of data-uri(), and write sizes yourself. This applies everywhere Snipfire compiles CSS: the editor, the live preview, saving, WP-CLI, Git sync, the agency hub, imports and exporting as a plugin. It matters because people with CSS, JS and HTML team access can write stylesheets, and must never be able to read a file such as wp-config.php through one.

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
• in CSS, SCSS and LESS, autocomplete offers your theme's and page builder's design tokens

See it as you type #

The live CSS preview shows a page of your site beside the editor and applies your SCSS or LESS as you type, before you save.

Settings form values as variables #

With a settings form, each value arrives as a variable before your code: $accent in SCSS, @accent in LESS. See In SCSS and LESS.

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.

If the bundled LESS compiler is ever missing the security patch that keeps it away from files (for example after a broken manual update), Snipfire Pro refuses to compile LESS: The LESS compiler bundled with Snipfire Pro is missing its security patch, so LESS isn't compiled. Reinstall Snipfire Pro.

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