Home Installation Install Documentation Docs Versions Demo

NovaSheets Documentation



const NovaSheets = require('novasheets');
NovaSheets.parse('@var color = #fff @endvar $(@shade | $(color) | 50% )'); // "#7f7f7f"
NovaSheets.compile('stylesheet.nvss', 'output.css'); // void

NovaSheets contains two functions, parse and compile. After installing NovaSheets using npm install novasheets, import these using const { parse, compile } = require('novasheets');. See Commands for usage.


The command-line mode of NovaSheets gives you four console commands: --parse, --compile, --help, and --version. The latter two are meta-commands. When installed globally, run commands using novasheets ...; when installed locally, use npx novasheets ....



After the NovaSheets source code is added to the web page (see Install), stylesheets can be either be imported from external files or embedded locally.


Simply link to external NovaSheets files in the header of the page using <link> tags with the rel attribute set to "novasheet" (or "novasheets").

<link rel="novasheet" href="example.nvss">


Inline stylesheets can be created by simply setting the type attribute of an element to "novasheet" (or "novasheets") and putting NovaSheets content inside. Note that HTML may interfere with NovaSheet styles if they are placed inside regular block elements, so <style> or <script> tags are recommended. When using <script> tags, surround the entire stylesheet content in backticks (`) to avoid JavaScript errors in the console.

<style type="novasheets">
    .element {
		display: inline-block;
    	.child {font-size: 2/3em;}
<script type="novasheets">`
    div {
		background-color: brown;
    	img {border: 2px solid;}


Browser usage supports similar scripting to Node usage, but with the only function being parseNovaSheets(). When set with no parameters, it parses any embedded NovaSheets syntax/files on the page. Otherwise, the raw NovaSheets input (first parameter) is parsed and returned as a string. The second parameter may be set to an instance of a NovaSheets class.



More info: Variables

NovaSheets variables are created by starting a line with @var. Anything after that space will be the name of the variable. The contents of a variable are found either on the lines beneath it, all the way up until either another variable declaration or the keyword @endvar, or as the content to the right of the first equals sign on the declaration line.

Variables are referenced using a dollar sign ($) followed by the variable name in parentheses ((...)). Arguments are passed by listing parameter names followed by the argument contents, with each one prefixed with a pipe. Parameters of a variable are referenced similar to variables but using square brackets instead of parentheses ($[...]). The default contents of an argument can be set by adding a pipe following by the default argument content to its name.


More info: Operators

NovaSheets supports manipulating numerals using raw mathematical operators. These operators are orders of magnitude (e), exponentation (^ or **), multiplication (*), division (/), addition (+), and subtraction (-). Order of operations applies in that order; parentheses (( )) can be used to force a change in the order of operations.


More info: Selectors

NovaSheets includes CSS nesting, allowing for stylesheets to more closely reflect their HTML counterparts. Use an ampersand (&) to control where the parent selector shall be placed; by default it is prepended to the child selector separated with a space.


More info: Objects

NovaSheets treats all CSS declaration blocks as objects, and the values of each CSS property can be accessed using the format {attr: val;}<attr>. Declaration blocks can be substituted using the format $<selector>, where the content inside refers to the full selector identifier attached to that declaration block. These two can be combined, forming $<selector><attr>. All of the block's content can be dumped using $<selector>!.


More info: Comments

NovaSheets implements single-line comments (// ...), multi-line unparsed comments (/* ... */), static comments (/*/ ... /*/), and parsed comments (/*[ ... ]*/).

Parser constants

More info: Parser constants

The parser contains a few constants which affect how NovaSheets code is parsed. These constants can be modified by using the @option keyword on its own line anywhere in the document.