advanced-css-component-stylus
v1.0.1
Published
Stylus lib to create modular CSS components
Downloads
634
Readme
Advanced CSS Component (Stylus)
An elegant way to write sandbox Stylus component. Compile only what you need, and offer a possibility to skin it.
Installation
npm i advanced-css-component-stylus --save-dev
The css component concept
Imagine two similar components like this
.buttonLogin {
display: block;
width: 100%;
padding: 10px;
color: #000;
background: yellow;
border-color: #000;
}
.buttonReset {
display: block;
width: 100%;
padding: 10px;
color: #000;
background: green;
border-color: #000;
}
You can see a simple improvement
.buttonLogin,
.buttonReset {
display: block;
width: 100%;
padding: 10px;
color: #000;
border-color: #000;
}
.buttonLogin {
background: yellow;
}
.buttonReset {
background: green;
}
Now imagine this in stylus
$button {
display: block;
width: 100%;
padding: 10px;
color: #000;
border-color: #000;
}
.buttonLogin {
@extend $button;
background: yellow;
}
.buttonReset {
@extend $button;
background: green;
}
That's great but not really modular. Imagine to write it like this:
$button {
display: block;
width: 100%;
padding: 10px;
color: #000;
border-color: #000;
}
$button-skin-default {
background: yellow;
}
button($selector: '.button', $skin: 'default') {
{$selector} {
@extend $button;
@extend $button-skin-{$skin} !optional;
}
}
button('.buttonLogin');
$button-skin-green {
background: green;
}
button('.buttonReset', 'green');
This is totaly modular and your component is totaly skin friendly
How to use Advanced CSS Component (Stylus)
ACCExtend
To refine the code ACCExtend mixin extend the component default properties and the skin parameter
Instead of this:
@extend $button;
@extend $button-skin-{$skin} !optional;
You only write this:
ACCExtend('$button', $skin);
ACCRegister
In case of standard plugin or white label project, this is realy important to declare a component and add the possibility to configure it later.
This mixin add a map to $ACComponents
global variable.
It take 3 parameters
- componentName: ex. 'button'
- variationName: ex. '.buttonLogin' (it become the selector if selector is undefined in the next parameter)
- optionMap: default: () the configuration of the componentVariation (don't forget to escape the dollar in key for example:
$selector
will beselector
)
ACCRegister('button', '.buttonLogin');
ACCRegister('button', '.buttonReset', ($skin: 'green'));
ACCConfig
This method allow the possibility to configure your previously registered component.
For example .buttonReset
become like the default button, you will write this:
ACCConfig('button', '.buttonReset', ($skin: 'default'));