L'importation de la Boussole CSS3 mixin avec la Fondation

J'ai Fondation installé et fonctionne, mais je suis en train d'utiliser la Boussole CSS3 mixin dans le même projet et n'arrive pas à comprendre comment les inclure.

Je pensais que la boussole était déjà installé, car avant de procéder au réglage de la Fondation, je suis entré à:
gem install compass et j'lors de l'utilisation de SASS-je exécuter compass watch dans le dossier du projet. Tous les Fondation mixin semble compiler SCSS avec Boussole..

J'ai créé une nouvelle boussole projet et fusionné les fichiers SCSS et a ensuite essayé d'ajouter:

@import "compass/css3"

Toute aide à ce que je doit exécuter en ligne de commande ou à ajouter dans les fichiers pour accéder à ces mixons serait grandement apprécié.

OriginalL'auteur jsuissa | 2013-06-07

  1. 5

    Si vous utilisez le sass/compass version de fondation 4 et créé un projet en utilisant

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

    Puis vous ajoutez @import "compass/css3" à la stylesheets/app.scss en haut du fichier.

    Cela vous permet d'utiliser l'un quelconque des css3 mixin dans votre fichier, tels que:

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

    Vous devez exécuter compass watch ou exécuter compass compile dans votre répertoire de projet après avoir apporté les modifications à la nouvelle css généré.

    @import est le chargement de la bibliothèque et @include est la méthode qui génère css au sein de votre classe.

    Mise à JOUR:

    Je suis en train de montrer une modification de app.scss fichier (tronquée) de sorte que vous pouvez voir comment j'ai fait les modifications:

    //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);
}

    qui génère les éléments suivants dans 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;
}
    Merci pour la suggestion! J'ai essayé et reçu an invalid syntax error saying "expected selector or at-rule". Je suis sûr que compass watch était en cours d'exécution parce que le css est en train de changer comme je l'ai enregistrer les fichiers scss. Toute pensée?
    J'ai mis à jour ma réponse avec un exemple. si cela ne fonctionne toujours pas, peut-être poster vos config.rb fichier.
    Merci pour les conseils, ce n'était pas le problème, mais il a permis de confirmer mes fichiers SCSS étaient corrects, et le problème était le chemins. Dans le répertoire du projet j'ai juste tapé "installer boussole", qui je l'avais fait plus tôt, mais peut-être au mauvais endroit ou d'une séquence.

    OriginalL'auteur JAMESSTONEco

  2. -1

    Dans le répertoire du projet j'ai tapé install compass de nouveau et qui a fait le tour.

    À un certain point dans le projet, j'ai soit une faute de frappe ou fait dans le mauvais ordre ou d'un répertoire.

    Je pensais que la Boussole elle-même était déjà installé, car j'avais installé la Fondation, mais même si elle l'était, les fichiers n'étaient pas accessibles dans le cadre du projet.

    Après que la Boussole était accessible via le chemin que j'avais déjà configuré dans mon fichier SCSS "boussole/css3".

    OriginalL'auteur jsuissa