[Foundation 4] Inclure des mixins par défaut de Foundation

Nicolas Lemoine
Les bases HTML/CSS

Bonsoir,

Je me suis mis récemment à l'apprentissage de Foundation 4 et rencontre un petit souci lorsque j'essaie par exemple de me faire une classe pour mes boutons.
Je n'ai malheureusement pas trouvé mon bonheur dans la documentation.

Donc, dans apps.scss j'ai commenté

// @import "foundation";

et ai activé les imports suivants : 

@import "foundation/components/global"; // *always required
@import "foundation/components/grid";
@import "foundation/components/type";
@import "foundation/components/buttons";
@import "foundation/components/forms"; // *requires components/buttons

J'ai ensuite fait, dans _settings.scss une règle toute simple : 

.my-button { @include button; }

, pour tester, et en compilant, j'obtiens l'erreur suivante :

error app.scss <Line xx of _settings.scss: Undefined mixin 'button'.>

Selon la doc, il faut inclure @import "foundation/variables"; mais je ne le trouve pas dans le fichier de config, et même si je l'importe, ça ne fonctionne pas.

Je ne sais pas vraiment ce que je dois faire. Une petite indication ne serait pas de refus.

Merci d'avance pour votre aide et bonne soirée.

4 réponses

Nicolas Lemoine
Auteur
Réponse acceptée

Hello,

J'ai plus ou moins trouvé la solution mais c'est incohérent de mon point de vue.
En fait, les class provenant d'include doivent être placées dans le fichier app.scss, à la fin, et non dans _settings.scss comme je l'imaginais.

Cet ordre est assez bizarre. Si on déplace

// Global Foundation Settings
@import "settings";

à la fin du fichier _settings.scss au lieu d'au début, ça ne fonctionne pas.

Bref, je ne suis pas convaincu par cette partie de Foundation.

Nicolas Lemoine
Auteur

Petit up.
Je me suis finalement rendu compte que le fichier variables.scss est le meme que settings.scss. Du coup j'suis encore plus perdu :(

Pewel-OutOfNutella

Le fichier variables, c'est les paramètres par défaut et les fichier settings les paramètres que tu veux changer.
En gros faut pas toucher au variables (sauf si tu es sûr de ce que tu fait) et si tu souhaite modifier les couleurs d'un bouton, tu modifie le fichier settings.

Ca permet de retrouver le comportement initial de foundation (couleurs, marges etc) en supprimant le contenu du dossier settings, si tu le souhaites.

Pour les imports, il faut laisser la ligne @import "foundation" décommentée il me semble.
C'est le composant principal du framework si je me souviens bien

Nicolas Lemoine
Auteur

Salut,

Merci pour ta réponse mais elle ne m'aide pas vraiment.
Mon but n'est pas de modifier la base de Foundation mais de m'en servir pour customiser mon code.
L'idée est d'utiliser une partie seulement des mixins de Foundation pour créer ma propre classe de boutons par exemple.

Cordialement,