Могат ли SASS mixins и променливи да се намират в различни файлове?

Здравейте, опитвам се да организирам своите sass файлове в отделни части в проект, използвайки GULP. Когато обаче импортирам моите миксини и променливи в отделни файлове:

Файл: variables.scss

//first import variables that might be used throughout all the other files
@import "common/_variables.scss";

Файл:mixins.scss

Mixins
@import "common/_mixins.scss";

След това опитайте да получите достъп до тези миксини от други файлове например

Файл:buttons.scss @import "common/_buttons.scss";

Получавам следните грешки, когато изпълнявам gulp sass:

throw er; // Unhandled 'error' event
no mixin named 'foo'

or 

undefined variable 'foo'

Въпреки че mixins/променливата е дефинирана във файловете variable.scss и mixins.scss. Така че gulp прекъсва задачата наполовина и стиловият лист не се създава.

Има ли правило в SASS, което означава, че променливите и миксините трябва да бъдат импортирани в едни и същи файлове, като ги използват? Ако случаят е такъв, това е проблем, тъй като имам много файлове, които бих искал да държа отделно и да не се налага да продължавам да импортирам миксини и променливи в тях.


sass gulp mixins
person HGB    schedule 21.08.2015    source източник
comment
Възможен дубликат: stackoverflow .com/questions/17976140/   -  person cimmanon    schedule 21.08.2015

Отговори (3)


arrow_upward
16
arrow_downward

Краткият отговор е, че не трябва да ги импортирате във всеки файл, който може да ги включва. Все пак някъде трябва да има връзка и как ще направите това зависи от това дали искате да изградите един единствен краен CSS файл или поредица от отделни файлове.

Ако искате първото, бихте могли да помислите за главен файл за импортиране, който прави малко повече от импортиране на всички подходящи *.scss файлове, и това да бъде основният SASS файл, който вашият скрипт за изграждане на gulp изглежда компилира.

Ще трябва да се погрижите да импортирате файлове в правилния ред - така че няма импортиране на файл, който използва миксин, преди файлът, който дефинира миксина, да бъде импортиран сам.

Така например - лично аз работя с main.scss файл, който е структуриран като

@import "common/_variables.scss";
@import "common/_mixins.scss";


// Now import the files that might use these vars/mixins
@import "common/_buttons.scss";

който е изграден чрез gulp за създаване на css/main.css.

Ако искате серия от CSS файлове - т.е. buttons.css, type.css, layout.css и т.н. - тогава ще трябва да имате подходящите променливи и декларации за @import на mixin във всеки файл, който ги извиква

person petehotchkiss    schedule 21.08.2015
comment
Хей, благодаря за отговора. Да, разбрах. Жалко е, че променливите не се виждат, ако се импортират отделно за всички файлове. Предполагам, че ще трябва да се придържам към един файл, след което ще минимизирам само когато приключа с отстраняването на грешки. наздраве - person HGB; 21.08.2015
comment
струва си да запомните, че променливите не се импортират директно в компилиран CSS, освен там, където изрично ги извиквате. така че включването на връзката към вашия varialbes .scss файл в множество други файлове няма да повлияе на размера на крайния компилиран източник. - person petehotchkiss; 26.08.2015
comment
Хей, благодаря, това означава ли, че мога да импортирам документа variables.scss във всеки отделен sass файл, без да засягам компилирания източник? - person HGB; 26.08.2015
comment
Не е необходимо да кръстосвате миксини за импортиране или променливи файлове в други .scss файлове. Просто се уверете, че сте импортирали файловете _variable.scss и _mixins.scss във вашия файл main.scss преди всички други таблици със стилове. - person matthew; 09.02.2017

arrow_upward
2
arrow_downward

Намерих най-доброто решение за мен с предварително свързване на SASS файлове с GULP.

Като в този пример за STYLUS

gulp.src(config.projects.css.source)
    .pipe(sourcemaps.init())
    .pipe(mktimecss(__dirname+'/web'))
    .pipe(concat('styles'))
    .pipe(stylus({
        'include css': true,
        use: [nib()],
        // compress: true,
        linenos: false
    }))
    ...... and so on .......
person Ivan Yaremchuk    schedule 19.03.2017

arrow_upward
1
arrow_downward

Определено е възможно вашите миксини и променливи да бъдат в различни файлове. Всъщност бих препоръчал всички миксини/променливи, които откриете, че използвате повторно, трябва да предприемете по-глобален подход с тях, вместо да ги импортирате в отделни файлове.

Един от най-добрите начини, които съм виждал за организиране на директория от Sass файлове, се нарича < em>Моделът 7-1 и прави цялата структура на стила много по-лесна за разбиране и надграждане.

Най-приложимата част от тази организационна стратегия към вашия въпрос би била създаването на main.scss файл, който импортира всеки един от файловете, които планирате да използвате. Уверете се обаче, че внимавате за реда, който импортирате. Не можете да импортирате файл, който използва миксини или променливи от файл, импортиран след него.

person Louie Bertoncin    schedule 15.11.2016