[Résolu] CSSPreprocessor

[Aria]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.1
#~ Url du site : http://localhost
#~ Hébergeur / Soft : wamp
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour à tous,

Je suis nouvelle sur Cmsms ... que j'adore !!! Merci à tous ceux qui y ont contribué

J'aimerais si possible avoir un peu d'aide sur l'utilisation du module "CSSPreprocessor" que j'ai réussi à installer sans problème sur mon site en local. J'ai coché la 4è option: ScssPHP (Useful if sass is not installed on your server)
J'utilise également le module "ExaExternalizer" pour éditer mon code.

Voilà, si je crée UNE seule feuille de style dans cmsms, et que j'y mets tout mon code => par exemple tout ceci, ça marche !

------------------*****---------------------------

/*-- @@CSSPreprocessor@@ ---*/

$primary-color: #963889;

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}


p{
color: $primary-color;
@include border-radius(4px);
}

------------------**********------------------------

Mais comment fait-on pour séparer les différents fichiers et les lier ? J'ai essayé @import, etc., sans succès ...

Je bloque sur ceci :
For CMSMS 2+ : Solution: : put your LESS / SASS code in files and link the main file with the module through the "import dirs" parameter.

Merci d'avance.

[Aria]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.1
#~ Url du site : http://localhost
#~ Hébergeur / Soft : wamp
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour à tous,

Je suis nouvelle sur Cmsms ... que j'adore !!! Merci à tous ceux qui y ont contribué

J'aimerais si possible avoir un peu d'aide sur l'utilisation du module "CSSPreprocessor" que j'ai réussi à installer sans problème sur mon site en local. J'ai coché la 4è option: ScssPHP (Useful if sass is not installed on your server)
J'utilise également le module "ExaExternalizer" pour éditer mon code.

Voilà, si je crée UNE seule feuille de style dans cmsms, et que j'y mets tout mon code => par exemple tout ceci, ça marche !

------------------*****---------------------------

/*-- @@CSSPreprocessor@@ ---*/

$primary-color: #963889;

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}


p{
color: $primary-color;
@include border-radius(4px);
}

------------------**********------------------------

Mais comment fait-on pour séparer les différents fichiers et les lier ? J'ai essayé @import, etc., sans succès ...

Je bloque sur ceci :
For CMSMS 2+ : Solution: : put your LESS / SASS code in files and link the main file with the module through the "import dirs" parameter.

Merci d'avance.

[Jean le Chauve]

Bonjour et bienvenue Aria,
Le plus simple, si personne ne te répond ici, serait d'envoyer un mail à son développeur qui ne vient pas ici tous les jours : Exacore

[Jean le Chauve]

Bonjour et bienvenue Aria,
Le plus simple, si personne ne te répond ici, serait d'envoyer un mail à son développeur qui ne vient pas ici tous les jours : Exacore

[Aria]

Bonjour Jean et merci pour ta réponse.

Ok je vais lui envoyer un mail, c'est plutôt Aire Libre non ?

Je posterais ici la solution, à moins qu'il n'y ait que moi qui sois intéressée ?

Bonne soirée.

[Aria]

Bonjour Jean et merci pour ta réponse.

Ok je vais lui envoyer un mail, c'est plutôt Aire Libre non ?

Je posterais ici la solution, à moins qu'il n'y ait que moi qui sois intéressée ?

Bonne soirée.

[Jean le Chauve]

Non, c'est bien exacore qui a créé les 2 modules que tu citais : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=5272
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=5596

[Jean le Chauve]

Non, c'est bien exacore qui a créé les 2 modules que tu citais : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=5272
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=5596

[airelibre]

Salut à vous,

c'est bien moi (aire libre) qui ai crée CSSPreprocessor, à ne pas confondre avec ExaCSS qui a cependant des fonctions similaires.

Aria, pour te répondre : CMSMS en série 2 n'offre pas de solution actuellement pour gérer plusieurs feuilles tout en étant compatibles avec CSSPreprocessor (voir l'aide du module, j'y ai mis un mot à ce sujet).

En effet, le plugin {cms_stylesheet} compile chaque feuille séparément, au lieu de tout faire en une fois. J'ai remonté un bug (même si en soi ca n'en est pas un, c'est un changement de comportement qui fonctionne de base, mais pas pour mon module) : http://dev.cmsmadesimple.org/bug/view/10857

Donc pour l'heure, seule une feuille peut être utilisée en combinaison avec CSSPreprocessor. Si tu mets plusieurs feuilles, elles seront à chaque fois compilées séparées. Après, c'est peut être voulu, et tu peux y intégrer tes variables et mixins directements avec @import via des fichiers externes + le dossier d'import.

Je pense qu'il y a une autre piste via la fonction smarty 'include' en appelant une ressource CMSMS, mais j'ai pas testé encore.

J'espère que l'équipe de dev sera attentive à mon bug report car c'est un vrai soucis pour le module actuellement.

Dis-moi si c'est plus clair ou si je peux encore t'aider,

[airelibre]

Salut à vous,

c'est bien moi (aire libre) qui ai crée CSSPreprocessor, à ne pas confondre avec ExaCSS qui a cependant des fonctions similaires.

