SCSS Import & Variables

[garrynewman]

This weekend I added import and variable support to scss. Let me know if you're seeing anything weird with this stuff.

Import

Imports another scss from the a relative folder, or absolute folder if that doesn't exist.

@import 'header'; // tries to load _header.scss
@import '_header.scss'; // tries to load _header.scss
@import 'header', 'footer', 'var'; // tries to load _header.scss, _footer.scss and _var.scss

Variables

Variables let you define things like font sizes, colours, and other units in one place and reuse them. This is useful if you have a palette you want to use so you only have to define it in one place.

The way the variables work right now in code are pretty simplistic. It's a straight find and replace.. I get the feeling that this isn't what real scss shit does on the backend, but it's working for us right now.

$background: #0F131A; // defines $background as this colour

mainmenupanel
{
	background-color: $background;
}

[louiefox]

Thanks, this is really useful!

[websaid]

This is a good step in the right direction and im glad that more SCSS functionalities are coming to sbox.
I tested the variables functionality a bit and discovered that you can't change the values of variable if its nested in a block:

I don't know if this is not possible with the parser but this would be really decent.