https://github.com/watilde/jsss-compiler
A altCSS: JavaScript-Based Style Sheets Preprocessor
https://github.com/watilde/jsss-compiler
javascipt javascript jss style-sheets-preprocessor
Last synced: over 1 year ago
JSON representation
A altCSS: JavaScript-Based Style Sheets Preprocessor
- Host: GitHub
- URL: https://github.com/watilde/jsss-compiler
- Owner: watilde
- License: mit
- Created: 2014-06-13T18:52:56.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2017-05-09T10:40:38.000Z (about 9 years ago)
- Last Synced: 2025-02-28T01:18:14.778Z (over 1 year ago)
- Topics: javascipt, javascript, jss, style-sheets-preprocessor
- Language: JavaScript
- Homepage: http://watilde.github.io/jsss-compiler
- Size: 627 KB
- Stars: 32
- Watchers: 7
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# JSSS-Compiler
A altCSS: JavaScript-Based Style Sheets Preprocessor
## Badges
+ [](https://www.npmjs.org/package/jsss-compiler)
+ [](https://github.com/watilde/jsss-compiler/blob/master/LICENSE)
+ [](https://travis-ci.org/watilde/jsss-compiler)
+ [](https://gemnasium.com/watilde/jsss-compiler)
## Original
http://www.w3.org/Submission/1996/1/WD-jsss-960822
## Install
Using npm.
```
$ npm install -g jsss-compiler
```
Confirm.
```
$ jsss -h
Usage:
jsss style.js Compile JSSS to stdout
jsss style.js -o style.css Compile JSSS to file
Options:
-h, --help Print this message
-o, --out Output to single file
-e, --encoding JSSS File encoding (default: utf8)
-v, --version Print jsss-compiler version
```
## Example
### style.js
```js
tags.h1.color = 'red';
tags.h1.fontSize = '15px';
ids.foo.color = 'red';
ids.foo.fontSize = '15px';
ids.bar.color = 'blue';
ids.bar.fontSize = '10px';
classes.foo.all.color = 'red';
classes.foo.all.fontSize = '15px';
classes.bar.h1.color = 'blue';
classes.bar.h1.fontSize = '10px';
contextual(tags.ul, tags.li).color = 'red';
contextual(tags.ul, tags.li).fontSize = '10px';
```
### Compile
```
$ jsss style.js -o style.css
```
### style.css
```css
h1 {
color: red;
font-size: 15px;
}
ul {
color: red;
font-size: 10px;
}
li {
color: red;
font-size: 10px;
}
#foo {
color: red;
font-size: 15px;
}
#bar {
color: blue;
font-size: 10px;
}
.foo {
color: red;
font-size: 15px;
}
h1.bar {
color: blue;
font-size: 10px;
}
```
## tasks
https://github.com/watilde/gulp-jsss