Override Foundation variables everywhere

We were loading all Foundation variables and then overriding them. This
is problematic because we were overriding variables after using them.
For instance, we had this code in `_settings.scss`:

```
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
```

That meant we were setting `$body-background` to `#fefefe`, and
`$body-font-color` to `#0a0a0a`. Even if we changed the values of
`$black` and `$white` later, `$body-background` and `$body-font-color`
were not affected by this change.

So now we're overriding `$black` and `$white` before setting
`$body-background` and `$body-font-color`. In order to keep our custom
values instead of overriding them, we're using the `!default` flag in
the `_settings.scss` file.

This way of defining variables in the `_settings.scss` file with the
`!default` flag is recommended in the documentation regarding the
settings file [1].

There's also a disadvantage to this approach. Now that we're loading the
`_consul_settings.scss` file first, we can no longer use Foundation
variables inside the `_consul_settings.scss` file unless we define them
in this file as well.

[1] https://get.foundation/sites/docs/sass.html#the-settings-file
This commit is contained in:
Javi Martín
2021-04-28 18:43:18 +02:00
parent fc0db1956d
commit 10479148eb
2 changed files with 472 additions and 473 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -1,7 +1,8 @@
@charset "utf-8";
@import "settings";
@import "util/util";
@import "consul_settings";
@import "settings";
@import "custom_settings";
@import "foundation";