Aria, pour te répondre : CMSMS en série 2 n'offre pas de solution actuellement pour gérer plusieurs feuilles tout en étant compatibles avec CSSPreprocessor (voir l'aide du module, j'y ai mis un mot à ce sujet).

En effet, le plugin {cms_stylesheet} compile chaque feuille séparément, au lieu de tout faire en une fois. J'ai remonté un bug (même si en soi ca n'en est pas un, c'est un changement de comportement qui fonctionne de base, mais pas pour mon module) : http://dev.cmsmadesimple.org/bug/view/10857

Donc pour l'heure, seule une feuille peut être utilisée en combinaison avec CSSPreprocessor. Si tu mets plusieurs feuilles, elles seront à chaque fois compilées séparées. Après, c'est peut être voulu, et tu peux y intégrer tes variables et mixins directements avec @import via des fichiers externes + le dossier d'import.

Je pense qu'il y a une autre piste via la fonction smarty 'include' en appelant une ressource CMSMS, mais j'ai pas testé encore.

J'espère que l'équipe de dev sera attentive à mon bug report car c'est un vrai soucis pour le module actuellement.

Dis-moi si c'est plus clair ou si je peux encore t'aider,

[Jean le Chauve]

Oups, désolé Mathieu.

[Jean le Chauve]

Oups, désolé Mathieu.

[Aria]

Bonjour à tous,

Merci Mathieu et Jean de votre réactivité.
Effectivement, on ne peut utiliser qu'une seule feuille de style avec CssPreprocessor dans cmsms et y mettre tout le code, soit pas mal de lignes, ce qui déjà super. Or, j'aime bien organiser mes feuilles.
L'intérêt justement, c'est de pouvoir faire appel aux variables et mixins dans n'importe quelle feuille sans avoir à les recopier à chaque fois.

tu peux y intégrer tes variables et mixins directements avec @import via des fichiers externes + le dossier d'import.

Peux-tu stp donner plus de précisions ? Car c'est ici que je bloque.

J'ai fait ceci:
J'ai créé un dossier "sass" dans /uploads/
J'y ai mis mes fichiers .css mais aussi .scss où j'ai mes variables et autres. (je ne sais pas quelle extension il faut pour que ça marche)
Et enfin, j'ai créé une feuille de style dans cmsms stylesheet que j'ai relié à mon design et où je fais appel à mes feuilles externes.
@ import "moncss.css"; @import "http//localhost/monsite/....css" ne marchent pas
{include file = "" } ne marche pas non plus

Merci

[Aria]

Bonjour à tous,

Merci Mathieu et Jean de votre réactivité.
Effectivement, on ne peut utiliser qu'une seule feuille de style avec CssPreprocessor dans cmsms et y mettre tout le code, soit pas mal de lignes, ce qui déjà super. Or, j'aime bien organiser mes feuilles.
L'intérêt justement, c'est de pouvoir faire appel aux variables et mixins dans n'importe quelle feuille sans avoir à les recopier à chaque fois.

tu peux y intégrer tes variables et mixins directements avec @import via des fichiers externes + le dossier d'import.

Peux-tu stp donner plus de précisions ? Car c'est ici que je bloque.

J'ai fait ceci:
J'ai créé un dossier "sass" dans /uploads/
J'y ai mis mes fichiers .css mais aussi .scss où j'ai mes variables et autres. (je ne sais pas quelle extension il faut pour que ça marche)
Et enfin, j'ai créé une feuille de style dans cmsms stylesheet que j'ai relié à mon design et où je fais appel à mes feuilles externes.
@ import "moncss.css"; @import "http//localhost/monsite/....css" ne marchent pas
{include file = "" } ne marche pas non plus

Merci

[airelibre]

Il faut utiliser des .scss il me semble avec SASS.

Par exemple, pour :

Code :

@import 'variables';
@import 'mixins';

Tu dois avoir des fichiers :
uploads/scss/variables.scss
uploads/scss/mixins.scss

Et mettre en effet le dossier : uploads/scss comme paramètre "Répertoires contenant les fichiers LESS/SASS".

Tu peux aussi tenter de nommer tes fichiers : _variables.scss et _mixins.scss

Attention : la modification d'un des fichiers (variables / mixins ou autres) doit demander une vidange du cache du CMS car il ne va pas détecter la modification.

Ce n'est pas très pratique ainsi, je te l'accorde - j'espère que {cms_stylesheet} fera l'objet d'une mise à jour. Vous pouvez y contribuer en appuyant le bug ouvert : http://dev.cmsmadesimple.org/bug/view/10857

Merci

[airelibre]

Il faut utiliser des .scss il me semble avec SASS.

Par exemple, pour :

Code :

@import 'variables';
@import 'mixins';

Tu dois avoir des fichiers :
uploads/scss/variables.scss
uploads/scss/mixins.scss

Et mettre en effet le dossier : uploads/scss comme paramètre "Répertoires contenant les fichiers LESS/SASS".

Tu peux aussi tenter de nommer tes fichiers : _variables.scss et _mixins.scss

