Certains code LESS ne sont pas pris en compte

[Visiteur]

Salut

Un truc assez zarbi m'arrive dans mon fichier LESS : certain code ne sont pas pris en compte.

La structure de mes LESS dans mon template Helix3 :

• articles.less (pour les articles que nous mettons en ligne régulièrement)
• custom.less (pour les mise en page des pages et du template)
• declarations-perso.less

Les LESS qui me pose probleme :

.block-gauche {
	float:left;
	margin-right:20px;
}

.block-droite {
	float:right;
	margin-left:20px;
}

Ils se trouve dans declarations-perso.less.

On peux les trouver, par exemple, dans cet article (mais ça le fait dans les autres pages où ils sont présent). Le bloc avec les sons doit être à droite et la photo qui se trouve juste après doit être a gauche.

Pour chacun d'eux, dans articles.less j'ai :

.lecteur-audio-20161006 {.block-droite;}

.art-07-20161006  {.block-gauche;}

et pour le HTML :

Bloc des sons :

<div class="lecteur-audio lecteur-audio-20161006">
	<p class="legende">Grand dauphin</p>
	{mp3}articles/2016/20161006-art-04{/mp3}
	<hr />
	<p class="legende">Orque</p>
	{ogg}articles/2016/20161006-art-05{/ogg}
	<hr />
	<p class="legende">Orque</p>
	{ogg}articles/2016/20161006-art-06{/ogg}
</div>

Photo :

<figure class="art-07-20161006">
	<img src="images/articles/2016/20161006-art-07.jpg" alt="Dauphin commun observé lors d'une sortie en mer d'Itsas Arima." />
	<figcaption>Dauphin commun</figcaption>
</figure>

Mon LESS marche bien puisque les autres codes sont bien prit en compte. Je suis sous Firefox, mais j'ai regardé dans Opéra et ça fait pareil. Dans Firefox ça ne peut pas être le cache car il est désactivé.

Je ne comprend pas pourquoi ceux là ne marche pas.

[lomart]

Re : Certains code LESS ne sont pas pris en compte

Bonjour,

Vous importez bien declarations-perso.less dans articles.less ?

[Visiteur]

Re : Certains code LESS ne sont pas pris en compte

Oui. Dans articles.less il y a bien @import 'declarations-perso';. J'ai fait une page test et en fait aucun code qui se trouve dans declarations-perso.less n'est pris en compte dans articles.less.

[lomart]

Re : Certains code LESS ne sont pas pris en compte

Je remarque au début d'articles.css, cette règle en erreur

.block-01 {
  background-color: ;
}

Ne serait-ce pas cette erreur qui bloquerait l'import !

[Visiteur]

Re : Certains code LESS ne sont pas pris en compte

En fait c'est pas que ca ne les prend pas en compte, c'est que ca me les supprimes !

Normalement le code que j'ai mis et qui comporte l'erreur que tu reléve c'est :

.block-01 {
	.bordure-rouge;
	background-color:@couleur-b;
}

[lomart]

Re : Certains code LESS ne sont pas pris en compte

Je présume que @couleur-b est dans declarations-perso.less
Essaie de faire l'importation avec un compilateur comme koala (http://koala-app.com/) pour essayer de comprendre
Il peut voir des erreurs que le compilateur d'helix ne verrait pas

Tu peux aussi poster tes 2 fichiers LESS

[Visiteur]

Re : Certains code LESS ne sont pas pris en compte

Oui, effectivement @couleur-b est bien dans declarations-perso.less. Koala a trouvé des erreurs, mais pas dans articles.less ni declarations-perso.less. Toutes les erreurs sont des NameError et se trouve dans les fichiers LESS de Helix et 2 dans mon fichier custom.less. Comme tu le propose je joins mes fichiers LESS.

Mais je me pose une question : utilisant LESS depuis très peu de temps (quelques mois a peine) je me demande si j'ai fait les bonnes manips quant j'ai fait les réglages pour pouvoir utiliser LESS dans Helix. Je me souviens plus où j'avais trouvé la méthode, mais j'ai fait comme ca :

En plus de custom.less qui doit être obligatoirement présent, j'ai créé les fichiers articles.less, declarations-perso.less et custom-responsive.less.

