NovaSheets Built-in Functions

NovaSheets includes many built-in variables which take the form of a variety of functions. The following is a list of these and their syntax.

Contents

• Mathematics
  • @abs
  • @acos
  • @asin
  • @atan
  • @degrees
  • @e
  • @ceil
  • @clamp
  • @cos
  • @floor
  • @gradians
  • @log
  • @max
  • @min
  • @mod
  • @pi
  • @percent
  • @radians
  • @root
  • @round
  • @sin
  • @tan
• Logic
  • @bitwise
  • @boolean
  • @if
• Text
  • @capitalize
  • @encode
  • @extract
  • @length
  • @lowercase
  • @replace
  • @titlecase
  • @uncapitalize
  • @uppercase
• Loops
  • @each
  • @repeat
• Color
  • @blend
  • @color
    • Hex
    • RGB
    • RGBA
    • HSL
    • HSLA
    • General
  • @colorpart
  • @contrast
  • @darken
  • @desaturate
  • @grayscale
  • @lighten
  • @luma
  • @spin
• CSS
  • @breakpoint
  • @prefix

Mathematics

@abs

Syntax: $( @abs | <num> )
Result: Outputs the absolute value of <num>.
Example: $( @abs | -2 ) → 2

@acos

Syntax: $( @acos | <num> )
Result: Outputs the arccosine of <num>.
Example: $( @acos | 0 ) → 1.5707963267948966

@asin

Syntax: $( @asin | <num> )
Result: Outputs the arcsine of <num>.
Example: $( @asin | 0.5 ) → 0.5235987755982989

@atan

Syntax: $( @atan | <num> )
Result: Outputs the arctangent of <num>.
Example: $( @atan | 10 ) → 1.4711276743037347

@degrees

Syntax: $( @degrees | <num>[rad|grad] )
Result: Converts <num> from either radians (default) or gradians to degrees.
Example: $( @degrees | 100grad ) → 90

@e

Syntax: $( @e )
Result: Outputs e (2.71828...).
Example: $( @e ) → 2.718281828459045

@ceil

Syntax: $( @ceil | <num> )
Result: Rounds <num> up to the nearest integer.
Example: $( @ceil | 4.2 ) → 5

@clamp

Syntax: $( @clamp | <val> | <min> | <max>)
Result: Outputs <val> only if it is between <min> and <max>, otherwise outputs either <min> or <max>, whichever is closer to <val>.
Example: $( @clamp | 1.4 | 2 | 5 ) → 2

@cos

Syntax: $( @cos | <num> )
Result: Outputs the cosine of <num> in radians.
Example: $( @cos | 0 ) → 1

@floor

Syntax: $( @floor | <num> )
Result: Rounds <num> down to the nearest integer.
Example: $( @floor | 3.8 ) → 3

@gradians

Syntax: $( @gradians | <num>[deg|rad] )
Result: Converts <num> from either degrees (default) or radians to gradians.
Example: $( @gradians | 90deg ) → 100

@log

Syntax: $( @log | <base> | <val> )
Result: Outputs the logarithm (base base) of <val>.
Example: $( @log | 2 | 64 ) → 6

@max

Syntax: $( @max | <a> | <b> | ...)
Result: Outputs the maximum value of its arguments.
Example: $( @max | 2 | 7 | 5 ) → 7;

@min

Syntax: $( @min | <a> | <b> | ...)
Result: Outputs the minimum value of its arguments.
Example: $( @min | 1 | 2 | 3 ) → 1;

@mod

Syntax: $( @mod | <a> | <b> )
Result: Outputs <a> modulo (remainder after division by) <b>.
Example: $( @mod | 10 | 6 ) → 4

@pi

Syntax: $( @pi )
Result: Outputs pi (3.14159...).
Example: $( @pi ) → 3.141592653589793

@percent

Syntax: $( @percent | <num> )
Result: Outputs <num> as a percentage.
Example: $( @percent | 0.5 ) → 50%

@radians

Syntax: $( @radians | <num>[deg|grad] )
Result: Converts <num> from either degrees (default) or gradians to radians.
Example: $( @radians | 90 / $(@pi) ) → 0.5

@root

Syntax: $( @root | <n> | <val> )
Result: Outputs the <n>th root of <val>.
Example: $( @root | 3 | 27 ) → 3

@round

Syntax: $( @round | <val> | <dp> )
Result: Rounds <val> to <dp> decimal places.
Example: $( @round | $(@pi) | 5 ) → 3.14159

@sin

Syntax: $( @sin | <num> )
Result: Outputs the sine of <num> in radians.
Example: $( @sin | 0.5*$(@pi) ) → 1

@tan

