/ Ako používať základňu 5 s kompasom + SASS? - zurb-foundation, compass-sass

Ako používať Foundation 5 s Compass + SASS? - zurb-foundation, compass-sass

Problém

Nadácia 5 bol prepustený minulý týždeň, to je skvelé, ale nová verzia vyžaduje použitie altánok na použitie F5 so SASS a oficiálna dokumentácia sa zdá trochu neúplná a nezrelá.

Snažím sa vytvoriť projekt pomocou krokov navrhovaných dokumentmi:

[sudo] npm install -g bower

a potom

gem install foundation

Žiadne problémy tu. Problém je pri vytváraní projektu Compass:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Po kompilácii Compass som dostal nasledujúcu chybu:

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

Súbor konfigurácie kompasu (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"

Súbor SASS (app.sass):

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

Zdá sa, že problém je v config.rb:

add_import_path "bower_components/foundation/scss"

pretože Compass sa nepodarilo importovať súbory settings a foundation ale neviem, ako to napraviť, akákoľvek pomoc bude vysoko cenená.

Vďaka.

odpovede:

8 pre odpoveď č. 1

Potrebujete zmeniť linku foundation new MY_PROJECT tým, že nahradí MY_PROJECT s priečinkom, na ktorý chcete nainštalovať projekt. Potom potvrďte, že tieto adresáre existujú v adresári, ktorý ste zadali vyššie - "bower_components / foundation / scss"

Pri spustení projektu beh compass init a potom compass watch (v termináli), aby ste mohli sledovať zmeny na .sass Súbory.

osobne, Nechodím na túto cestu a používam http://koala-app.com/ previesť alebo "kompilovať" moju Sass. Je zadarmo a úžasné.


3 pre odpoveď č. 2

To je SASS, o ktorom hovorili. Prosím opravte ma, ak sa mýlím, ale nepotrebujete podčiarknutie pri importovaní súboru "include". Vytváram samostatné súbory sass pre moje premenné a moje mix-iny. Sú predpísané a podčiarkujú, čo znamená súbor "zahrnúť". SASS rozpozná @import "premenné"; ako @import "_variables.scss". Takže, aby bolo jasné, keď je súbor obsahovať len názov súboru sass nie je potrebné rozšírenie _ alebo scss.

Nikdy som nedal znak podčiarknutia pred akýmkoľvek súborom, ktorý som nazval _filename.scss.

Pravdepodobne ide o ďalší problém. Pravdepodobne s inštaláciou a cestami pre bower. Pre tých, ktorí v minulosti pridali podčiarknutie a fungovalo to ... dobre ste len obísť, čo sa môže stať hlbším problémom po ceste. Musíte skontrolovať inštaláciu.


1 pre odpoveď č. 3

Vo vašom app.sass súbor zmeniť nasledujúci riadok

@import "settings";

na

@import "_settings";

explaination

Keď spustíte compass watch máte chybu

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

To jednoducho znamená, že nemôže nájsť súbor s nastaveniamidovážané. Pridaním podčiarknutia do súboru s nastaveniami ste zadali správnu cestu k súboru. Ak sa zobrazia ďalšie chyby, ako je tento, uistite sa, že cesta k súboru je správna.


1 pre odpoveď č. 4

Myslím, že som mal rovnakú chybu. konečne som našiel v _settings.scss

Pred importovaním funkcií je potrebné podčiarknuť

pred:

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

po:

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

Tiež by ste museli importovať nastavenia rovnakým spôsobom.

V mojom príklade som urobil style.scss a importoval všetky SCSS vnútri:

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

0 pre odpoveď č. 5

Stretla som sa s tým istým problémom, ale pre mňa bolo riešenie zmeniť inštaláciu nastavení app.scss od:

@import "settings";

Ak chcete:

@import "foundation/_settings";

Keď to urobíte, spustite compass watch znova.


0 pre odpoveď č. 6

Môžete nainštalovať Grunt do vášho projektu, ktorýpoužíva funkciu hodiniek kompasu a potom nejaké iné chytré veci, ktoré vám pomôžu skompilovať váš preklad a preniesť ho do prehliadača! Tu je skvelý návod, ako ho dostať do prevádzky! (je to jednoduché ako vytvorenie dvoch nových súborov v koreňovom adresári vášho projektu a potom spustenie niekoľkých príkazov z príkazového riadku!

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


0 pre odpoveď č. 7

Mal som rovnaký problém. Pre používateľov Ubuntu 14.04 sa uistite, že nodejs a Bower pracujú správne. Tieto pokyny môžete dodržiavať tu http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283