United States of CSS Elements
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
lib
test
.gitignore
README.md
package.json

README.md

USCSS

United States of CSS Selectors.

Allows to declare rules for all states of an element in one line.

element {
  $states: :hover, :active, .small;
  display: block;
  font-style: italic;
  color: [blue, red];
  margin: [0, 0 50px, 0 25px, 10px];
  font-size: [1em, 1em, .8em]
}

will compile into:

element {
    display: block;
    font-style: italic;
	color: blue;
	margin: 0;
	font-size: 1em;
}
element:hover {
	color: red;
	margin: 0 50px;
	font-size: 1em;
}
element:active {
	margin: 0 25px;
	font-size: .8em;
}
element.small {
	margin: 10px;
}

1.1.0

As of 1.1.0 USCSS now allows for nested rules, but not in the fashion as LESS/SASS allows. You should use a "$" character at the beginning of children selector. Children selectors must be written relative to the main element. i.e. "$ a" -> el a {...}

p {
    $states: :not(.hede), $ a, $ i em:hover b;
    color: [blue, red, yellow, green];
    background: [url(lel.png),
                (url(lol.png) left center, url(ley.png) right bottom),
                blue,
                #f08];
    
}

will compile into:

p {
	color: blue;
	background: url(lel.png);
}
p:not(.hede) {
	color: red;
	background: url(lol.png) left center, url(ley.png) right bottom;
}
p a {
	color: yellow;
	background: blue;
}
p i em:hover b {
	color: green;
	background: #f08;
}

How to start

In the main directory of project run node demo/uscss.js.

style.css will appear next to it. You can configure input and output paths/files in uscss.json.

You only need "lib" folder and files in the demo folder.

Test

First run npm install to install jasmine-node. This is the only dependency.

In the main directory, run jasmine-node test