Syntax: $( @tan | <num> )
Result: Outputs the tangent of <num> in radians.
Example: $( @tan | 12 ) → -0.6358599286615808

Logic

@bitwise

Syntax: $( @bitwise | <contents> )
Result: Performs bitwise operations on <contents>.
Example: $(@bitwise | ~2 & 3) → 1

@boolean

Syntax: $( @boolean | <contents> )
Result: Performs boolean operations on <contents>.
Allowed operators are ==, !=, <, >, !/not, ||/or, nor, &&/and, nand, xor, xnor. Example: $(@boolean | true && false ) → false

@if

Syntax: $( @if | <test> | <if-true> | <if-false>)
Result: Outputs the either content of <if-true> if <test> resolves to boolean "true" or <if-false> if it resolves to false. Allowed operators are ==, !=, <, >, !/not, or, nor, &&/and, nand, xor, xnor. If <test> resolves to false, null, undefined, NaN, or an empty string, <if-false> will be called, otherwise <if-true> will be.
Example: $(@if | 1 == 2 | nonsense | truth ) → truth

Text

@capitalize

Alias: @capitalise
Syntax: $( @capitalize | <string> )
Result: Capitalizes the first letter of string.
Example: $( @capitalize | caps ) → Caps

@encode

Syntax: $( @encode | <string> )
Result: Encodes string as a URL segment.
Example: $( @encode | <text>=true ) → %3Ctext%3E%3Dtrue

@extract

Syntax: $( @extract | <list> [| <delimiter = ",">] | <index> )
Result: Extracts an item from the specified <index> (one-based) from <list> in which each list item is separated by <delimiter>, which defaults to a comma (,).
Example: $(@extract | A,B,C | 1 ) → A

@length

Syntax: $( @length | <string> )
Result: Outputs the length of string.
Example: $( @length | 123456 ) → 6

@lowercase

Syntax: $( @lowercase | <string> )
Result: Changes string to be lowercase.
Example: $( @lowercase | is NOW Lowercase ) → is now lowercase

@replace

Syntax: $( @replace | <string> | <find> | <replace> )
Result: Replaces all instances of <find> in <string> with <replace>. Supports regular expressions.
Example: $( @replace | t3xt | /[0-9]/ | e ) → text

@titlecase

Syntax: $( @titlecase | <string> )
Result: Capitalizes the first letter of each word in string.
Example: $( @titlecase | title case text ) → Title Case Text

@uncapitalize

Alias: @uncapitalise
Syntax: $( @uncapitalize | <string> )
Result: Uncapitalizes the first letter of string.
Example: $( @capitalize | ALL CAPS ) → aLL CAPS

@uppercase

Syntax: $( @uppercase | <string> )
Result: Changes string to be uppercase.
Example: $( @uppercase | is now uppercase ) → IS NOW UPPERCASE

Loops

@each

Syntax: $( @each | <list> [| <splitter = ","> [| <joiner = splitter>]] | <content> )
Result: Peforms iterative content on items in <list> (where each item is separated using <splitter>). Instances of $i in <content> will be replaced with the index (one-based), instances of $v will be replaced with the value of the current item, and variants of $v[0], $v[$i+1], etc, will be replaced with the value of that specified item. The output will be delimited with <joiner>; when <joiner> is not set, it defaults to the value of <splitter>, which in turn defaults to a comma (,). The value of <joiner> is not trimmed, so any whitespace inside will appear in the output.
Example: $( @each | 10,20,30 | , | | $v+$i ) → 11 22 33

@repeat

Syntax: $( @repeat | <amount> [| <delimiter>] | <content> )
Result: Repeats <content> the number of times specified by <amount>, separated by <delimiter> if set. Instances of $i in <content> will be replaced with the index (one-based), instances of $v will be replaced with the value of the current item, and variants of $v[0], $v[$i+1], etc, will be replaced with the value of that specified item.
Example: $( @repeat | 4 | , | [$i] ) → [1],[2],[3],[4]

Color

@blend

