NCss
NCss is a pure .NET library which aims to add some useful extensions to CSS. It's based on concepts blaintly stolen from Sass and Less, but written in C#. Features include:
Currently, there are three supported methods for creating CSS files from NCss source files:
This library is in beta, and still has several feature limitations, and likely bugs.
Download
Source and binaries for this can be downloaded from its project page at SourceForge.net.
Syntax
Nesting Rules
Nest rules to reduce the repition of selectors and more closely match the structure of the content you're styling.
| NCss | Css |
|---|---|
p.header {
width: 150px;
span {
font-weight: bold;
}
}
|
p.header {
width: 150px;
}
p.header span {
font-weight: bold;
}
|
Variables
Replace frequently used values with variables. Because the parser is somewhat dumb about variable replacement, you may need to quote references to variables when the reference name runs into alphanumeric content. See below:
| NCss | Css |
|---|---|
@bg: #FFFFFF;
@size: 15;
div.leftcol {
background-color: $bg;
h2 {
font-size: ${size}px;
}
}
|
div.leftcol {
background-color: #FFFFFF;
}
div.leftcol h2 {
font-size: 15px;
}
|
Functions
Replace common CSS paterns with function calls. Function calls in NCss support arguments with optional default values.
| NCss | Css |
|---|---|
@abs(left=0, top=0) {
position: absolute;
left: ${left}px;
top: ${top}px;
}
div.bottomright { $abs(150, 150); }
div.topright { $abs(150); }
div.bottomleft { $abs(,150); }
div.topleft { $abs(); }
|
div.bottomright {
position: absolute;
left: 150px;
top: 150px;
}
div.topright {
position: absolute;
left: 150px;
top: 0px;
}
div.bottomleft {
position: absolute;
left: 0px;
top: 150px;
}
div.topleft {
position: absolute;
left: 0px;
top: 0px;
}
|
Scope
Some may argue that this is not a feature, but it is something to be aware of. NCss supports a rough concept of scope in that every new CSS rule or function call is a new scope. Variables can be overwritten in that scope, and when the processor exits that scope, the variable goes back to its original value. Further, a variable declared in a scope will no longer exist once the process has left that scope. See the example below:
| NCss | Css |
|---|---|
@fgcol: #FF0000;
@bgcol: #0000FF;
div.innerScope {
@bgcol: #FFFFFF;
// Will be overridden
background-color: $bgcol;
color: $fgcol;
@newcol: #00FF00;
}
div.otherScope {
// Will be original value
background-color: $bgcol;
color: $fgcol;
// Would throw exception.
// border: 1px solid $newcol;
}
|
div.innerScope {
background-color: #FFFFFF;
color: #FF0000;
}
div.otherScope {
background-color: #0000FF;
color: #FF0000;
}
|
Comments
NCss supports both block and inline c-Style comments, which do not get rendered to the output.
| NCss | Css |
|---|---|
p {
// Ignore this rule.
// font-size: 15px;
/* And this one
font-weight: bold;
*/
// But not this one.
margin-bottom: 1em;
}
|
p {
margin-bottom: 1em;
}
|
Minified Rendering
NCss supports three types of output, Nice, One Line Per Rule, and OneLine.
Nice:
p {
font-size: 0.8em;
font-weight: bold;
}
div.hide {
display: none;
}
One Line Per Rule:
p { font-size: 0.8em; font-weight: bold; }
div.hide { display: none; }
One Line:
p { font-size: 0.8em; font-weight: bold; } div.hide {...
Processing NCss files
NCss Console Application
Included is a console application to convert NCss input to CSS output. It works on the standard input stream, rendering to standard output, and accepts one option argument (Nice, LinePerRule, or OneLine), which defines which rendering style to use. See example below:
NCss.exe OneLine < input.ncss > output.css
NCss Simple IHttpModule
Use only for testing! Drop this module in your ASP.NET application and add the following to your web.config for automatic NCss file handling. This module re-renders output for every request and should not be used in production.
<add verb="*" path="*.ncss"
type="PageOfBob.NCss.WebHandler.SimpleNCssHttpHandler" />
NCss Cached IHttpModule
Similar to the Simple IHttpModule module; it provides automatic handling of NCss files automatically in ASP.NET applications. Unlike the simple module, this module caches rendered files in temporary directory until the source file is changed or deleted.
<add verb="*" path="*.ncss"
type="PageOfBob.NCss.WebHandler.CachedNcssHttpHandler" />
Missing Features
NCss is still beta-quality. I strongly recommend extensive testing in a dev environment prior to going to production. And even then, you should probably just use pre-rendered CSS files rather than the automatic NCss handlers, at least until the bugs are all worked out. Fair warning: in development, the parser had a bad habit of getting stuck in infinite loops.
Other features I'd like to add:
- Import — Currently, @import rules break the parser; it'd be nice to import other NCss files and include them in the rendered output
- CDATA-style non-parsed blocks — Would be good for CSS hacks and other tricks that are not supported by the parser.
- Operations — Not likely to be supported as it would require a pretty significant parser overhaul, but I can see the value there. If anyone is up to the challenge...