Puis dans le fichier \templates\shaper_helix3\index.php, dans le code :

// load css, less and js
                $this->helix3->addCSS('bootstrap.min.css, font-awesome.min.css') // CSS Files
                        ->addJS('bootstrap.min.js, jquery.sticky.js, main.js') // JS Files
                        ->lessInit()->setLessVariables(array(
                            'preset' => $this->helix3->Preset(),
                            'bg_color' => $this->helix3->PresetParam('_bg'),
                            'text_color' => $this->helix3->PresetParam('_text'),
                            'major_color' => $this->helix3->PresetParam('_major'),
                            'megabg_color' => $megabgcolor,
                            'megatx_color' => $megabgtx,
                            'preloader_bg' => $preloader_bg,
                            'preloader_tx' => $preloader_tx,
                        ))
                        ->addLess('legacy/bootstrap', 'legacy')
                        ->addLess('master', 'template');

j'ai ajouté :

// load css, less and js
                $this->helix3->addCSS('bootstrap.min.css, font-awesome.min.css') // CSS Files
                        ->addJS('bootstrap.min.js, jquery.sticky.js, main.js') // JS Files
                        ->lessInit()->setLessVariables(array(
                            'preset' => $this->helix3->Preset(),
                            'bg_color' => $this->helix3->PresetParam('_bg'),
                            'text_color' => $this->helix3->PresetParam('_text'),
                            'major_color' => $this->helix3->PresetParam('_major'),
                            'megabg_color' => $megabgcolor,
                            'megatx_color' => $megabgtx,
                            'preloader_bg' => $preloader_bg,
                            'preloader_tx' => $preloader_tx,
                        ))
                        ->addLess('legacy/bootstrap', 'legacy')
                        ->addLess('master', 'template')
                        [B]->addLess('custom', 'custom')
			->addLess('articles', 'articles')
			->addLess('declarations-perso', 'declarations-perso')
			->addLess('custom-responsive', 'custom-responsive')[/B];

Dans mes fichiers LESS j'ai ajouté des @import :

custom.less :

@import 'declarations-perso';

@import 'responsive-perso';

articles.less :

@import 'declarations-perso';

declarations-perso.less : pas de @import.

custom-responsive.less :

@import 'declarations-perso';

[lomart]

Re : Certains code LESS ne sont pas pris en compte

Le fichier custom-responsive.css est en rerreur 404. Il est cherché en racine du site !

La compilation avec Koala me semble correcte. Dans ce cas, c'est la compilation par Helix qui pose problème.
Pour le vérifier mettre le fichier articles.css compilé par Koala à la place de celui du template

Je ne connais pas suffisamment Helix pour t'en dire plus

[Visiteur]

Re : Certains code LESS ne sont pas pris en compte

Ça marche ! ça viendrait donc d'un probleme de compilation par Helix. je ne met pas mon sujet en Résolu, car si jamais quelqu'un qui connais bien Helix passe par là, il/elle pourra peut être me confirmer et m'aider a voir d’où vient le probleme dans Helix.

En tout cas merci de m'avoir aider

[lomart]

Re : Certains code LESS ne sont pas pris en compte

En attendant, regarde si ce plugin peut faire l'affaire

https://extensions.joomla.org/extensions/extension/miscellaneous/development/system-less-compiler/

Je ne le connais pas, j'ai abandonné LESS pour SCSS depuis quelques années

[Visiteur]

Re : Certains code LESS ne sont pas pris en compte

Comme tu me le conseille j'ai essayé avec ce plugin mais ça ne change rien. Pourquoi tu as préférè passer a SCSS ?

[lomart]

Re : Certains code LESS ne sont pas pris en compte

Pourquoi tu as préférè passer a SCSS ?

Parce que, il y a longtemps déjà, SCSS avait beaucoup plus de possibilité que LESS. Avec le temps, LESS a repris une bonne partie des fonctionnalités de SASS. il manque encore la gestion facile des boucles et conditions, les valeurs par défaut, les partiels.
Plus d'info : https://lomart.fr/extensions/20-scss...ison-scss-less

[Visiteur]

Re : Certains code LESS ne sont pas pris en compte

Merci pour le lien (très intéressant ton article sur le format des photos !).