Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 

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

About

United States of CSS Elements

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.