Class: KssModifier

kss.KssModifier(dataopt)

A KssModifier object represents a single modifier of a KssSection.

This class is normally accessed via the kss module:

const KssModifier = require('kss').KssModifier;

Constructor

new KssModifier(dataopt)

Creates a KssModifier object and stores the given data.

If passed an object, it will add section, name, description, and className properties.

Parameters:
Name Type Attributes Description
data Object <optional>

An object of data.

Source:

Methods

className(classNameopt) → {string|KssModifier}

Gets or sets CSS class(es) suitable to insert into a markup sample to display the modifier's design.

By default, the CSS classes the className() method returns are based on the modifier's name. If the modifier's name includes a pseudo-class, e.g. :hover, this method will replace the ":" with "pseudo-class-", which matches the selector expected by the kss.js script and its KssStateGenerator.

modifier.name('.primary:hover');
modifier.className(); // Returns "primary pseudo-class-hover"

To override, the default behavior the class(es) can also be set manually; if the className parameter is provided, the className of this KssModifier is set and will later be returned as-is instead of calculated based on the name().

Parameters:
Name Type Attributes Description
className string <optional>

Optional. The class(es) of the KssModifier.

Source:
Returns:

If the className parameter is given, the current KssModifier object is returned to allow chaining of methods. Otherwise, the class name(s) of the KssModifier are returned.

Type
string | KssModifier

description(descriptionopt) → {string|KssModifier}

Gets or sets the description of the KssModifier.

If the description is provided, the description of this KssModifier is set. Otherwise, the description of the KssModifier is returned.

Parameters:
Name Type Attributes Description
description string <optional>

Optional. The description of the KssModifier.

Source:
Returns:

If description is given, the current KssModifier object is returned to allow chaining of methods. Otherwise, the description of the KssModifier is returned.

Type
string | KssModifier

markup() → {string}

Returns the HTML markup used to render this modifier.

The markup is retrieved from the KssModifier's section. See KssSection.markup() to see how to set the markup.

Source:
Returns:

The markup of the modifier.

Type
string

name(nameopt) → {string|KssModifier}

Gets or sets the name of the KssModifier, e.g. :hover, .primary, etc.

If the name value is provided, the name of this KssModifier is set. Otherwise, the name of the KssModifier is returned.

Parameters:
Name Type Attributes Description
name string <optional>

Optional. The name of the KssModifier.

Source:
Returns:

If name is given, the current KssModifier object is returned to allow chaining of methods. Otherwise, the name of the KssModifier is returned.

Type
string | KssModifier

section(sectionopt) → {KssSection|KssModifier}

Gets or sets the KssSection object this KssModifier is associated with.

If the section value is provided, the KssSection for this modifier is set. Otherwise, the KssSection of the modifier is returned.

Parameters:
Name Type Attributes Description
section KssSection <optional>

Optional. The KssSection that owns the KssModifier.

Source:
Returns:

If section is given, the current KssModifier object is returned to allow chaining of methods. Otherwise, the KssSection object the modifier belongs to is returned.

Type
KssSection | KssModifier

toJSON() → {Object}

Return the KssModifier as a JSON object.

Source:
Returns:

A JSON object representation of the KssModifier.

Type
Object