https://github.com/co2-git/js4
Write CSS with ES6 JavaScript.
https://github.com/co2-git/js4
Last synced: about 1 year ago
JSON representation
Write CSS with ES6 JavaScript.
- Host: GitHub
- URL: https://github.com/co2-git/js4
- Owner: co2-git
- Created: 2015-08-01T20:44:27.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-08-01T20:45:57.000Z (almost 11 years ago)
- Last Synced: 2025-02-01T16:23:22.504Z (over 1 year ago)
- Language: JavaScript
- Size: 105 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
js4
===
Write CSS with ES6 JavaScript.
# Install
```bash
npm install -g js4 # may require sudo
```
# Usage
Write your CSS in JS in a file, for example `css.js`:
```js
new Rule('body', { color : 'red' });
new Rule('#id, .class > [attr]', { 'text-align' : 'center' });
```
Then compile it from terminal:
```bash
js4 css.js
```
Outputs:
```css
body {
color: red;
}
#id, .class > [attr] {
text-align: center;
}
```
To compile to a source file:
```bash
js4 css.js > css.css
```
# Unleash the power of JavaScript
Now you can use JS to do advanced stuff in your CSS such as declarations or scopes:
```js
const COLOR = 'red';
for ( let i = 0; i < 10; i ++ ) {
new Rule(`#p-${i}`, { color : COLOR, width : `${i * 25}px` });
}
```
# Mixins
You can use mixin and reusable rules such as:
```js
let reusable = new Rule('.foo', { color : 'red' });
new Rule('.bar', { reusable, 'padding' : '10px' });
```
```css
.foo {
color: red;
}
.bar {
color: red;
padding: 10px;
}
```
If you don't want the mixin to appear on CSS, do like this:
```js
let reusable = new Rule('.foo', { color : 'red' }, { render : false });
new Rule('.bar', { reusable, 'padding' : '10px' });
```