Overriding variables in SCSS

Post Reply
bbjosh
Posts: 1
Joined: 07 Jan 2019, 18:20

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:

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
Posts: 431
Joined: 12 Sep 2017, 10:44

15 Jan 2019, 09:38

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

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests