Skip to content

Unify SCSS variables

Currently we have a lot of CSS to override bootstrap styles. Instead we should be configuring using scss variables. However, it's not easy to see what/how to customize because our scss vars are spread over a few files.

This also means some styles don't work. e.g. .btn-outline-primary (from BS) gets overridden by .btn style in buttons.scss

Current imports

@import "framework/variables";
@import 'framework/variables_overrides';
@import 'bootstrap_migration';
// ...other imports

Proposed variables.scss

// all our current vars
$gl-text-color: #222;

// variables from variables_overrides and bootstrap_migration.scss
$text-color: $gl-text-color;

@import "bootstrap/variables";

Benefits

  • proper overriding of BS variables
  • variables are all together
Edited by Simon Knox