@nirbos/mark

Mark

Mark is a small SASS package that helps you find elements you previously marked in your styles.

Installation

Mark is available via npm or yarn.

npm install @nirbos/mark
# or
yarn add @nirbos/mark

After installing, simply reference Mark in your scss file.

@import '_mark.scss';

Configuration

Unless changes are made to the configuration, the Mark default configuration is used.

Option	Default
"mark"	"silent"
"silent-parent"	".dev:root"
"container"	"&:after"
"text"	"marked"

$mark-settings: (
    "mark": false,
    "silent-parent": ".dev:root",
    "container": "&:after",
    "text": "marked"
) !default;

Options

There are four possible options: mark, silent-parent, container and text.

Option	Values	Description	Default
"mark"	true / false / "silent"	The visibility of the marks.	"silent"
"silent-parent"	string	This is the element that has to have the current marked element as a child for it to turn visible. All CSS selectors are possible.	".dev:root"
"container"	string	This is the pseudo-element which gets used to render the mark to the current element.	"&:after"
"text"	string	The content of the mark.	"marked"

Mark

"mark" has three possible options: true, false and "silent".

Option	Description
true	All marks are visible everywhere in the document.
false *	No mark is rendered.
"silent"	All marks are rendered, but remain hidden. If the current element is a child of silent-parent, this turned visible. The main purpose of silent is testing.

* Everything besides "silent" and true as a parameter for mark will simply be ignored, the mark will not get rendered.

Using Mark in your Styles

You can override the default configuration by making your own Mark settings:

$mark-settings: (
    "mark": true,
    "silent-parent": "body.dev",
    "container": "&:before",
    "text": "I'm marked"
) !global;

If you want to use the Mark default settings, or have them already customized to your likings, simply use the Mark mixin to mark an element.

.navigation {
    @include mark;
}

Besides overriding the configuration by resetting mark-settings it is also possible to customize specific calls for specific elements of your code.

.footer {
    @include mark( $text: "I will not only be marked, but will also ignore the mark-settings", $mark: true );
}

All of the four options mark, silent-parent, container and text are possible. When using them when including the mixin, you have to put a $ right in front of them.