@nirbos/mark v0.0.1
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/markAfter 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.
6 years ago