Forum : [Sass/compass] import et portée des variables ??

Réponse acceptée

Pas de soucis, on a tous commencé à un moment ^^ (je me met péniblement à la POO de mon côté et ça me parait toujours bien mystérieux tu vois...).

Bref, tu peux avoir le nombre de fichiers que tu veux. Préfixer un nom de fichier par un "_" sert justement pour les import, ça permet de bien découper tes fichiers.
Par exemple, sur tous mes projets, j'ai un dossier SASS avec un app.sass et des fichiers tels que _mixins.sass, _variables.sass, _reset.sass, etc...

En haut de mon fichier app.sass, j'ai

@import 'compass/css3'
@import 'mixins'
@import 'reset'
@import 'media'
@import 'variables'

En gros, tu stockes tes variables dans un fichier préfixé d'un "_" et tu l'import dans le fichier où tu veux l'utiliser.
Sass fera le reste et compilera tes fichiers non préfixé en nom_de_fichier.css :)

Khalysto

Bonjour,

Est ce que tes variables sont isolées dans un seul fichier ?
Est ce que tu les importes bien avant de les utiliser ?

wizz

Auteur

Merci de répondre si vite Khalysto,

dans style.scss:
$header-bg: #2e7d32;
@import "responsive";

dans responsive.scss:
background-color: $header-bg;

donne :
Error: Undefined variable: "$header-bg".
on line 40 of /Users/wizztiti/Documents/Boulot/test-sass/scss/responsive.scss

Khalysto

Créer un fichier que tu nommes '_variables.scss' et importe le en premier, cela devrait résoudre ton soucis en plus de partitionner ton code.

wizz

Auteur

Khalysto,
Merci de m'avoir répondu si vite mais apparemment tu m'as mal lu. Ma problèmatique est de ne pas tout compiler dans un seul fichier css. Hors, avec un _ , cela compile tout dans un seul css.

Khalysto

Il me semble que ce tu demandes n'est pas possible sans passer par un autre fichier, Compass ne connait pas les variables autrement.
De plus, les variables ne sont pas compilées, donc invisibles dans ton fichier final ! ;)

Ta structure donnerait

css
|____ fichier1.css
|____ fichier2.css

scss
|____ _variables.scss
|____ fichier1.scss
|____ fichier2.scss

A tester, je ne fais généralement qu'un seul fichier css...

wizz

Auteur

"Il me semble que ce tu demandes n'est pas possible sans passer par un autre fichier"

Comme je l'ai déjà indiqué dans mon 1er post, c'est pourtant ce qui est fait dans le tuto. Raison de mon post ^^

Khalysto

Dans le tuto, le fichier se nomme _responsive.scss ^^'
Ton problème c'est que vu que tu ne défini pas ta variable dans ton fichier responsive.css elle n'est pas connue

Khalysto

Si tu ne sais pas utiliser une technologie, passe par la documentation d'abord.

Lors d'un import, compass va charger tous les fichiers du dossier spécifiés et compiler les scss en css et si un fichier et nommé "_nom-fichier.scss" il ne sera pas compilé. De plus, que tu mettes le "" ou pas n'a pas d'importance, c'est pour ça que Grafikart ne le met pas et pourtant le fichier chargé s'appelle "_responsive.scss".

Je t'invite à regarder dans la vidéo l'onglet de sublime text qui s'appelle Open files et tu verras que tu as tort et que le fichier s'appelle bien "_responsive.css"

wizz

Auteur

désolé Khalysto, j'ai vu que j'avais tord et j'ai supprimé mon post mais tu l'as vu et répondu avant. Par contre, je ne comprends toujours pas CAR:
1) si je fais la meme chose que lui je reste dans un unique fichier à la compilation.
2) dans la vidéo on voit comme nom de fichier dans sublimeText "responsive.scss" et non pas "_responsive.scss" :-o donc étrange.

EDIT: je viens de comprendre, le _ de l'onglet n'apparait pas à cause de la faible résolution.
Désolé, Khalysto, pour ma remarque (ca fait juste 2 jours que je galère avec compass, pense que je vais faire une pause)

wizz

Auteur

Donc en gros on ne peut que sortir un seul fichier css ? quid alors de la maintenabilité d'un tel fichier si on n'a pas les sources en scss ?

[Sass/compass] import et portée des variables ??

11 réponses