/ / Come utilizzare Foundation 5 con Compass + SASS? - zurb-foundation, compass-sass

Come utilizzare Foundation 5 con Compass + SASS? - zurb-foundation, compass-sass

Il problema

Fondazione 5 è stato rilasciato la scorsa settimana, è grandioso, ma la nuova versione richiede l'uso pergolato per usare F5 con SASS e la documentazione ufficiale sembra essere un po 'incompleta e immatura.

Sto cercando di creare un progetto utilizzando i passaggi proposti dai documenti:

[sudo] npm install -g bower

e poi

gem install foundation

Nessun problema qui. Il problema è quando si crea un progetto Compass:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Dopo la compilazione di Compass, ottengo il seguente errore:

directory stylesheets/
error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
/home/cartucho/MY_PROJECT/scss
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
/var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
/home/cartucho/MY_PROJECT/bower_components/foundation/scss
Compass::SpriteImporter)
create stylesheets/app.css

Compass config file (config.rb):

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

Il file SASS (app.sass):

@import "settings";
@import "foundation";
...

Il problema sembra essere dentro config.rb:

add_import_path "bower_components/foundation/scss"

perché Bussola fallisce nel tentativo di importare i file settings e foundation ma non so come risolverlo, ogni aiuto sarà molto apprezzato.

Grazie.

risposte:

8 per risposta № 1

Devi cambiare la linea foundation new MY_PROJECT sostituendo MY_PROJECT con la cartella su cui vuoi installare il progetto. Dopodiché, conferma che queste cartelle esistono nella directory che hai specificato sopra - "bower_components / foundation / scss"

Quando si avvia un progetto correre compass init e poi compass watch (nel terminale) per controllare le modifiche sul .sass File.

Personalmente, Non vado su quella strada e uso http://koala-app.com/ convertire o "compilare" il mio Sass. È GRATUITO e fantastico.


3 per risposta № 2

Sta parlando di questo SASS. Per favore correggimi se ho torto ma non hai bisogno del carattere di sottolineatura quando importi un file "include". Creo file SASS separati per le mie variabili e i miei mix-in. Sono preceduti da e sottolineatura che indica un file "include". SASS riconosce le "variabili" di importazione; come @import "_variables.scss". Quindi, per essere chiari quando si tratta di un file di inclusione, il nome del file sass non ha bisogno dell'estensione _ o di scss.

Non ho mai messo un trattino basso prima di qualsiasi file di inclusione che ho chiamato _filename.scss.

Probabilmente c'è un altro problema in corso. Forse con l'installazione e i percorsi per bower. Per quelli che hanno aggiunto il segno di sottolineatura in passato e ha funzionato ... beh, basta bypassare quello che potrebbe diventare un problema più profondo lungo la strada. Devi controllare la tua installazione.


1 per risposta № 3

Nel tuo app.sass il file cambia la seguente riga

@import "settings";

A

@import "_settings";

spiegazione

Quando corri compass watch hai avuto l'errore

error scss/app.scss (Line 1: File to import not found or unreadable: settings.

Questo significa semplicemente che non è possibile trovare il file delle impostazioniessere importati Aggiungendo il carattere di sottolineatura al file delle impostazioni hai specificato il percorso corretto del file. Se ricevi altri errori come questo, assicurati che il percorso del file sia corretto.


1 per risposta № 4

Penso di aver avuto lo stesso errore; finalmente ho trovato nel _settings.scss

È necessario sottolineare prima di importare le funzioni

Prima:

// Uncomment to use rem-calc() in your settings
@import "foundation/functions";

Dopo:

// Uncomment to use rem-calc() in your settings
@import "foundation/_functions";

Inoltre, dovrai importare le impostazioni allo stesso modo.

Nel mio esempio ho creato style.scss e importato tutto lo SCSS all'interno:

@import "foundation/_settings",  "_normalize", "_foundation";

0 per risposta № 5

Ho riscontrato questo stesso problema, ma per me la soluzione era modificare l'importazione delle impostazioni in app.scss a partire dal:

@import "settings";

A:

@import "foundation/_settings";

Una volta che l'hai fatto, corri compass watch ancora.


0 per risposta № 6

Puoi installare Grunt nel tuo progetto cheusa la funzione di orologio della bussola e poi qualche altra roba intelligente per compilare il tuo sass e caricarlo nel browser! Ecco un ottimo tutorial su come installarlo e farlo funzionare! (è semplice come creare due nuovi file nella root del tuo progetto e poi eseguire alcuni comandi dalla tua riga di comando! Lo consiglio seriamente!)

http://moduscreate.com/get-up-and-running-with-grunt-js/


0 per risposta № 7

Ho avuto lo stesso problema. Per gli utenti di Ubuntu 14.04 assicurarsi che nodejs e Bower funzionino correttamente. Puoi seguire queste istruzioni qui http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283