Overriding variables in SCSS

[bbjosh]

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:

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';

Let's say I wanted to override the font size. In my ultima-layout-overrides.scss file I can set it like this:

Code: Select all

$fontSize: 40px;

/* For compact layout */
$c-fontSize: 40px;

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

[merve7]

Hi,
We added some overrides file in the last release. You can override variables in overrides/_layout_variables.scss or overrides/_theme_variables.scss files. You can see detail in Customizing Styles topic in http://primefaces.org/ultima-ng/#/documentation