NovaSheets Documentation

• Usage
  • Node
    • Command-line
    • Commands
  • Browser
    • Importing
    • Embedding
    • Scripting
• Syntax
  • Variables
  • Operators
  • Selectors
  • Objects
  • Comments
  • Parser constants

Usage

Node

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.

Command-line

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 ....

Commands

• Node: parse(input, [<class>])
  CLI: novasheets (-p|--parse) <input>
  • Parses the NovaSheets code given as its input and returns the parsed CSS content as a string. class (Node only) is an instance of a NovaSheets class.
  • Example:
     Node: parse("@var foo = bar=$[baz] @endvar $(foo|baz=qux)")
     CLI: novasheets -p "@var foo = bar=$[baz] @endvar $(foo|baz=qux)"
    • Returns string bar=qux.
• Node: compile(<input>, [<output>], [<class>])
  CLI: novasheets (-c|--compile) <input> [<output>]
  • Compiles the files matching the input glob into the output. If the output is not set, or it is a folder path (ending with /), the input filename (replaced with a .css extension) is used. class (Node only) is an instance of a NovaSheets class. Has no return value but logs console messages for each successful compilation.
  • Example:
     Node: compile('css/*.nvss', '_site/css/')
     CLI: novasheets -c css/*.nvss _site/css/
    • Compiles the NovaSheets syntax of all .nvss files in the css folder and places the outputted files (all now with extension .css) in the _site/css folder.
• CLI only: novasheets (-h|--help)
  • Displays a help message showing all commands.
• CLI only: novasheets (-v|--version)
  • Outputs the latest version of NovaSheets.

Browser

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.

Importing

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">

Embedding

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;}
	}
</style>

<script type="novasheets">`
    div {
		background-color: brown;
    	img {border: 2px solid;}
	}
`</script>

Scripting

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.

Syntax

Variables

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.

Operators

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.

Selectors

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.

Objects

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>!.

Comments

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.