Global Variables

You can change how Cell generates CSS by modifying the available global variables. To overwrite the default variables simply re-define them in your Sass before including your modules.

@import 'path/to/cell';

$moduleNamespace: 'CELL-';

@include module('button') {
  display: inline-block;
}

CSS Output

.CELL-button, [class*="CELL-button--"] {
  display: inline-block;
}

$moduleNamespace

Prepend modules names with the specified namespace when generating CSS

Default	null
Type	String

$modifierGlue

The glue to connect modifiers to modules/components

Default	--
Type	String

$componentGlue

The glue to components to modules/components

Default	__
Type	String

$extendOptions

When using the Option mixin, control whether modifiers are generated for each option

Default	true
Type	Boolean

$sassConfigParser

When using this() to retreive a configuration value or using create-config() to generate configuration, optionally parse the value(s) using a custom function

Default	null
Type	String (name of the current module)

$outputCSSFromConfig

When enabled, module configuration will be parsed as Cell Query

Default	false
Type	Bool

$module

WARNING: Do not manually overwrite this variable

Returns the name of the current module (alias: $this)

Default	null
Type	String (name of a function)