Syntax: $( @blend | <color1> | <color2> | [<amount = 0.5>] )
Result: Blends two input colors. Has an optional <amount> parameter (which defaults to 0.5/50%) which controls which color is more dominant; values between 0% and 0.5/50% bias the output to <color1> while values between 0.5/50% and 1/100% bias the output to <color2>.
Example: $( @blend | #000 | rgb(255,255,255) | 0.25 ) → rgb(63, 63, 63)

@color

Alias: @colour
Syntax: $( @color | <type> | <args> )
Result: Outputs a CSS color depending on the value of <type> (see subsections below).

Hex

Syntax: $( @color | {hex|hexadecimal|hash|#} | <r> | <g> | <b> | [<a>] )
Result: Converts its arguments into a hexadecimal color.
Example: $( @color | hash | 255 | 64 | 128) → #ff4080

RGB

Syntax: $( @color | rgb | <r> | <g> | <b> ) or $( @color | rgb | <hash> )
Result: Outputs CSS color function rgb(<r>, <g>, <b>).
Example: $( @color | rgb | #f71a8e ) → rgb(247, 26, 142)

RGBA

Syntax: $( @color | rgba | <r> | <g> | <b> | <a> ) or $( @color | rgba | <hash> )
Result: Outputs CSS color function rgba(<r>, <g>, <b>, <a>).
Example: $( @color | rgba | 0xff | 0 | 128 | 80 ) → rgba(255, 0, 128, 80)

HSL

Syntax: $( @color | hsl | <h> | <s> | <l> )
Result: Outputs CSS color function hsl(<h>, <s>, <l>).
Example: $( @color | hsl | 200 | 53 | 158/2 ) → hsl(200, 20%, 30%)

HSLA

Syntax: $( @color | <hsla> | <h> | <s> | <l> | <a> )
Result: Outputs CSS color function hsla(<h>, <s>, <l>, <a>).
Example: $( @color | hsla | 10% | 128 | 0xfa | 95% ) → hsla(26, 50%, 98%, 243)

General

Syntax: $( @color | <type> | <x> | <y> | <z> | [<a>] )
Result: Outputs CSS level-4 color function <type>(<x> <y> <z>) or <type>(<x> <y> <z> / <a>).
Example: $( @color | lch | 20 | 60 | 250 ) → lch(20 60 250)

@colorpart

Alias: @colourpart
Syntax: $( @colorpart | <part> | <color> )
Result: Outputs CSS color segment part from outputted color function color. Accepted values for part are red, green, blue, or alpha for hex or RGB(A) colors; hue, saturation, lightness, or alpha from HSL(A) colors; all are case insensitive and allow truncated forms (e.g., r or rd for "red").
Example: $( @colorpart | red | #fff ) → 255

@contrast

Syntax: $(@contrast | <color> | <light value> | <dark value> )
Result: If the luminance of <color> is dark (below 0.5), <light value> is outputted; otherwise <dark value> is.
Example: $(@contrast | #fff | white | black ) → black

@darken

Alias: @shade
Syntax: $( @darken | <color> | [<amount = 0.5>] )
Result: Blends <color> with black by <amount> (which defaults to 0.5/50%).
Example: $( @darken | hsl(300, 50%, 20%) | 10% ) → hsl(300, 50%, 10%)

@desaturate

Alias: @tone
Syntax: $( @desaturate | <color> | [<amount = 0.5>] )
Result: Blends <color> with gray by <amount> (which defaults to 0.5/50%).
Example: $( @desaturate | rgb(128, 10, 255) | 0.4 ) → rgb(128, 57, 204)

@grayscale

Syntax: $( @grayscale | <color> ) (alternatively, $( @greyscale | ... ))
Result: Neutralizes the red, green, and blue color channels of an RGB or hex color, or changes the saturation of an HSL color to 0%.
Example: $( @grayscale | hsl(100, 30%, 40%) ) → hsl(100, 0%, 40%)

@lighten

Alias: @tint
Syntax: $( @lighten | <color> | [<amount = 0.5>] )
Result: Blends <color> with white by <amount> (which defaults to 0.5/50%).
Example: $( @lighten | #000 | 50% ) → #7f7f7f

@luma

Syntax: $( @luma | <color> )
Result: Outputs the relative luminance (between 0 and 1) of an RGB or hex <color>. Fails if given an HSL value or another type of color.
Example: $( @luma | #f05 ) → 0.21915877154744204

@spin

Syntax: $( @spin | <color> | <amount = 0.5> )
Result: Cycles the hue of <color> by <amount>.
Example: $( @spin | hsl(100, 50%, 20%) | 100 ) → hsl(200, 50%, 20%)

CSS

@breakpoint

Syntax: $(@breakpoint | <pixels>[px] [| <selector>] | <smaller> [| <larger>] )
Result: Outputs two media queries, one for widths less than <pixels> (containing <smaller>) and one for widths greater than or equal to <pixels> (containing <larger>). When <selector> is set, <smaller> and <larger> should not be block declarations; otherwise, they should be. <larger> is optional in both cases.
Example: $(@breakpoint | 800px | .container | width: 100%; | width: 20vw; ) → @media (min-width: 800px) { .container { width: 100%; } } @media (max-width: 799px) { .container { width: 20vw;} }

@prefix

Syntax: $(@prefix | <property> | <value> )
Result: Adds all vendor prefixes to a CSS property.
Example: $(@prefix | transition | all 1s ) → -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;