0.0.5 • Published 4 years ago
ce-css v0.0.5
const { CSS, Theme, less } = require("ce-css");
/* theme */
const theme = Theme.generate({
"material pink": {
primary: "#d81b60",
primaryLight: "#ff5c8d",
// {name} : color
}
});
theme.set("material pink");
/* css */
const card = new CSS({
bg: {
color: "#000000",
background: theme.primary // #d81b60
},
title: {
"font-size": "10px"
}
});
/* inherit */
const UserPost = new CSS({
...card.source,
time: {
color: "#EEEEEE"
}
});
console.log(UserPost.bg); // color: #000000; background: #d81b60
console.log(UserPost.time); // color: "#EEEEEE";
/* parse */
const style = CSS.parse(`
.text {
color: #FFFFFF;
font-size: 2px;
}
#card {
background-color: red; }.a {
margin: auto;}
`);
console.log(style.text); // color: #FFFFFF; font-size: 2px;
console.log(style.card); // background-color: red;
/* parse data -> class CSS */
const style2 = new CSS(CSS.parse(`
.box {
color: red;
}
`));
console.log(style2); // [class CSS]
/* less */
const { px, zpx, pe } = less; // view module/less.js
console.log( px(10.2) ); // "10.2px"
console.log( zpx(10.2) ); // "10px"
console.log( pe(10.2) ); // "10.2%"
##Installation
$ npm install ce-css
##Features ・Define css with js ・Inherit css ・Parse string css ・Theme settings ・Switching themes
##Use ・template engine. ・MEAN stack site
##contents
[class CSS] {
static parse(String: css text) {}
get source() {}
}
[class Theme] {
static get get() {}
static set(String: Theme name) {}
}
<less>
module.exports.px = px => `${px}px`;
module.exports.em = em => `${em}em`;
.....more