https://github.com/scriptype/uscss
United States of CSS Elements
https://github.com/scriptype/uscss
Last synced: 8 months ago
JSON representation
United States of CSS Elements
- Host: GitHub
- URL: https://github.com/scriptype/uscss
- Owner: scriptype
- Created: 2014-05-09T13:50:20.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-06-10T01:53:10.000Z (almost 12 years ago)
- Last Synced: 2024-12-10T17:31:21.383Z (over 1 year ago)
- Language: JavaScript
- Size: 1.94 MB
- Stars: 11
- Watchers: 4
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
USCSS
=====
United States of CSS Selectors.
Allows to declare rules for all states of an element in one line.
```css
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:
```css
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 {...}`
```css
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:
```css
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`