A tiny css preprocessor using javascript
npm install pico-css
``bash`
npm install pico-css
`js
const css = require('pico-css');
const {lighten} = require('pico-css/chroma.js');
const btn = (color)=>{
return css
cursor : pointer;
background-color: ${color};
&:hover{
background-color: ${lighten(color, 0.2)};
}
}
css
body{
margin-top : 20px;
button{
font-size : 2em;
${btn('#dabb1e')}
}
};
// Converts to -->
body{
margin-top: 20px;
}
body button{
font-size: 2em;
cursor: pointer;
background-color: #dabb1e;
}
body button:hover{
background-color: #e1c84b;
}`
They also provide _way more features_ then is typically needed, and can lead to weird footguns and overly designed style systems. pico-css is just a simple lib for convert nested css into valid css while leveraging JS for variables and logic.
also ships with a little color manipulation utility called chroma. [Docs here]().`js
const css = require('pico-css');
const {lighten, isDark, fade} = require('pico-css/chroma');
//Adaptive text color to ensure high contrast for readability
const textColor = (color)=>isDark(color) ? 'white' : 'black';
const btnColor = 'blue';
css
`features
pico-css comes with most of the useful features of css pre-processor with none of the bloat.#### nesting
You can nest rules within rules
`js
css
//-->
body p {`#### parent selectors
The
& operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector.`js
css;//-->
p:hover{
`#### mixins (aka no-root selector)
You can pass just rules to the parser and it will process them. This allows you to build
mixins which can be used to copy repeated css, or create functions that return chunks of css.`jsconst btn = (color)=>{
return css
}css
;
`#### single line comments
Supports both block comments
/ / and single line comments //`js`api
####
css\style\ -> CSS String
The most common way to use pico-css is to use it as a tagged template literal. This will convert the template string and return valid a CSS string. You'll still need to save it, bundle it, or package it in some way, all pico-css cares about is parsing your styling.`js
const css = require('pico-css');
const {lighten} = require('pico-css/chroma.js');const btn = (color)=>{
return css
}css
;
`####
css.inject(styleObj) / css.inject\style\ -> Style Tag tag and injects it into the web document's head. Only works client side. Useufl for prototyping and experimenting.``js
const css = require('pico-css');
css.inject
body{
background-color : red;
}``