# jstylesheet
> 【原创】利用JavaScript写CSS吧！
Latest version **1.0.3** (published 2019-04-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install jstylesheet
pnpm add jstylesheet
yarn add jstylesheet
bun add jstylesheet
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-04-17 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | XiWell |
| Maintainers | xiwell |
| Keywords | jstylesheet, jcss, jstyle, css, style, j-style, jss, j-css, j-scss, j-styles, j-stylesheet, jstylesheets |
## Links
- npm: https://www.npmjs.com/package/jstylesheet
- Repository: https://gitee.com/weexi/x-jss
- npm.io page: https://npm.io/package/jstylesheet
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2019-04-17
## README
# JStylesheet
#### 介绍
【原创】利用JavaScript写CSS吧！
**使用**
```javascript
var JSS = require("jstylesheet");
var style = new JSS({
body: {
margin: 0,
padding: 0,
div: {
fontSize: "10px",
"&.top-div": {
color: 'red'
},
"&.bottom-div": {
color: "blue"
},
"&:first-child": {
fontSize: "12px"
},
"&:last-child": {
fontSize: "14px"
},
"&:not(:first-child)":{
textAlgin: "right"
},
$hover: {
boxShadow: "0 0 10px #eee"
},
span: {
color: 'yellow'
}
}
}
}).compile();
```
```javascript
// 自动添加到元素内
style.append()
```
**在浏览器中使用**
```html
```
// 生成CSS ==>
```html
body { margin: 0; padding: 0 }
body div { font-size: 10px }
body div.top-div { color: 'red' }
body div.bottom-div { color: 'blue' }
body div:first-child { font-size: '12px' }
body div:last-child { font-size: '14px' }
body div:not(:first-child) { text-align: 'right' }
body div:hover { boxShadow: "0 0 10px #eee" }
body div span { color: 'yellow' }
```
---
_Source: https://npm.io/package/jstylesheet · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._