mixin non definito con Borbone e gemme Neat

Question

Sto usando bourbon e ordinate gemme per creare il design di un'applicazione Rails. Il mio application.css.scss contiene questo:

@import "bourbon"; 
@import "neat"; 
@import "main"; 

Ma se corro 'asset rake: precompilare' poi accade questo errore:

rake aborted! 
Undefined mixin 'outer-container'. 
(in /Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss) 
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5:in `outer-container' 
/Users/anonymous/example/app/assets/stylesheets/admin/main.css.scss:5 

Il file contiene main.css.scss questo:

footer#page_footer { 
@include outer-container; 
nav{ 
    @include span-columns(6); 
    @include shift(3); 
    section#about_me_footer, section#contact_footer, section#miscellaneous_footer { 
    @include span-columns(2 of 6); 
} 
} 
p { 
@include span-columns(6); 
@include shift(3); 
} 
} 

Qualcuno può darmi qualche suggerimento?

Answer 1

Avevo lo stesso problema. Sono stato in grado di farlo funzionare in due modi diversi.

Il primo modo è probabilmente meno desiderabile, ma è possibile aggiungere il codice corretto nel file application.css.scss:

div.container { 
    @include outer-container; 
} 

In alternativa, è possibile aggiungere:

@import "bourbon"; 
@import "neat"; 

Verso l'alto del tuo file main.css.scss.
Ciò consente di mantenere i tuoi stili organizzati.

I collegamenti di sito bourbon a una pagina nella loro wiki per quanto riguarda questo problema, ma la soluzione menzionato non ha funzionato per me:

https://github.com/thoughtbot/bourbon/wiki/Rails-Help-%5C-Undefined-mixin

Answer 2

FWIW questo è il problema segnalato https://github.com/thoughtbot/bourbon/issues/120, Usare il commento di Jacklin su l'aggiunta delle istruzioni di importazione direttamente al mio file css principale lo ha risolto. Tuttavia, mi piacerebbe avere questo problema risolto dal momento che non voglio continuare ad aggiungere le istruzioni di importazione a ciascun file che desidero utilizzare i mixin per

Answer 3

Ho avuto lo stesso problema.

Avevo un div usando @include outer-container e un secondo div contenente @include span-columns (8). Il secondo div si è erroneamente posizionato all'esterno del primo, producendo l'errore fuorviante "Undefined mixin 'outer-container" ". Lo spostamento del secondo div all'interno del primo (all'interno del contenitore esterno - in CSS e HTML) ha corretto il problema.

Per il problema precedente, è necessario fare la stessa cosa assicurandosi che il tag p sia figlio del piè di pagina.

Answer 4

Ho avuto lo stesso problema. La soluzione per me era rinominare un file parziale da layout.css.scss a _layout.css.scss. Tutti i file che fanno uso di missaggi SASS devono essere inclusi dopo che questi mixin sono stati caricati. In questo caso stava tentando di precompilare il file layout.css da solo, sebbene non richiedesse l'origine dei mixin a cui faceva riferimento. Aggiungendo il carattere di sottolineatura il precompilatore ignora quel file fino a quando non lo richiede un altro file.

Answer 5

Secondo lo Change Log il mixin outer-container è stato rimosso dalla versione 2.0.0. La versione più alta che è possibile utilizzare con outer-container è 1.8.0. Quando aggiungi Neat tramite Bundler, otterrai 2.0 o versioni successive a meno che non specifichi una versione nel tuo Gemfile.

Il new way per farlo sembra molto più semplice, ma questo è un po 'di conforto se si dispone di una serie di scss non supportati.