Download the PHP package trampoline-digital/wp-scss without Composer

Enable SCSS CSS in WordPress

SCSS is an abstraction layer that adds some very powerful features to CSS. It will speed up your development process and make your life that much easier. Find out more from the links below and then head on back.

WP-SCSS is an add-on is for theme creators, and allows you to build a site using SCSS, and to use variables from the customizer that are live updated. It also allows you to pass arrays and have them converted to SCSS maps.

Installation:

WP-SCSS is installed via composer.

Simply add the following line to your composer.json file's require section :"trampoline-digital/wp-scss": "dev-master"

or

composer require trampoline-digital/wp-scss if you don't want to roll the dice with nightly builds. Then run composer update;

At the top of your functions.php file, add the following line : require_once(__DIR__ . '/vendor/trampoline-digital/wp-scss/wp-scss.php' );

You are now ready to use WP-SCSS

Usage:

To load an SCSS file, simply enqueue it the way you would any normal stylesheet.

`wp_enqueue_style('scss_styles', get_template_directory_uri() . '/assets/scss/scss_styles.scss');`

You won't need a link to your main style sheet in header.php. Just make sure that wp_head() is called in the document head.

All the standard SCSS features are supported as well as @import rules anywhere within the file.

Debugging Having define('WP_DEBUG', true); set will force WP-SCSS to recompile on every page reload.

Passing in variables from PHP

You can pass variables into your .scss files using the scss_vars hook or with the functions defined in the PHP Interface section:

This is an example of how to add a single variable.

This is an example of how to add an array of single variables that are set using the customizer with Kirki.

If you would like to use an SCSS map, just pass though an array in the following format:

You can access the values in SCSS the following way:

Default variables

There is a default variables you can use without worrying about the above code:

$theme-url is the URL of the current theme directory:

It is important to use this because you can't use relative paths - the compiled CSS is stored in the uploads folder as it is the only place you can guarantee being able to write to in any given WordPress installation. As a result relative URLs will break.

TODO

• Test adding SCSS functions
• Write unit tests
• To some intense QA

Further Reading

Read the DCDD.js documentation here.

Read the documentation specific to the PHP parser here.

Contributors

This project is a revival (started with a duplication) of Robert O'Rourke's WP-LESS

It goes without saying that this project would never have been possible without the hard work of Robert O'Rourke

Alos, big massive thanks to those whose contributions and discussion helped to build the original WP-LESS plugin.

• Tom Willmot
• Franz Josef Kaiser
• Rarst

License

The software is licensed under the MIT Licence.