alexander_lamdan
@alexander_lamdan
Тупа программист хехе

Почему дублируются стили в scss?

Что то я не понял почему у меня копируются стили.
У меня есть:
_variables.scss
navigation.scss
footer.scss
и_названия_файла.scss

Так вот чтобы у меня на странице скажем 404, была навигационная панель и футер стилизованные, я добавил стили этих файлов.
Я не смогу использовать переменные в своих scss файлах, если уберу файл variables.

Вот так это выглядит в файле 404.scss:
@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;
    }
  }
}


А вот так вот выглядит сам файл 404.css

@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;
}


В каждом файле scss у меня импортируется файл variables чтобы я смог пользоваться переменными.

Вот файл navigation.scss

@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;
      }
    }
  }


Для тех кому интересно узнать про _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;
}


У меня возникает ощущение что я где то, что то дважды загружаю и не могу понять где.
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 1
yarkov
@yarkov
Проект "Жизнь после смерти" - lifeafterdeath.ru
В файле variables должны быть ТОЛЬКО переменные. Зачем там шрифты и стили? Конечно они дублироваться будут.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы