@nixinova/nsstest2 v0.5.2-test.3

NovaSheets

A lightweight CSS preprocessor that is simple but powerful.

View full documentation

What is NovaSheets?

NovaSheets is a powerful CSS preprocessor with the ability to easily create intricate CSS files with simple syntax. With many built-in variables for you to use, you can take your stylesheets to the next level.

Why NovaSheets?

Unlike other CSS prepocessors which compile stylesheets when the site is built, NovaSheets is purely JavaScript and stylesheets are converted in the browser. NovaSheets has very simple, versatile syntax that is easy to pick up and use, as it builds largely off of CSS itself, with the addition of custom variables, which act as functions, templates, and mixins all in one. NovaSheets parses in plain text which means you do not have to worry about type conversions or escaping, giving you complete power over your stylesheets.

Installation

See the releases page of this repository to choose a version to use. Simply import the script into your HTML document and any embedded NovaSheets stylesheets will be parsed.

Usage

NovaSheets lets you declare variables (with optional parameters) and reuse these elsewhere in the document. For testing NovaSheets syntax, see this demo page.

Example

Input:

@var normal
    text-align: center;
    color: #eee;
@var margin = 1em
@var shaded
    text-align: left;
    background: $[bgcolor];
    color: $(@color | hash | 50% | 20% | 30%);
@endvar
div.default {$(normal); margin: $(margin);}
div.shaded {$(shaded | bgcolor=blue)}

Output:

div.default {text-align: center; color: #eee; margin: 1em;}
div.shaded {text-align: left; background: blue; color: #80334d;}

VSCode extension

A VSCode extension for NovaSheets syntax highlighting is available in the VSCode Marketplace via repository NovaSheets-vscode. This extension works for files with extensions .nss and .nss.txt.