Look into the way variables are loading in the sass

[thisisdano]

Having some issues with variables not overriding as expected in the sass.

[thisisdano]

@jeremyzilar do you have examples of variables that aren't working the way you expect?

[jeremyzilar]

I believe I brought this up around an issue I was having in the dg/defaults.scss file.

The question came up — how do we best override the defaults styles in the USWDS, especially when they rely on mixins that are used in the USWDS?

You will see that many of the type styles are defined as being defaults in the WDS, so in main.scss I needed to include the dg/defaults.scss file before the WDS files.

$font-path: '../fonts';
$image-path: '../uswds/img';

@import "dg/fonts";
@import "dg/defaults";

// USWDS
@import './node_modules/uswds/src/stylesheets/_all.scss';

// Externals
@import '/assets/font-awesome/css/font-awesome.min.css';

// Site Styles
@import "dg/mixins/grid";
@import "dg/mixins/grid-framework";

However, the overrides rely on the rem(15px) mixin to work, which is included later in WDS.

// $h1-font-size:        rem(40px) !default;
// $h2-font-size:        rem(30px) !default;
// $h3-font-size:        rem(20px) !default;
// $h4-font-size:        rem(17px) !default;
// $h5-font-size:        rem(15px) !default;
// $h6-font-size:        rem(13px) !default;

So in short, it was not clear to me how to go about overriding the H1, H2, H3, H4, etc... in the site or how to override styles in the WDS in general. Maybe they should not be using !default?

[thisisdano]

I'll need to check this, but my understanding with !default is that it should be (and is) used only on the variables in the WDS — and what it means is "set this variable only if the variable has not been set previously."

So we would include our variable overrides before the WDS include. And we would not want to set our overrides to !default, that's only for the WDS variables. I can check this to be sure I understand it properly.

See https://github.com/18F/web-design-standards/issues/952 for a discussion of this issue.

[jeremyzilar]

As long as you know how to override the styles, this is not an issue anymore. 💯

[aalikaram]

🛑DEPRECATED🛑 - Repo no longer being maintained #19