Clean, simple, for styling the web.
Check out the docs and examples on csstyle.io
You can use csstyle with either Sass or postcss.
Setup your project with either Sass or Postcss. If you're using Sass make sure you have the latest stable SASS (3.4).
Add id="csstyle"
to your html or body element. This is necessary so that components with their
parts and options can nest indefinitely yet always be overridden by tweaks.
Download csstyle from npm:
npm install csstyle --save
or from bower:
bower install csstyle --save
If you're using Sass, import into your stylesheets:
@import 'csstyle';
If you're using postcss, add csstyle as a plugin:
postcss([require('postcss-nested'), require('csstyle')]);
Be sure to include postcss-nested and csstyle in that order.
Now you're set and can start creating components with options & parts, adding in tweaks as needed. Enjoy!
csstyle lets you change the style conventions to whatever suits your style.
options
: \--
parts
: __
tweaks
: \+
rootId
: csstyle
Override the defaults using SASS variables.
options
: $csstyle-option-symbol
parts
: $csstyle-part-symbol
tweaks
: $csstyle-tweak-symbol
rootId
: $csstyle-root-id
Example:
$csstyle-part-symbol: '\\/';
$csstyle-root-id: 'app';
Override the defaults by calling the cssytle function with an options object.
options
: optionSymbol
parts
: partSymbol
tweaks
: tweakSymbol
rootId
: rootId
Example:
require('../csstyle')({optionSymbol: '\\-', partSymbol: '\\/', rootId: 'app'})
IMPORTANT NOTE All characters besides _
need to be escaped! However, if you are using dashes, only the first one needs to be escaped. Use two backslashes to properly escape. For example to use a forward slash to separate parts, set $csstyle-part-symbol to \\/
. The generated CSS classes will then be escaped with a single backslash.
Yes. Libsass version 3.2.0 or greater fully supports csstyle.
In Sass you can append a &
to a selector or pseudo-selector to have it applied to the parent context. So for example to have a part
react when the component
gets hovered:
@include component(capacitor){
background: red;
@include part(flux){
background: orange;
}
&:hover & {
@include part(flux){
background: blue;
}
}
}
MIT