scorpio
v0.3.0
Published
JavaScript stylesheets
Downloads
17
Maintainers
josteinbeReadme
Scorpio
CSS as JavaScript
npm install --save-dev scorpio
applyCSS( // Adds <style> tag to <head>
$(".foo, .bar",
"font: 12px Times",
// Expands to ".foo em, .bar em" - like sass or less
$("em",
"border: 5px solid red"
),
// this will also be scoped under the ".foo" selector
someFunctionThatReturnsScorpioStyling()
)
);Why?
- Simpler builds
- CSS and JS can share data
- Import into selector scopes (like above)
- Generate styles programmatically
Scorpio is written in plain old JavaScript, so that it works anywhere. It can be imported into a bundle using something like webpack, or included directly, like plain javascript. It will export its API functions as a node module, and/or on window.scorpio.
API
$(selector, rulesAndChildren...)
Returns a selector with the given rules and child selectors. Child selectors will be scoped under the parent selector. See above example.
CSS(selectors...)
Returns a CSS string representation of the given selectors.
applyCSS(selectors...)
Same as CSS, except that it applies the styles instead of returning them. This is achieved by appending a <style> tag to document.head.