Gérer un projet avec Foundation et SASS

philippe.idlas@free.fr
Les bases HTML/CSS

Bonjour,

J'utilise le préprocesseur SASS (+Compass) et le framework foundation pour profiter de son design responsive et de ses bibliothèques javascript.
Pour modifier les templates par défaut de Foundation je passe donc par les fichiers .scss qui sont ensuite interprétés et viennent modifier le fichier app.css du répertoire stylesheets.

Grâce à firebug et à la documentation en ligne de Foundation, je localise assez rapidement les balises à modifier pour générer le design que je souhaite pour mon site.

Pour changer la couleur de fond de la top-bar (exemple choisi par grafikart dans son tutoriel), cela fonctionne parfaitement.

Par contre je ne trouve pas la bonne variable (après plusieurs essais) de _settings.scss que je dois modifié pour également changer la couleur de fond (c'est un exemple) au moment du survol. D'après firebug, c'est la balise .top-bar-section li a:hover:not(.button) qu'il faut modifier.
Par contre je ne trouve pas dans la section $topbar du fichier _settings.scsss la bonne variable à modifier.

Quelqu'un peut-il m'aider ?

Première question que je me pose : peut-on réellement modifier tout le design de foundation en passant par SASS ?
Deuxième question que je me pose : est-ce manqué une étape dans la configuration de départ ?

Cordialement.

PS : profitez de ce beau dimanche ensoleillé.

1 réponse

philippe.idlas@free.fr
Auteur

Bonsoir,

Voilà les modifs. que j'ai faite dans _settings.scss pour avoir un changement de couleur de fond quand la souris passe sur les liens du menu. Rien n'y fait. Le fond est toujours noir.

// Set the link colors and styles for top-level nav
$topbar-link-color: #fff;
$topbar-link-color-hover: #52c3f1;
// $topbar-link-color-active: #52c3f1;
// $topbar-link-weight: bold;
// $topbar-link-font-size: emCalc(13px);
// $topbar-link-hover-lightness: -30%; // Darken by 30%
$topbar-link-bg-hover:#fff;
// $topbar-link-bg-active: darken($topbar-bg, 3%);

Quelqu'un a une idée ?

Cordialement.