18041 sujets

Questions générales et questions de débutants

[Résolu] Problème pour installer Less coté client

Bonjour,
je n'arrive tjrs pas à installer Less coté client. Smiley bawling
Merci car ne me répondre car je tourne en rond

1) J'ai téléchargé le less.js, installé à la racine.

2) code pour styles.css
#header { 
  background-color: @blue; 
  width:800px;
  height:100px;
}

#footer {
	background-color: @magenta;

}


3) code pour styles.less
@blue: #17B6FF;
@magenta: #FF17B6;
@lime: #B6FF17;
@green: #1BFF17;


4) code de page index
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page avec Less</title>

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>

<script src="less.js" type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>
  <div id="header">bonjour</div>
  <div id="footer">Au revoir</div>
</body>
</html>
Administrateur
Bonjour,

je ne pense pas (*) qu'il faille un styles.css : LESS.js "compile" des fichiers .less en CSS qui sont ensuite perçues par le navigateur client.
Les fichiers .css ne sont pas pris en compte par LESS.js, c'est le cas habituel d'un fichier CSS que le navigateur interprète directement.
Du coup, le fichier .less devrait être quelque chose comme :
@blue: #17B6FF;
@magenta: #FF17B6;
@lime: #B6FF17;
@green: #1BFF17;

#header { 
  background-color: @blue; 
  width:800px;
  height:100px;
}

#footer {
	background-color: @magenta;

}


et le fichier CSS soit ne pas exister soit contenir des instructions CSS habituelles et standard, pas des variables LESS

(*) j'utilise Prepros et si à la rigueur LESS;js est pratique le temps de développer un site, envoyer aux visiteurs d'un site en production des fichiers LESS et un script qui ne permettront aux pages d'être stylées que s'ils ont activé JS et après un temps de compilation non nul et un temps de chargement allongé à cause du LESS.JS est hors de question me concernant.
Ok merci felipe,

ça marche tjrs pas, bizarre. Maintenant même mes width et height ont sauter?
c'est comme si styles.less n'était pas pris en compte. même si il monte en haut à gauche.

PS: je vais essayer Prepros, mais je voudrais savoir pourquoi actuellement ça marche pas.
Modifié par pym_74 (21 Aug 2014 - 16:17)
c'est marche, j'ai mis:
<script type="text/javascript">
less.watch();
</script>

merci felipe, je vais avancer
Sujet clos
Aller à