Why are styles duplicated in scss?

Question

css

Something I did not understand why my styles are copied.
I have:
_variables.scss
navigation.scss
footer.scss
and_filename.scss

So in order for me to have a 404 navigation bar and a styled footer on my page, I added the styles of these files.
I won't be able to use variables in my scss files if I remove the variables.

This is how it looks in the 404.scss file:

@import "variables";
@import "functions";
@import "navigation";
@import "footer";
.main{
  width:100%;
  height:50em;
  background:white;
  text-align:center;
  .main__headingText{
    font-size:5rem;
    padding:2.7em 0 0 0;
  }
  .main__descriptionHeading{
    font-size:3rem;
    padding:0 0 0 0;
  }
  .main__helperText{
    padding:0 0 0.6em 0;
  }
  .main__backToMain-btn{
    display:inline-block;
    text-decoration:none;
    background:$third-color;
    padding:1.25em;
    border-radius:$btn-radius;
    margin:0 0.8em 0 0;
    color:white;
    font-weight:600;
    box-shadow:$shadow;
    &:hover{
      box-shadow:none;
    }
  }
  .main__contactUs-btn{
    display:inline-block;
    text-decoration:none;
    background:$btn-bg-color;
    padding:1.25em;
    border-radius:$btn-radius;
    color:white;
    font-weight:600;
    box-shadow:$shadow;
    &:hover{
      box-shadow:none;
    }
  }
}

And this is how the 404.css file itself looks like

