Import von Kompass CSS3-Mixins in Verbindung mit der Stiftung

Habe ich Foundation installiert ist und funktioniert, aber ich versuche, Kompass, CSS3-Mixins in Verbindung innerhalb des gleichen Projektes und kann nicht scheinen, um herauszufinden, wie Sie sind.

Ich dachte, Kompass wurde bereits installiert, weil vor der Einrichtung der Stiftung, die ich eingegeben:
gem install compass und ich bei der Verwendung von SASS, die ich laufen compass watch in Projekt-Ordner. Alle Foundation-Mixins in Verbindung scheint zu kompilieren SCSS mit Kompass..

Erstellte ich ein neues Projekt compass und zusammengeführt, die SCSS-Dateien und dann versucht, hinzuzufügen:

@import "compass/css3"

Jede Hilfe, was sollte ich führen Sie in der Befehlszeile oder add in-Dateien für den Zugriff auf diese mixons würde sehr geschätzt werden.

InformationsquelleAutor jsuissa | 2013-06-07

  1. 5

    Wenn Sie mit sass/compass version von foundation 4 und erstellt ein Projekt mit

    compass create myproject -r zurb-foundation --using foundation

    Dann würden Sie hinzufügen @import "compass/css3" zu den stylesheets/app.scss am Anfang der Datei.

    Dies ermöglicht Ihnen die Nutzung von css3-Mixins in Verbindung in Ihre Datei, wie:

    .myclass {
  @include border-radius(12);
}

    Führen Sie compass watch oder laufen compass compile in Ihrem Projekt-Verzeichnis nachdem Sie die änderungen vorgenommen haben, die neue css generiert.

    @import ist das laden der Bibliothek und der @include ist die Methode, die erzeugt css in eurer Klasse.

    UPDATE:

    Zeige ich eine modifizierte app.scss - Datei (gekürzt) so können Sie sehen, wie ich die änderungen vorgenommen:

    //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";

//Import Compass CSS3 Stuff
@import "compass/css3";

//Import specific parts of Foundation by commenting the import "foundation"
//and uncommenting what you want below. You must uncomment the following if customizing

//@import "foundation/components/global"; //*always required
//...
//@import "foundation/components/dropdown";

.myclass {
  @include border-radius(12);
}

    generiert das folgende in stylesheets/app.css:

    /* line 52, ../sass/app.scss */
.myclass {
  -webkit-border-radius: 12;
  -moz-border-radius: 12;
  -ms-border-radius: 12;
  -o-border-radius: 12;
  border-radius: 12;
}
    Danke für die Anregung! Ich habe versucht, und erhielt an invalid syntax error saying "expected selector or at-rule". Ich bin mir sicher, dass compass watch ausgeführt wurde, weil die css ändern, da ich das speichern der scss-Dateien. Irgendwelche Gedanken?
    Ich aktualisiert meine Antwort mit einem Beispiel. wenn dies immer noch nicht funktioniert, vielleicht posten Sie Ihre config.rb - Datei.
    Vielen Dank für die Ratschläge, das war nicht das problem, aber es half bestätigen, meine SCSS-Dateien korrekt waren und das war die Frage der Pfade. In das Projekt-Verzeichnis tippte ich einfach "install compass", das hatte ich schon früher gemacht, aber vielleicht an der falschen Stelle oder Sequenz.

    InformationsquelleAutor JAMESSTONEco

  2. -1

    In das Projekt-Verzeichnis tippte ich install compass wieder und das war der trick.

    Irgendwann in das Projekt, das ich entweder vertippt oder hat dieser in der falschen Reihenfolge oder ein Verzeichnis.

    Ich dachte, Kompass selbst war bereits installiert, da hatte ich installiert-Stiftung, aber auch wenn Sie es war, die Dateien waren nicht zugänglich innerhalb des Projekts.

    Nach dieser Kompass war über den Weg, den ich vorher hatte-setup in meine SCSS-Datei "compass/css3".

    InformationsquelleAutor jsuissa

Schreibe einen Kommentar