How do you handle custom Sass variables?

How do you all deal with custom Sass variables in your projects?

I’d like to separate my custom variables from the settings file so it’s easier to update Foundation when there are newer versions.

Ultimately, the colors are the biggest issues.

I currently do this:

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'custom-global-variables';
@import 'motion-ui';

and in _settings.scss

$gray600: #393939;
$gray500: #5F5F5F;
$gray400: rgba(#979797, 0.3);
$light-background: #f9f9f9;

I’d like all the custom colors to be in the _custom-global-variables.scss file. Should the framework just have a separate _colors.scss file? How do you handle your custom variables?

In our projects we used a _variables file and put all the generated variables from the design / mockup software there and adjusted the _settings file as needed.

This contained font sizes, fonts, colors, shadows, …

2 Likes

Ok, that’s basically what we do. I will try a separate _colors.scss file next project and import it before _setting.scss. I think this would be the best practice since $light-gray, $medium-gray, $dark-gray are never enough grays.