Shared variables and mixins

It's possible to write your own less files, using the variables and import files from twitter bootstrap by taking advantage of the features provided by the AssetManager module. This has some advantages:

• Shared (centralized) colors
• Shared mixins (access to cool bootstrap mixins!)
• Plugins! (this allows for an easy way of writing plugins)

Setting this up

Let's not waste any time, here's some code:

<?php
return array(
    'twitter_bootstrap' => array(
        'filter' => array(
            'node_bin' => '/usr/local/bin/node', // Example to specify the location of the node bin
        ),
        'variables' => array(
            'green' => '#ff0', // Simple variable overriding example
        ),
    ),
    'asset_manager' => array(
        'resolver_configs' => array(
            'map' => array(
                'css/style.css' => __DIR__ . '/../public/css/style.less',
            ),
        ),
        'filters' => array(
            'css/style.css' => array(
                array(
                    'service' => 'SxBootstrap\Service\BootstrapFilter',
                ),
            ),
        ),
    ),
);

asset_manager config key

The asset_manager config is used to accomplish the bootstrap context from our less files.

Here, I'm setting up a single asset in the map, which will resolve to a less file. I could have used paths, prioritized_paths etc, but I chose to keep it simple for the sake of this document. You can find out more about resolvers on this page.

In the example code about, I'm specifying a filter in the filters key. The filter is specifically for css/style.css (find out more about filters here). One of the filters supplied (and in our case the only filter) is the filter with type service. The service being used is SxBootstrap\Service\BootstrapFilter. This filter will allow you to use the variables used and defined by twitter bootstrap inside of the less file it's filtering.

Using mixins

If you were thinking about using the twitter bootstrap mixins, I'd like to congratulate you for being awesome! I've made this possible just for you. Yes, you specifically. Here's an example:

@import "my.variables.less";
@import "mixins.less"; // Here we are including the magic from twitter bootstrap.

.my-cool-class {
    .box-shadow(0 5px 10px rgba(0,0,0,.2)); // Apply a mixin
    color: @green; // Use a variable.
}

That's about it

I'd say this covers pretty much all of it. Now go out, and have some fun with this functionality.