/ / Wie funktioniert Foundation 5 mit Compass + SASS? - Zurb-Stiftung, Kompass-Sass

Wie benutzt man Foundation 5 mit Compass + SASS? - Zurb-Stiftung, Kompass-Sass

Das Problem

Stiftung 5 wurde letzte Woche veröffentlicht, das ist großartig, aber die neue Version benötigt zu verwenden Laube für die Verwendung von F5 mit SASS und die offizielle Dokumentation scheint ein bisschen unvollständig und unreif zu sein.

Ich versuche, ein Projekt mit den von den Dokumenten vorgeschlagenen Schritten zu erstellen:

[sudo] npm install -g bower

und dann

gem install foundation

Keine Probleme hier. Das Problem liegt beim Erstellen eines Compass-Projekts:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Nach der Compass-Kompilierung erhalte ich den folgenden Fehler:

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

Kompass Konfigurationsdatei (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"

Die SASS-Datei (app.sass):

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

Das Problem scheint darin zu liegen config.rb:

add_import_path "bower_components/foundation/scss"

weil Compass nicht versucht, die Dateien zu importieren settings und foundation aber ich weiß nicht, wie ich es beheben kann. Jede Hilfe wird sehr geschätzt.

Vielen Dank.

Antworten:

8 für die Antwort № 1

Sie müssen die Linie ändern foundation new MY_PROJECT Durch Ersetzen MY_PROJECT mit dem Ordner, in dem Sie das Projekt installieren möchten. Danach bestätigen Sie, dass diese Ordner in dem oben angegebenen Verzeichnis vorhanden sind - "bower_components / foundation / scss"

Beim Starten eines Projekts Lauf compass init und dann compass watch (im Terminal) nach Änderungen auf der .sass Dateien.

PersönlichIch gehe diesen Weg nicht und benutze ihn http://koala-app.com/ meinen Sass konvertieren oder "kompilieren". Es ist KOSTENLOS und großartig.


3 für die Antwort № 2

Hier spricht SASS. Bitte korrigiere mich, wenn ich falsch liege, aber du brauchst den Unterstrich nicht, wenn du eine "include" -Datei importierst. Ich erstelle separate Sass-Dateien für meine Variablen und meine Mix-Ins. Sie haben ein Präfix und einen Unterstrich, der eine "Include" -Datei angibt. SASS erkennt @import "Variablen"; als @import "_variables.scss". Um also klar zu sein, wenn es sich um eine Include-Datei handelt, braucht nur der Name der Sass-Datei nicht die _ oder die scss-Erweiterung.

Ich habe niemals einen Unterstrich vor einer Include-Datei gesetzt, die ich _filename.scss genannt habe.

Es gibt wahrscheinlich noch ein anderes Problem. Möglicherweise mit der Installation und den Pfaden für Laube. Für diejenigen, die die Unterstreichung in der Vergangenheit hinzugefügt haben, und es hat funktioniert ... nun, Sie umgehen einfach, was zu einem tieferen Problem auf der Straße werden könnte. Sie müssen Ihre Installation überprüfen.


1 für die Antwort № 3

In deinem app.sass Datei ändern Sie die folgende Zeile

@import "settings";

Zu

@import "_settings";

Erklärung

Wenn du rennst compass watch Du hast den Fehler erhalten

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

Dies bedeutet nur, dass es die Einstellungsdatei nicht finden kannimportiert werden. Durch Hinzufügen des Unterstrichs zur Einstellungsdatei haben Sie den korrekten Dateipfad angegeben. Stellen Sie sicher, dass der Dateipfad korrekt ist, wenn Sie andere Fehler wie diesem erhalten.


1 für die Antwort № 4

Ich glaube, ich hatte denselben Fehler; endlich fand ich in der _settings.scss

Sie müssen vor dem Importieren der Funktionen unterstreichen

Vor:

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

Nach:

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

Außerdem müssten Sie die Einstellungen auf die gleiche Weise importieren.

In meinem Beispiel habe ich style.scss erstellt und das gesamte SCSS importiert:

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

0 für die Antwort № 5

Ich bin auf dasselbe Problem gestoßen, aber für mich bestand die Lösung darin, den Import der Einstellungen zu ändern app.scss von:

@import "settings";

Zu:

@import "foundation/_settings";

Sobald du das gemacht hast, renn compass watch nochmal.


0 für die Antwort № 6

Sie können Grunt in Ihr Projekt installierennutzt die Kompass-Uhrfunktion und dann einige andere clevere Sachen, um deinen Hass zu kompilieren und ihn im Browser zu laden! Hier ist ein großartiges Tutorial, wie man es zum Laufen bringt! (Es ist so einfach, zwei neue Dateien im Stammverzeichnis Ihres Projekts zu erstellen und dann ein paar Befehle von Ihrer Kommandozeile aus auszuführen! Ich empfehle es ernsthaft!)

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


0 für die Antwort № 7

Ich hatte das gleiche Problem. Für Benutzer von Ubuntu 14.04 stellen Sie sicher, dass nodejs und Bower ordnungsgemäß funktionieren. Sie können diese Anweisungen hier befolgen http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283