Configuration

Configuration

reSTYLE uses a configuration interface to enable certain features and modify internal behavior.

The configuration interface for reSTYLE is exposed via the restyle-config methods.

Below you’ll find a list of supported configuration options.

reSTYLE Options

restyle-config

reSTYLE exposes two methods for interacting with configuration options.

mixin

The first is a mixin named restyle-config. This mixin can be used to set configuration values:

@import "restyle";

@include restyle-config(/* config goes here */);

This mixin can either take a single config key with a value, or a map of values:

@import "restyle";

// set a single key-value
@include restyle-config(my-option, my-value);

// OR

// set multiple key-values at once using a map
@include restyle-config((
  option1: value1,
  option2: value2
));

restyle-config will correctly merge these values into the master config.

function

The restyle-config function is similar to the mixin version, but it can also be used to get a config value.

First, we’ll take a look at the familiar setter method.

@import "restyle";

// set a single key-value
$config: restyle-config(my-option, my-value);

// OR

// set multiple key-values at once using a map
$config: restyle-config((
  option1: value1,
  option2: value2
));

Now, let’s look at the getter method.

@import "restyle";

// get the entire global config as a map
$config: restyle-config();

// or get an individual config value
$my-config-option: restyle-config(my-option);

Temporary config

If you wish to only change the config temporarily, consider using the restyle-with-config. The mixin takes the same arguments as the restyle-config mixin, but only updates the global config for the scope of the mixin.

@import "restyle";

@include restyle-with-config(...) {
  // do stuff here with the new config
}

// the previous config is restored here

Up next

Now that you’ve got reSTYLE working and configured, let’s find out why UI patterns are so powerful.

• getting started
• configuration
• restyle-config