2011-05-24 8 views
3

Je suis ici avec moins de CSS. Tout allait bien, mais j'obtiens un petit bug maintenant. J'ai deux fichiers de moins. Le premier est appelé "colors.less" où j'ai déclaré les couleurs vars, et le second est la structure css.Moins d'importation CSS Problème

Ses quelque chose comme ceci:

color.less

@black: #000; 

styles.less

@import "color"; 

body { 
    background: @black; 
} 

Dans mon étiquette de tête, im écrire:

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/> 

Et bien sûr, l'importation de moins js. Que se passe-t-il quand je change la couleur noire en blanc (#fff), cela ne change pas en blanc. Stills noir. Lorsque j'inverse la logique, importez les styles à l'intérieur de la couleur, cela change, mais mes styles ne changent pas.

Qu'est-ce que je fais mal?

Merci les gars!

Répondre

5

Utilisez

@import "color.less"; 

Cela vous résoudre probely problème. Si cela ne résout pas le problème, essayez d'utiliser une couleur rouge dans votre couleur. Si la couleur par défaut du navigateur est noire, vous ne verrez pas si le style n'est pas chargé. PS: Vérifiez vos noms de fichier comme color.less ou colorS.less. Tout fichier que vous importez doit avoir une extension .css.

+2

Devrait avoir un point-virgule sur la fin mais je suis juste difficile. – Ben

+1

Vous pouvez également '@import" color.css ";' –

+0

Cette réponse ne va pas fonctionner sans un point-virgule. –

0

Pourriez-vous avoir le color dans le principal stylesheet et ne pas référence le deuxième sheet? Ensuite, vous pouvez ignorer le @import.

Aussi, je voudrais choisir un autre nom pour le style rule. Si vous décidez de changer la couleur, le nom de votre règle n'aura aucun sens.

+0

Im en utilisant moins parce que je dois mon style dynamique. L'utilisateur va définir les couleurs sur admin, et ces couleurs seront sauvegardées sur le fichier color.less. A propos du nom de la règle, j'ai essayé, j'ai mis un autre nom et je n'ai pas travaillé aussi. –

0

Je ne sais pas ce qui pourrait être la cause, mais essayez de référencer les fichiers dans yout <head> -tag comme ceci:

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/> 
<link rel="stylesheet/less" type="text/css" href="less/color.less"/> 

Et puis changer aussi votre style.less pour ne pas importer color.less depuis que vous faites cela dans votre <head> -tag déjà.

Btw: Je n'appellerais pas la couleur @black, cela peut entraîner une confusion lors du changement de couleur, essayez d'utiliser des noms plus descriptifs comme @mainBackgoundColor à la place, pour obtenir un code qui se lit bien aussi.

+0

@Lucas: une autre idée: essayez d'utiliser '@import" ./color.less ";' (ou '" ./color "' si vous préférez), je viens d'utiliser ceci pour importer sth il y a une minute et cela a fonctionné sans problème également, lorsque vous mettez à jour l'un des fichiers importés, mettre à jour l'importation aussi (juste ajouter un espace quelque part ou sth), je pense que moins peut être en cache ou sth sous le capot. – Ahti

-6

Seul le fichier contenant ou récupérant peut avoir l'extension .less.

Dans votre exemple, le fichier couleur doit avoir une extension .css au lieu de .less. Cela devrait vous corriger.

** Mise à jour Travaillé dans Chrome, pas dans Firefox ?? Bizarre.