Attention : la modification d'un des fichiers (variables / mixins ou autres) doit demander une vidange du cache du CMS car il ne va pas détecter la modification.

Ce n'est pas très pratique ainsi, je te l'accorde - j'espère que {cms_stylesheet} fera l'objet d'une mise à jour. Vous pouvez y contribuer en appuyant le bug ouvert : http://dev.cmsmadesimple.org/bug/view/10857

Merci

[airelibre]

Autre option, à tester :

Code :

[[include file='cms_stylesheet:seconde_feuille_css']]

> à placer dans la feuille de styles principale pour faire appel à une autre feuille du gestionnaire de design. Mais le problème du cache n'est pas forcément réglé

[airelibre]

Autre option, à tester :

Code :

[[include file='cms_stylesheet:seconde_feuille_css']]

> à placer dans la feuille de styles principale pour faire appel à une autre feuille du gestionnaire de design. Mais le problème du cache n'est pas forcément réglé

[airelibre]

Bon... une solution qui marque pour les mixins et variables, donc qui ne sortent pas du code en eux-mêmes :

1. On crée 3 feuilles : mixins / variables / main
2. On les associe au design toutes les 3
3. On y place les codes respectifs
4. dans main, on inclue les autres avec [[include]] au début (avant le code qui utilise les mixins / variables)

Ainsi, on bénéficie des mises à jour automatiques à chaque rechargement de page, sans pour autant dupliquer le code mixins / variables

Ce n'est pas idéal pour plusieurs raisons, mais à l'heure actuelle c'est la seule option pour avoir plusieurs feuilles

[airelibre]

Bon... une solution qui marque pour les mixins et variables, donc qui ne sortent pas du code en eux-mêmes :

1. On crée 3 feuilles : mixins / variables / main
2. On les associe au design toutes les 3
3. On y place les codes respectifs
4. dans main, on inclue les autres avec [[include]] au début (avant le code qui utilise les mixins / variables)

Ainsi, on bénéficie des mises à jour automatiques à chaque rechargement de page, sans pour autant dupliquer le code mixins / variables

Ce n'est pas idéal pour plusieurs raisons, mais à l'heure actuelle c'est la seule option pour avoir plusieurs feuilles

[Aria]

Bonjour Mathieu,

Incroyable !!

Code :

[[include file='mon_autre_feuille_dans_cmsms_stylesheet']]

Inclut bien le fichier en question dans ma feuille principale. Je l'ai pourtant essayé mais avec des {}. Erreur ...
Je file tester tout ça et reviendrais fermer le sujet si tout est ok.

Merci encore pour ton aide précieuse

Bonne journée

[Aria]

Bonjour Mathieu,

Incroyable !!

Code :

[[include file='mon_autre_feuille_dans_cmsms_stylesheet']]

Inclut bien le fichier en question dans ma feuille principale. Je l'ai pourtant essayé mais avec des {}. Erreur ...
Je file tester tout ça et reviendrais fermer le sujet si tout est ok.

Merci encore pour ton aide précieuse

Bonne journée

[airelibre]

Les accolades ne peuvent être utilisées dans les feuilles de styles, justement parce que celles-ci utilisent souvent les accolades. Elles sont alors remplacées par [[ et ]]

[airelibre]

Les accolades ne peuvent être utilisées dans les feuilles de styles, justement parce que celles-ci utilisent souvent les accolades. Elles sont alors remplacées par [[ et ]]

[Aria]

Bonjour à tous,

Je suis maintenant sur cmsms 2.1.2 et CSSPreprocessor fonctionne toujours aussi bien (ce qui n'est pas le cas de ExaExternalizer). J'ai adopté la 2è solution, je gère donc toutes mes feuilles dans Gestion du design.

J'aurais encore une toute petite question, y-a-t'il un moyen simple de minifier le css généré par ces fichiers ? car [[strip]][[/strip]] semble ne pas marcher ici ?

Merci d'avance.

[Aria]

Bonjour à tous,

Je suis maintenant sur cmsms 2.1.2 et CSSPreprocessor fonctionne toujours aussi bien (ce qui n'est pas le cas de ExaExternalizer). J'ai adopté la 2è solution, je gère donc toutes mes feuilles dans Gestion du design.

J'aurais encore une toute petite question, y-a-t'il un moyen simple de minifier le css généré par ces fichiers ? car [[strip]][[/strip]] semble ne pas marcher ici ?

Merci d'avance.

[airelibre]

L'option "minifier" dans CSSPreprocessor permet cela - mais cela ne marche du coup que pour les feuilles qui passent par le module (avec @@CSSPreprocessor@@ en commentaire)

[airelibre]

L'option "minifier" dans CSSPreprocessor permet cela - mais cela ne marche du coup que pour les feuilles qui passent par le module (avec @@CSSPreprocessor@@ en commentaire)

[Aria]

Super, ça marche ! Merci beaucoup pour ton aide
Bonne journée

[Aria]

Super, ça marche ! Merci beaucoup pour ton aide
Bonne journée

[airelibre]

Bonne continuation !

[airelibre]

Bonne continuation !