Customising with SASS

Because Nuit (and Foundation) are written with SASS, you can write your own SASS that can override the default Nuit/Foundation settings.

To do so, include a nuit/_custom.scss in the root of your static files directory. This will get imported by Nuit when loaded, and variables set in there will override Nuit’s (and Foundation’s) defaults.

Available Variables

For a list of most variables, please refer to the Foundation docs. The following variables are used by Nuit when compiling the SASS:

Default:rgb(250, 250, 250)

The color of the left and right menus.


The with of the left menu on large screens.


The width of the left menu on medium screens.


The maximum width of the right menu.


The spacing between the menus and the content and window frame.


The color of active links in the menus.


The hover color of links in the menus.

Default:rgba(0, 64, 84, 0.05)

The background colour of active links in the menus.

Default:rgba(0, 64, 84, 0.03)

The background colour of hovered links in the menus.

Default:rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)

The colours of the parts of the Loading Animation.


The icon of each part of the Loading Animation.


The width of fixed-width modals, such as the login form and error pages.

Using Nuit’s Styles

To use the variables that Nuit and Foundation themselves use in your own CSS, but without including any of their rendered CSS, add the following to the top of your SCSS file:

@import "nuit/_styles"

You’ll then have access to the variables defined above, as well as any used by Foundation.