Overriding variables in SCSS
Posted: 08 Jan 2019, 13:55
Hi there,
I'm currently using Ultima in a project but I'd like some way to be able to override some of the variables in the SCSS source files.
Of course, I can edit the source files directly, but I'd lose those changes when I update Ultima.
For example, I'm currently creating overrides, defining the colour variables and importing the Ultima layout like this:
Let's say I wanted to override the font size. In my ultima-layout-overrides.scss file I can set it like this:
But because the variables in _variables.scss aren't specified with the !default attribute, my override has no effect.
Is there a way to work around this, or would it be possible to get Ultima updated so that all variables use the !default attribute? It would be useful to be able to make changes to Ultima like this, without editing the source files.
Thanks in advance!
Josh
I'm currently using Ultima in a project but I'd like some way to be able to override some of the variables in the SCSS source files.
Of course, I can edit the source files directly, but I'd lose those changes when I update Ultima.
For example, I'm currently creating overrides, defining the colour variables and importing the Ultima layout like this:
Code: Select all
/* Import layout overrides */
@import 'ultima-layout-overrides.scss';
/* Original Ultima layout colours */
/* !default means that the colour value specified only gets used if
the property isn't already set */
$primaryColor: #607D8B !default;
$primaryDarkColor: #37474F !default;
$primaryLightColor: #B0BEC5 !default;
$accentColor: #8BC34A !default;
$accentDarkColor: #558B2F !default;
$accentLightColor: #C5E1A5 !default;
$accentTextColor: #ffffff !default;
$darkMenuBgColor: #424242 !default;
$darkMenuHoverColor: #676767 !default;
$darkMenuRouterLinkActiveColor: #8BC34A !default;
$lightMenuRouterLinkActiveColor: #8BC34A !default;
$horizontalLightMenuRouterLinkActiveColor: #8BC34A !default;
/* Import vendor layout */
@import './ultima/sass/layout/layout';
Code: Select all
$fontSize: 40px;
/* For compact layout */
$c-fontSize: 40px;
Is there a way to work around this, or would it be possible to get Ultima updated so that all variables use the !default attribute? It would be useful to be able to make changes to Ultima like this, without editing the source files.
Thanks in advance!
Josh