Почему мой код дублирует CSS файла?

Question

В Sass у меня есть некоторые компоненты (navbar, footer) и некоторые @mixins (шрифты) и функция для управления шрифтами.

I @import расположение шрифтов и делаю @includeв функции шрифтов, в этой функции я просто выбираю шрифт, который я хочу использовать.

Проблема в том, что, поскольку я разделил как "частичные" компоненты (navbar и footer), они имеют одинаковые источники иЯ дал @import в этих источниках в каждом .scss .

И с этим он генерирует дублирующийся код в моем сгенерированном файле .scss .Я хотел бы знать, какие хорошие практики для этого и если я делаю это правильно и как мне избежать этих дубликатов в .scss ?

Answer 1

Поскольку я не вижу ваш код, я не уверен, как именно вы импортировали свои ресурсы.Однако, если вы генерируете только один файл .css, рекомендуется импортировать все в файл, который будет скомпилирован, а не в каждый фрагмент.

Представим, что у вас есть следующая структура:

styles
├─ components
│   ├─ _footer.scss
│   └─ _navbar.scss
├─ settings
│   ├─ _functions.scss
│   └─ _mixins.scss
└─ styles.scss

В этом примере styles.sccs - это единственный файл, который будет скомпилирован, он будет использоваться только для импорта всех партиалов (порядок имеет значение):

// Settings

@import './settings/mixins';
@import './settings/functions';

// Components

@import './components/footer';
@import './components/navbar';

Затем вы можете использоватьлюбые миксины или функции в ваших компонентах, и все импортируется только один раз.

Answer 2

Я не уверен, что это отвечает на ваш вопрос - но чтобы избежать дублирования в Sass, я бы создал миксин, чтобы проверить, был ли @include уже сделан

SCSS

//  Global list to keep track of what mixins has been included 
$include-once: (); 

//  Mixin helper to be used inside other mixins we would like 
//  not to produce duplicate content
@mixin once($mixin-name) {
   //  check if mixin name exists in our list 
   @if not index($include-once, $mixin-name) {

       //  add mixin name to list (using the global flag)
       $include-once: append($include-once, $mixin-name) !global;

       //  print out the content of the mixin
       @content;
   } 
}



//  Use example
@mixin font {
    //  wrap content in the include once wrapper passing the name of the mixin 
    @include once(font){

        //  make sure font import is not nested 
        @at-root {
            @import url("https://fonts.googleapis.com/css?family=Open+Sans");
        }
    }
}


//  Test
.foo { @include font; color: red; }
.bar { @include font; color: green; }
.baz { @include font; color: blue; }

Вывод CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans")
.foo {
  color: red;
}
.bar {
  color: green;
}

.baz {
  color: blue;
}