PHPackages                             trampoline-digital/wp-scss - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. trampoline-digital/wp-scss

ActiveLibrary[Utility & Helpers](/categories/utility)

trampoline-digital/wp-scss
==========================

Provides a SCSS compiler compatible with wp\_enqueue\_style() for rapid CSS development in themes and plugins.

1.0.1(9y ago)2242MITPHPPHP >5.2.4

Since Oct 1Pushed 9y ago1 watchersCompare

[ Source](https://github.com/trampoline-digital/wp-scss)[ Packagist](https://packagist.org/packages/trampoline-digital/wp-scss)[ RSS](/packages/trampoline-digital-wp-scss/feed)WikiDiscussions master Synced today

READMEChangelog (2)Dependencies (2)Versions (5)Used By (0)

Enable SCSS CSS in WordPress
============================

[](#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:
-------------

[](#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:
------

[](#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

[](#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.

```
add_filter( 'scss_vars', 'scss_color', 10, 2 );
    // $handle is a reference to the handle used with wp_enqueue_style() - don't take it out
    function scss_color( $vars, $handle ) {
    $vars["blue"] = "lightblue";
    return $vars;
}

```

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

```
add_filter( 'scss_vars', 'scss_colors', 10, 2 );
// $handle is a reference to the handle used with wp_enqueue_style() - don't take it out
function scss_colors( $vars, $handle ) {
    $defaults = new CustomizerDefaults();
    $colors = $defaults->get_colors();
    foreach ($defaults->get_colors() as $color){
        $slug = $color['slug'];
        $vars[$slug] = get_theme_mod($slug, $colors[$slug]['value']);
    }
    return $vars;
}

```

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

```
add_filter( 'scss_vars', 'scss_map', 10, 2 );
 // $handle is a reference to the handle used with wp_enqueue_style() - don't take it out
function scss_color( $vars, $handle ) {
    $vars["array_of_colors"] = array(
        "blue" = "darkblue",
        "gray" = "lightgray"
    );
    return $vars;
}

```

You can access the values in SCSS the following way:

```
.heading{
    color: map-get(array_of_colors, blue); // Will return the value of 'blue' ('darkblue')
    background-color: map-get(array_of_colors, gray); // Will return the value of 'gray' ('darkgray')

}

```

### Default variables

[](#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

[](#todo)

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

Further Reading
---------------

[](#further-reading)

[Read the DCDD.js documentation here](http://sass-lang.com/guide).

Read the documentation [specific to the PHP parser here](http://leafo.github.io/scssphp/).

Contributors
------------

[](#contributors)

This project is a revival (started with a duplication) of Robert O'Rourke's [WP-LESS](https://github.com/roborourke/wp-less)

It goes without saying that this project would never have been possible without the hard work of [Robert O'Rourke](https://github.com/roborourke)

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

- [Tom Willmot](https://github.com/willmot)
- [Franz Josef Kaiser](https://github.com/franz-josef-kaiser)
- [Rarst](https://github.com/rarst)

License
-------

[](#license)

The software is licensed under the [MIT Licence](http://www.opensource.org/licenses/mit-license.php).

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 63.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~518 days

Total

3

Last Release

3620d ago

Major Versions

0.3 → 1.0.02016-07-25

### Community

Maintainers

![](https://www.gravatar.com/avatar/114f51423f42619e144a4e2d4aa26aa57cbcbf66c8932687eac4dfe45e891971?d=identicon)[trampolinedigital](/maintainers/trampolinedigital)

---

Top Contributors

[![roborourke](https://avatars.githubusercontent.com/u/23417?v=4)](https://github.com/roborourke "roborourke (62 commits)")[![tomjn](https://avatars.githubusercontent.com/u/58855?v=4)](https://github.com/tomjn "tomjn (10 commits)")[![Rarst](https://avatars.githubusercontent.com/u/737584?v=4)](https://github.com/Rarst "Rarst (5 commits)")[![willmot](https://avatars.githubusercontent.com/u/308507?v=4)](https://github.com/willmot "willmot (5 commits)")[![rmccue](https://avatars.githubusercontent.com/u/21655?v=4)](https://github.com/rmccue "rmccue (4 commits)")[![franz-josef-kaiser](https://avatars.githubusercontent.com/u/387666?v=4)](https://github.com/franz-josef-kaiser "franz-josef-kaiser (3 commits)")[![scottsweb](https://avatars.githubusercontent.com/u/411945?v=4)](https://github.com/scottsweb "scottsweb (2 commits)")[![richardtape](https://avatars.githubusercontent.com/u/116946?v=4)](https://github.com/richardtape "richardtape (1 commits)")[![joehoyle](https://avatars.githubusercontent.com/u/161683?v=4)](https://github.com/joehoyle "joehoyle (1 commits)")[![justin-lovell](https://avatars.githubusercontent.com/u/178498?v=4)](https://github.com/justin-lovell "justin-lovell (1 commits)")[![maiki](https://avatars.githubusercontent.com/u/74557?v=4)](https://github.com/maiki "maiki (1 commits)")[![bradyvercher](https://avatars.githubusercontent.com/u/1302030?v=4)](https://github.com/bradyvercher "bradyvercher (1 commits)")[![simonwheatley](https://avatars.githubusercontent.com/u/233434?v=4)](https://github.com/simonwheatley "simonwheatley (1 commits)")

### Embed Badge

![Health badge](/badges/trampoline-digital-wp-scss/health.svg)

```
[![Health](https://phpackages.com/badges/trampoline-digital-wp-scss/health.svg)](https://phpackages.com/packages/trampoline-digital-wp-scss)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.3k10](/packages/helsingborg-stad-municipio)[mautic/core

Mautic Open Source Distribution

9.8k2.6k9](/packages/mautic-core)[mediawiki/maps

Adds various mapping features to MediaWiki

78149.7k3](/packages/mediawiki-maps)[rainlab/blog-plugin

Blog plugin for October CMS

17158.6k](/packages/rainlab-blog-plugin)[civicrm/civicrm-drupal-8

Open source constituent relationship management for non-profits, NGOs and advocacy organizations.

19246.3k2](/packages/civicrm-civicrm-drupal-8)[starcitizentools/citizen-skin

A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.

3355.8k](/packages/starcitizentools-citizen-skin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)