Sass/Less css nesting feature in 90 lines of PHP.
So you can write:
a {
color: blue;
.button {
padding:10px;
border:1px solid grey;
}
}
instead of this:
a {
color: blue;
}
a .button {
padding: 10px;
border:1px solid grey;
}
- In my opinion, the way
CSS
preprocessors handle nesting of child selectors is awesome -- the rest can be easily implemented in any programming language e.g. variables and includes (mixins). - It's much faster than a full implementation of Sass/Less.
Just include the nested-css.php
in your project then you can simply do:
$ncss = new NestedCSS();
#### parse nested css
echo $ncss->parse($input);
#### parse then include a .css file
$ncss->include('path/to/some.css');
#### include and cache the result
#### the cache system automatically refreshes
#### the cache once you make a change
$ncss->include('path/to/some.css',true);
We are using this library in production at SunSed.com so if you find a bug and submit it, we will fix it very quickly.
Todos:
- Add helper functions for handling colors and px calculations like in Sass.
- Try to see if you can improve compiler speed.
- Support for composer.
Nested-css is licensed under the MIT License.
Your nesting should be clean or it will fail compiling it correctly.
For example:
p {
color: blue;
.red{
color: red;
}
font-family: arial;
}
To keep nested-css compiler fast we keep it's internal very simple and instead of making it smarter/slower, we think it's better to put the burden on the programmer. So instead, please nest your CSS selectors like this:
p {
color: blue;
font-family: arial;
.red{
color: red;
}
}