Menu icon Foundation
Overriding default styling

I have a separate scss file that I am using to try and change the colour of tabs on my page. I have imported this file into my app.scss file and I can see this change when I inspect the html page. However, it is always overridden by the default settings.

.tabs-title>a:focus, .tabs-title>a[aria-selected='true'] {
  background: $primary;
  color: white;
}

This is the code in my app.scss page:

@charset 'utf-8';

@import 'settings';
@import 'tabs';
@import 'main';

@import 'settings';
@import 'motion-ui';

Sassimportcss

I have a separate scss file that I am using to try and change the colour of tabs on my page. I have imported this file into my app.scss file and I can see this change when I inspect the html page. However, it is always overridden by the default settings.

.tabs-title>a:focus, .tabs-title>a[aria-selected='true'] {
  background: $primary;
  color: white;
}

This is the code in my app.scss page:

@charset 'utf-8';

@import 'settings';
@import 'tabs';
@import 'main';

@import 'settings';
@import 'motion-ui';