SASS e Zurb Foundation - istruzioni di installazione confuse

Question

Ho deciso di utilizzare la versione Sass di Foundation4 come quella CSS è praticamente impossibile da modificare in modo efficiente ora.

Ho seguito le istruzioni qui: http://foundation.zurb.com/docs/sass.html

Questi mi hanno consigliato di installare la gemma (nessun problema) quindi installare la bussola quindi creare un progetto, che ho fatto in wwwroot.

Tutto bene finora. Poi continua a consigliarmi di "scaricare i file da Github (prendere le directory scss/e js/e metterli nella directory del progetto"

Ora perché in nome di un pesce in bicicletta le istruzioni mi consiglia di farlo quando il passo precedente sulla riga di comando (bussola create -r zurb-foundation --using foundation) crea una cartella già nella directory root per il mio progetto, anche se con un nome diverso, che contiene file simili se non identici? Esiste già una cartella "javascripts" con sottocartelle "foundation" e "vendor" che contengono in gran parte gli stessi file, sebbene alcune siano di dimensioni diverse.

Mi manca qualcosa? Il file "index.html" incluso fa riferimento alla cartella "javascripts", quindi perché ho intenzione di includere "js" dal github? Questo è molto confuso quando sei nuovo alla tecnologia!

Dopo aver seguito le istruzioni di installazione ora ho i file "foundation.scss" e "app.scss" che sembrano essere in gran parte gli stessi a parte uno (app.scss) ha molti commenti. Quale sono destinato a usare?

Mi sembra che le istruzioni siano sostanzialmente obsolete. Sembra che non abbia bisogno di "js" da github ma ho bisogno di "scss". I contenuti di questa cartella scss sembrano aver bisogno di andare nella cartella "sass" creata quando il progetto è stato creato e il file "foundation.scss" può essere cancellato poiché "app.scss" ne è una copia.

Non ho idea di dove il file "app.scss" di base speri di "@import foundation" poiché non esiste una cartella "fondazione" creata durante l'installazione/creazione del progetto. Forse mi manca qualcosa ma è tutto molto confuso. Qualcuno potrebbe per favore chiarire cosa devo iniziare e cosa posso eliminare/ignorare?

Answer 1

Quando si installa gem, tutti i file Foundation appropriati vengono installati automaticamente nella cache della gemma. Compass estrarrà tutti i file SCSS F4 nel progetto tramite la direttiva @import da foundation.scss.

I documenti del progetto nel repository Github mostrano le ultime Compass istruzioni per la creazione del progetto F4. https://github.com/zurb/foundation/blob/master/docs/sass.html.erb

Sembra che si stia mescolando le Standalone istruzioni in quelle Compass.

Se è stato eseguito questo:

[sudo] gem install compass 
cd path/to/where-you-want-your-project 
run compass create <project-name> -r zurb-foundation --using foundation 

Non è necessario Github o le istruzioni Standalone.

Le fasi sottostanti illustrano le fasi manuali di costruzione di un progetto F4. Penso che sei bloccato su PASSO 4, quindi concentrati su quella parte.

FASE 1:

Scarica per facilitare l'accesso di questi due archivi:

Fondazione Vanilla:

http://foundation.zurb.com/files/foundation-4.1.6.zip

Fondazione Maestro:

https://github.com/zurb/foundation/archive/master.zip

CD nella directory radice www:

FASE 2:

creare questo file:

/config.rb

require 'zurb-foundation' 
http_path = "/" 
css_dir = "css" 
sass_dir = "scss" 
images_dir = "img" 
javascripts_dir = "js" 
output_style = :expanded 
relative_assets = true 
line_comments = true 

Switch output_style = :compact or :compressed e line_comments = false per Produzione (in corso di pubblicazione).

FASE 3:

• copiare/spostare index.html da Fondazione Vanilla nella vostra directory principale www.
• Modificare line 11 e modificare foundation.css in app.css nel tag di stile.

FASE 4:

creare questa cartella e di file:

/SCSS/

• Crea app.scss - Questo è il vostro sito/app foglio di stile e noi' ll importa Normalize e F4 in esso.

• Copia questo in esso:

  // Global Foundation Settings 
  // @import "settings"; 
  
  // Comment out this import if you don't want to use normalize 
  @import "normalize"; 
  
  // Comment out this import if you are customizing you imports below 
  @import "foundation"; 
  
  // Your own SCSS here... 
  

Se si vuole esclusione alcune variabili F4 Sass è necessario disporre del file di _settings.scss. Per ora vorrei saltare questo passaggio e lasciarlo commentato fino a quando non avrai più familiarità con F4.

FASE 5:

creare questa directory (file scritti automaticamente qui):

/css/

• app.css - sarà scritto qui dal /scss/app.scss da Compass. Normalizza e tutti i F4 CSS saranno al suo interno, oltre a tutti i tuoi CSS che hai aggiunto.

Questo avviene automaticamente, non c'è bisogno di fare nulla tranne che hanno installato le gemme richiesti e il file di configurazione della bussola da FASE 2.

FASE 6:

Creare questa directory e copiare/spostare i file in esso:

/js/

• Copia/Sposta /js/foundation.min.js dalla Fondazione Vanilla Download qui.

• Se è necessario creare il proprio app.js creare/posizionarlo qui e collegarlo all'ultimo nel piano .

/js/vendor/

• Copia/Sposta /js/vendor/custom.modernizr.js dalla Fondazione Vanilla scaricare in questa sede.

• Copia/Sposta /js/vendor/zepto.js e /js/vendor/jquery.js dalla Fondazione Vanilla il download qui.

Più tardi, quando ci si sente più a suo agio, si può scegliere di ciliegio singoli file Fondazione JS da Fondazione Maestro e concatenare in un lib più piccolo qui come foundation.min.js.

Che dovrebbe farlo.

Partenza questo file nel mio www pronti contro termine, in quanto mostra una configurazione F4 di lavoro: https://github.com/jhauraw/jhaurawachsman.com/blob/master/_layouts/default.html

È inoltre possibile curiosare lì per come integrare Grunt.js per generazione automatica del SCSS e JS con concatenazione e minificazione: https://github.com/jhauraw/jhaurawachsman.com/blob/master/Gruntfile.js

Answer 2

Senza essere abile come @jhauraw, ho notato qualcos'altro.

Ho installato FOundation tramite l'app Compass. Essendo un novizio con Compass, anch'io cercavo la cartella "foundation" che conterrebbe tutti i vari file SCSS di Foundation. E quando ho guardato il file _settings.scss che era presente, è sembrato che tutto fosse commentato. Quello che so capire (ancora come un novizio verso Compass) è che il file "fondazione" vive all'interno di una libreria di risorse all'interno di Compass. Quando necessario, questi file vengono importati durante la generazione del file CSS. Il file _settings.scss con tutti i campi commentati è un file di sostituzione. Quindi, se rimuovete i commenti per una particolare variabile o mixin, sovrascriverà gli originali nascosti nella libreria di Bussola. Il CSS compilato sembra contenere tutto ciò che è necessario.