https://github.com/arselzer/jscss

CSS preprocessor where CSS and JavaScript can be mixed (sort of)
https://github.com/arselzer/jscss

Last synced: 16 days ago
JSON representation

CSS preprocessor where CSS and JavaScript can be mixed (sort of)

• Host: GitHub
• URL: https://github.com/arselzer/jscss
• Owner: arselzer
• Created: 2014-04-24T20:21:43.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-08-05T18:33:22.000Z (over 9 years ago)
• Last Synced: 2024-04-14T07:58:45.578Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 163 KB
• Stars: 46
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
JsCSS

========

Embed CSS in your JavaScript.

It's like React's JSX, but for CSS.

## Usage

```bash

npm install -g jscss

jscss [--pretty] [filename]

```

## Syntax

JsCSS can differentiate between JavaScript and CSS (hopefully, using one big Regex).

This makes it possible to mix both languages in a quite useful way.

It's like LESS or Sass, only: JavaScript is the preprocessor.

Within CSS expressions, `|` can be used to create JavaScript zones.

They will be executed and the output will be merged with the CSS.

## Example

```CSS

var cool_colour = "rgb(39, 192, 129)";

* {

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

}

html {

    background-color: rgba(3, 4, 5, 0.6);

}

html[lang|="en"] {

    color: rgb(238 , 23, 12);

    font-family: Open Sans;

}

for (var i = 0; i < 5; i++) {

    div .hello:nth-child(|i|) {

        color: rgb(| i * 10 |, 20, |i * 20|);

    }

}

var i = 0;

p > li {

    background-color: |cool_colour|;

}

while (i < 4) {

    p > li.number-|i| {

        width: |i * 10|;

    }

    i++;

}

```

This will compile to plain CSS:

`jscss example.jscss --pretty`

```CSS

* {

    box-sizing: border-box;

      -webkit-box-sizing: border-box;

}

html {

    background-color: rgba(3, 4, 5, 0.6);

}

html[lang|='en'] {

    color: rgb(238 , 23, 12);

      font-family: Open Sans;

}

div .hello:nth-child(0) {

    color: rgb(0, 20, 0);

}

div .hello:nth-child(1) {

    color: rgb(10, 20, 20);

}

div .hello:nth-child(2) {

    color: rgb(20, 20, 40);

}

div .hello:nth-child(3) {

    color: rgb(30, 20, 60);

}

div .hello:nth-child(4) {

    color: rgb(40, 20, 80);

}

p > li {

    background-color: rgb(39, 192, 129);

}

p > li.number-0 {

    width: 0;

}

p > li.number-1 {

    width: 10;

}

p > li.number-2 {

    width: 20;

}

p > li.number-3 {

    width: 30;

}

```

## Aims

This isn't done yet. Things will change.

* Include a standard library for colour modifications.

* Plugin API

## License

MIT - `LICENSE`