@font-face {
  font-family: "Bitter Black";
  src: url(../fonts/Bitter/Bitter-Black.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter BlackItalic";
  src: url(../fonts/Bitter/Bitter-BlackItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Bold";
  src: url(../fonts/Bitter/Bitter-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter BoldItalic";
  src: url(../fonts/Bitter/Bitter-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraBold";
  src: url(../fonts/Bitter/Bitter-ExtraBold.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraBoldItalic";
  src: url(../fonts/Bitter/Bitter-ExtraBoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraLight";
  src: url(../fonts/Bitter/Bitter-ExtraLight.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraLightItalic";
  src: url(../fonts/Bitter/Bitter-ExtraLightItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Italic";
  src: url(../fonts/Bitter/Bitter-Italic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Light";
  src: url(../fonts/Bitter/Bitter-Light.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter LightItalic";
  src: url(../fonts/Bitter/Bitter-LightItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Medium";
  src: url(../fonts/Bitter/Bitter-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter MediumItalic";
  src: url(../fonts/Bitter/Bitter-MediumItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Regular";
  src: url(../fonts/Bitter/Bitter-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter SemiBold";
  src: url(../fonts/Bitter/Bitter-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter SemiBoldItalic";
  src: url(../fonts/Bitter/Bitter-SemiBoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Thin";
  src: url(../fonts/Bitter/Bitter-Thin.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ThinItalic";
  src: url(../fonts/Bitter/Bitter-ThinItalic.ttf) format("truetype");
}
html {
  font-family: "Bitter Regular";
  color: #171724;
}

@font-face {
  font-family: "Bitter Black";
  src: url(../fonts/Bitter/Bitter-Black.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter BlackItalic";
  src: url(../fonts/Bitter/Bitter-BlackItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Bold";
  src: url(../fonts/Bitter/Bitter-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter BoldItalic";
  src: url(../fonts/Bitter/Bitter-BoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraBold";
  src: url(../fonts/Bitter/Bitter-ExtraBold.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraBoldItalic";
  src: url(../fonts/Bitter/Bitter-ExtraBoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraLight";
  src: url(../fonts/Bitter/Bitter-ExtraLight.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ExtraLightItalic";
  src: url(../fonts/Bitter/Bitter-ExtraLightItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Italic";
  src: url(../fonts/Bitter/Bitter-Italic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Light";
  src: url(../fonts/Bitter/Bitter-Light.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter LightItalic";
  src: url(../fonts/Bitter/Bitter-LightItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Medium";
  src: url(../fonts/Bitter/Bitter-Medium.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter MediumItalic";
  src: url(../fonts/Bitter/Bitter-MediumItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Regular";
  src: url(../fonts/Bitter/Bitter-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter SemiBold";
  src: url(../fonts/Bitter/Bitter-SemiBold.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter SemiBoldItalic";
  src: url(../fonts/Bitter/Bitter-SemiBoldItalic.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter Thin";
  src: url(../fonts/Bitter/Bitter-Thin.ttf) format("truetype");
}
@font-face {
  font-family: "Bitter ThinItalic";
  src: url(../fonts/Bitter/Bitter-ThinItalic.ttf) format("truetype");
}
html {
  font-family: "Bitter Regular";
  color: #171724;
}

In each scss file, I import the variables file so that I can use the variables.

Here is the navigation.scss file

@import "variables";
@import "functions";
.navigation{
  width:100%;
  height:5em;
  background:white;
  display:flex;
  position:fixed;
  top:0;
  .navigation__logoContainer{
    width:28em;
    height:5em;
    .navigationLink__item{
      .navigationLink__item--svg{
        width:80%;
        height:5em;
        padding:0 0 0 4em;
      }
    }
  }

For those who are interested in learning about _variables.scss:

@font-face{
  font-family:"Raleway Black";
  src:url(../fonts/Raleway/Raleway-Black.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway BlackItalic";
  src:url(../fonts/Raleway/Raleway-BlackItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway Bold";
  src:url(../fonts/Raleway/Raleway-Bold.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway BoldItalic";
  src:url(../fonts/Raleway/Raleway-BoldItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway ExtraBold";
  src:url(../fonts/Raleway/Raleway-ExtraBold.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway ExtraBoldItalic";
  src:url(../fonts/Raleway/Raleway-ExtraBoldItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway ExtraLight";
  src:url(../fonts/Raleway/Raleway-ExtraLight.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway ExtraLightItalic";
  src:url(../fonts/Raleway/Raleway-ExtraLightItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway Italic";
  src:url(../fonts/Raleway/Raleway-Italic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway Light";
  src:url(../fonts/Raleway/Raleway-Light.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway LightItalic";
  src:url(../fonts/Raleway/Raleway-LightItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway Medium";
  src:url(../fonts/Raleway/Raleway-Medium.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway MediumItalic";
  src:url(../fonts/Raleway/Raleway-MediumItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway Regular";
  src:url(../fonts/Raleway/Raleway-Regular.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway SemiBold";
  src:url(../fonts/Raleway/Raleway-SemiBold.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway SemiBoldItalic";
  src:url(../fonts/Raleway/Raleway-SemiBoldItalic.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway Thin";
  src:url(../fonts/Raleway/Raleway-Thin.ttf) format("truetype");
}
@font-face{
  font-family:"Raleway ThinItalic";
  src:url(../fonts/Raleway/Raleway-ThinItalic.ttf) format("truetype");
}
$main-font:"Raleway Regular";
$extra-light-font:"Raleway ExtraLight";
$light-font:"Raleway Light";
$medium-font:"Raleway Medium";
$thin-font:"Raleway Thin";
$bold-font:"Raleway Bold";
$bold-italic-font:"Raleway BoldItalic";
$extra-bold-font:"Raleway ExtraBold";
$extra-bold-italic-font:"Raleway ExtraBoldItalic";
$main-color:#5E17EB;
$second-color:#03989E;
$btn-bg-color:#FF1616;
$third-color:#008037;
$four-color:#FF66C4;
$shadow:0 1em 2em rgba(0, 0, 0, 0.041), 0 0.3em 0.3em rgba(0, 0, 0, 0.22);
$image-round:50%;
$font-color:#171724;
$btn-radius:0.3em;
html{
  font-family:$main-font;
  color:$font-color;
}

I have a feeling that I am downloading something twice and I can’t figure out where.

Answer 1

The variables file should contain ONLY variables. Why are there fonts and styles? Of course they will be duplicated.