sass: когда мне нужно @include для вызова mixin?

Question

Согласно документу, мы используем @include чтобы вызвать миксин, но в моем случае у меня есть что-то вроде этого:

@import "components/color";

/*NavBar*/

#g-navigation{background:linear-gradient(to top,rgba(0,0,0,0), color(blue,base) 80%) !important}

Для миксин color (который определен в components/_color.scss) Мне не нужно использовать @includeна самом деле, если я делаю

#g-navigation{background:linear-gradient(to top,rgba(0,0,0,0), @include color(blue,base) 80%) !important}

миксин не будет выполнен, а компилятор просто сохранит @include как в выходном файле. Так почему это? И когда именно мне нужно @include для смешивания?

Answer 1

@include для миксинов; когда вы видите что-то используемое без него, например, color(...)это на самом деле функция. Mixins может возвращать произвольный контент - как правило, несколько объявлений правил - но функции просто возвращают значения. Итак, вы увидите функции, используемые после : в декларации, а миксины используются как отдельные @include заявления.

Answer 2

За background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));вам нужны значения направления и цвета (имена, RGB и т. д.), и вы даете mixin, который используется для вставки porperty + value, а не только value. Вы можете использовать переменные SASS для этого.