@nirbos/mark
v0.0.1
Published
Mark is a small SASS package that helps you find elements you previously marked :pushpin: in your styles.
Downloads
3
Readme
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.