Installation du SCSS/SASS dans notre stylesheet.

+6
RomainG
Ilhyianna
Neptunia
Heaven.
NyxBanana
IvyDTyler
10 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Êtes-vous pour ou contre ?

000 - Installation du SCSS/SASS dans notre stylesheet. Left1140%000 - Installation du SCSS/SASS dans notre stylesheet. Right11 40% 
[ 8 ]
000 - Installation du SCSS/SASS dans notre stylesheet. Left1160%000 - Installation du SCSS/SASS dans notre stylesheet. Right11 60% 
[ 12 ]
 
Total des votes : 20
 
 
Sondage clos
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mer 04 Mar 2020, 14:32

Bonjour à vous,

Je viens vers vous aujourd'hui afin de demander s'il serait possible pour l'avenir de nos forums, en tant qu'administrateur ayant accès au panneau d'administration, comme aux membres sachant un peu coder, d'avoir la possibilité d'installer les principes simples du scss/sass. Je ne parle évidemment pas du fait d'importer/exporter des codes (bien que pour nos fiches html cela pourrait être une idée), mais bien le principe d'appeler des variables et ainsi ne nommer qu'une seule fois les choses.

Exemple simple :

Je souhaite implanter un background : #fdfdfd;. Au lieu d'avoir à répéter cette commande et incroyablement alourdir ma fiche de style, il me suffirait de l'appeler une seule et unique fois en appelant la variable nommée. Cela permettrait d'alléger énormément nos fiches de styles mais aussi nos fiches html et nos codes de manière générale, en nous évitant de répéter des codes encore et encore. Evidemment, je cite l'exemple du background mais lors de créations de div et de boîtes multiples, cela pourrait nous être aussi très utile d'avoir à écrire une seule fois le nom de la variable que la copier/coller ou la réécrire à chaque fois.

Exemple plus concret

$backgroundisred:red;

Ce serait ce que vous mettriez au début de votre fiche css et lorsque vous remplissez votre css, à chaque background souhaité, vous ajouteriez : background:$backgroundisred;. Lors de vos mises à jour, vous n'aurez donc à changer que le $backgroundisred:red; par $backgroundisred:blue; et le résultat serait que toutes vos classes possédant le backgroundisred de modifieraient automatiquement d'un background rouge à bleu, sans que vous ayez à fouiller chaque class pour vérifier que tout est bien intégré. Je fais mention du background mais cela peut avoir bien d'autres utilités pour vos polices etc.



Pour les personnes souhaitant rester sur une méthode de CSS, le SASS/SCSS ne changerait rien pour eux, puisque le SCSS prend en compte le CSS, mais l'inverse ne se vaut malheureusement pas. Certains développeurs utilisent sur forumactif une base :root mais cela ne facilite pas les choses pour autant et ne règle finalement pas tous les soucis que le préprocesseur SASS pourrait régler (je parle aussi d'imbrication et de façon de traiter nos class ^^).

L'idée ne serait donc pas de faire du JavaScript dans notre stylesheet mais bien de pouvoir créer, au minimum, des variables que l'on crée aussi dans notre stylesheet, pour que nous n'ayons qu'à l'écrire une fois et ensuite appeler la variable. Le SCSS permet aussi, au delà de la création de variable, d'imbriquer efficacement nos codes et donc nous faire gagner des lignes et du temps et optimiser au mieux notre code, on y gagnerait beaucoup en lisibilité et en maintient (mais ce n'est que mon avis). Cela nous éviterait d'avoir à nous répéter dans nos codes et c'est aussi ce que je recherche dans la démarche, la répétition pour traiter les class et id alourdit beaucoup la lecture, ce qu'évite le SCSS. Je conseille assez vivement, par conséquent, la documentation fournit au début du topic, elle est en anglais mais elle peut être trouvée aussi en français.

Je me permets d'éditer aussi car j'ai lu les actuels sondages pouvant concerner de près ou de loin cet actuel sondage et je pensais donc que ça pourrait aussi aider aux soucis relever ici : https://forum.forumactif.com/t334703-administration-des-feuilles-de-style-css-annexes puisqu'au final un des problème qui est revenu, c'est la longueur de la stylesheet, le SCSS aiderait donc déjà énormément à réduire le nombre de lignes et donc être plus efficace.

En vous remerciant par avance.


Dernière édition par IvyDTyler le Mer 04 Mar 2020, 18:33, édité 2 fois
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par NyxBanana Mer 04 Mar 2020, 16:57

Bonjour IvyDTyler,

L'idée de demander l'intégration de SASS ou SCSS est vraiment intéressante, mais je regrette l'angle d'approche que tu choisis pour en vendre ses mérites.

En effet, les variables CSS utilisées en passant par le root ne créent pas plus de ligne de code qu'une variable SASS ou SCSS vu que dans les deux cas il faut appeler la variable au début de la feuille de style. Il n'y a que la nomenclature qui change, au final. Le concept et l'application reste la même dans les deux cas. (ou alors nous n'utilisons pas les variables CSS de la même manière, toutes les deux) Mon forum Marbhadh était géré en variable CSS et rien n'était plus simple pour les mises à jours impliquant des changements de couleurs. Smile

Par contre, là où SASS et SCSS pourrait nous faire gagner énormément de temps, c'est grâce à tout ce qui est Nesting, Mixins et Operators. (d'autant plus que pour ce qui est utilisation de Calc, il ne faut pas oublier de désactiver l'optimisation de son CSS sur forumactif)

Une simplification d'écriture qui permet au final un code mit en place proprement et sans atrocités. Cela permettrait de cibler correctement les éléments souhaités et de rendre l'intégralité de la feuille de style plus facile à naviguer et à éditer. Je ne parle même pas du gain de place que cela proposerait en raccourcissant aussi cette dite feuille de style. Et que dire des mixins tenus à jours en fonction des besoins spécifiques de chaque navigateur ? Amen, fini de devoir à chaque fois aller vérifier si le mixin est encore d'actualité ou pas.

Donc oui, SASS et SCSS auraient des avantages. Mais alors qu'on a les variables CSS pour régler le problème que tu soulignes ici, je ne vois pas ce qui justifierait pour FA le coup de développement pour intégrer la possibilité de développer son forum avec SASS ou SCSS (quid de LESS ?). Autant j'apprécie développer par ces biais là, autant je ne suis pas sûre que cela sera utilisé par une majorité de personnes sur forumactif compte tenu du fait que ces langages nécessites une connaissance et une curiosité qui manque souvent aux néophytes. De plus, si les "seuls" réels apports SASS, LESS ou du SCSS sont le Nesting, les Mixins et les Operators, je pense que c'est beaucoup demander pour très peu de changement, au final. Neutral

Maintenant si on cherche la petite bête, la seule chose qui est reprochable pour les variables CSS, c'est qu'elles ne fonctionnent pas sur IE. Mais pour avoir installé google analytics sur les forum où je suis, je n'ai plus vu personne sur ce navigateur depuis bien longtemps maintenant. Surtout que les variables CSS prennent le fallback pour justement permettre une information de base pour que les utilisateus IE voient quand même quelque chose s'afficher  Surprised

Bonne journée à toi
NyxBanana

NyxBanana
**

Messages : 54
Inscrit(e) le : 22/10/2015

http://marbhadh.forumactif.com
NyxBanana a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mer 04 Mar 2020, 17:12

Bonjour,

Par contre, là où SASS et SCSS pourrait nous faire gagner énormément de temps, c'est grâce à tout ce qui est Nesting, Mixins et Operators. (d'autant plus que pour ce qui est utilisation de Calc, il ne faut pas oublier de désactiver l'optimisation de son CSS sur forumactif)

C'est en effet ce que je disais à Moses., je regrette avec le recul de ne pas avoir mentionner le Nesting et les Mixins et plus généralement les imbrications possible grâce au SCSS/Sass et le temps que ça nous ferait gagner (et le nombre de lignes) et d'avoir surtout parlé des variables. Quand on prend les avantages du SCSS/Sass dans sa globalité ça pourrait être plus qu'intéressant pour nos façons de coder et sur le temps (et les lignes) qu'on pourrait gagner et surtout pour maintenir le code. Je pensais actualiser mon premier topic pour parler justement des avantages que nous aurions avec le nesting et mixins (et pour les operators pour certains j'imagine, ça reste une option qui va avec et qui peut toujours intéresser quelqu'un). Je vais l'ajouter au premier topic pour que ce soit plus clair. Evidemment qu'en soi je ne disais pas que SASS/le SCSS était plus simple et efficace que le :root, juste que :root ne permet pas de faire tout ce qu'on peut faire en scss contrairement à sass, root ne permet jamais que de créer des variables (ce qui est déjà très bien, nous sommes d'accord et d'ailleurs trop méconnu :/).

J'ai parlé du SASS car c'est simplement le préprocesseur le plus utilisé mais il existe aussi LESS en effet Smile ! L'idée derrière la requête était surtout d'alléger et simplifier le css avec des outils qu'on utilise régulièrement dans le développement et le laisser à disposition et pour ceux qui ne veulent pas s'en servir, le css reste totalement faisable de toute façon donc en somme cela ne changerait que pour ceux qui se penchent un peu sur le sujet et souhaiteraient pousser plus loin le sujet et optimiser au mieux leur code.

Merci pour ton retour et bonne fin de journée.
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Heaven. Mer 04 Mar 2020, 18:20

Bonjour,

Je ne sais pas pourquoi mais je n'ai pas de bouton ou autre pour voter, cela fait presque comme s'il était clôturé. Ce qui explique que je me permets de poster pour dire que je suis totalement pour
Heaven.

Heaven.
*

Autre / Ne pas divulguer
Messages : 33
Inscrit(e) le : 24/04/2018

http://edenproject.fra.co/
Heaven. a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Neptunia Mer 04 Mar 2020, 18:36

Bpnjour Heaven.


Le vote est réservé aux membres "actifs" (10 messages minimum)
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Ilhyianna Lun 16 Mar 2020, 14:00

Bonjour,

En ce qui me concerne, je suis 100% pour ! J'en parlais justement à des amis il y a quelques temps. Depuis que j'ai découvert le SCSS, je ne peux plus m'en passer. Ne serait-ce que pour l'imbrication du code et des mixins, ce serait un très gros avantage.

Surtout quand on sait que, notamment chez les RPGistes, les fiches type (présentation, annexes, fiches de liens, bottins etc...) sont très répétitives, avec beaucoup de points communs et quelques choses qui changent (ex : mettre un overflow sur une div et pas sur une autre même si elles ont les mêmes autres caractéristiques oblige à créer 2 classes quasi identiques)

Ce serait un gros plus et un énorme gain de temps et de lignes de pouvoir utiliser du CSS avancé
Ilhyianna

Ilhyianna
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 31/03/2013

http://family-business.forumactif.com/
Ilhyianna a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par RomainG Lun 16 Mar 2020, 18:22

Bonsoir,

Si s'est pour une simplification des codes pour l'amélioration de nos forums, j'ai voté pour.

Personnellement, je n'y connais rien, s'est un ami qui me fait tout mon design et s'occupe de la partie code sur mon forum, il est très doué, du coup je n'y mets pas mon nez, je lui fait totalement confiance.

Bonne soirée
Cordialement
Romain
RomainG

RomainG
*****

Masculin
Messages : 600
Inscrit(e) le : 16/01/2018

https://www.facebook.com/groups/syndromeklinefelter
RomainG a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par *Splash* Lun 16 Mar 2020, 19:35

Le CSS connaît des limites, qui deviennent évidentes surtout lorsque l’on travaille avec le langage depuis de nombreuses années. L’avantage du CSS est en même temps l’un de ses inconvénients : c’est un langage très simple. SASS rend l’ensemble un peu plus sophistiqué et simplifie énormément le travail de création du design.
Tous les navigateurs modernes peuvent afficher les CSS sans problème, mais cela ne s’applique pas à SASS (qui est utilisé depuis plus de 10 ans) ou à d’autres langages de feuilles de style avancés. SASS se considère donc comme un préprocesseur. Le code du document SASS est d’abord converti en CSS avant que le système ne livre le code source et donc le design.

Par conséquent pour un forum clé en main comme le propose FA je ne pense pas qu'il soit judicieux de compliquer la tâche aux membres qui ne sont pas familiers au simple CSS.
Je vote NON
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Ilhyianna Lun 16 Mar 2020, 21:54

*Splash* a écrit:Par conséquent pour un forum clé en main comme le propose FA je ne pense pas qu'il soit judicieux de compliquer la tâche aux membres qui ne sont pas familiers au simple CSS.

C'est pour ça qu'il serait intéressant de pouvoir switcher, de choisir le CSS simple ou le CSS avancé (avec compilation quelque part, c'est là qu'en effet ça peut être plus complexe) au même titre qu'on peut choisir le panneau d'amin simple ou avancé, de même pour les modifications des pages HTML Very Happy

Ainsi, les "débutants" (ou juste habitués du CSS simple) n'auraient pas à changer leurs habitudes, mais ceux qui codent de manière un peu plus poussée pourraient éviter de se répéter inutilement (entre autres) ^^
Ilhyianna

Ilhyianna
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 31/03/2013

http://family-business.forumactif.com/
Ilhyianna a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mar 17 Mar 2020, 18:31

Bonsoir,

Un grand merci pour vos retours.

*Splash* je peux tout à fait comprendre votre crainte, toutefois, comme précisé dans mon premier topic ; pour ceux qui n'y connaissent rien ou pas grand chose, cela ne changerait rien, car le SCSS prend en compte le CSS que nous utilisons déjà. Mais pour ceux qui souhaiteraient pousser plus loin leur feuille de style, cela serait un énorme gain de temps et de place car nous éviterions de répéter beaucoup de manoeuvres et pour entretenir notre code, ce serait plus simple et plus fluide aussi.

Cela revient à des soucis déjà relevé sur forumactif, nous sommes extrêmement limités avec le CSS et nos fiches de style ont des nombres de caractère limités qui plus est, cela reviendrait à faire d'une pierre deux coups. Ne pas changer les habitudes de ceux qui apprécient leur confort mais permettre à ceux qui veulent pousser plus loin de le faire, que ce soit pour l'organisation, pour les imbrications, ou pour tous les avantages que peuvent apporter le SCSS (pour ne pas parler en langage trop dev avec les mixins et nestings ^^).

Je conçois toutefois, que le travail le plus dur serait pour les développeurs de la plateforme forumactif (et non pas les créateurs de forum, mais bien les devactifs) afin d'installer ce système à ForumActif après autant de temps, c'est évidemment quelque chose qu'il faut prendre en compte, mais au final, ne serait-ce pas un mal pour un bien si cela facilite notre travail et que cela résout en plus, plusieurs soucis relevés au fil des années ? Smile

Une bonne soirée à vous.
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Neptunia Mar 17 Mar 2020, 19:07

La suggestion est ouverte depuis deux semaines et je n'ai pas encore vu le moindre exemple concret de ce que SASS permettrait alors que CSS seul ne le permet pas.

Quels bénéfices concrets peut on attendre sur le forum hormis la lenteur induite par une couche supplémentaire (le préprocesseur qui convertirait le SASS en un contenu digeste (CSS) pour tout navigateur ?
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mar 17 Mar 2020, 19:56

Bonsoir Neptunia,

Le lien que j'ai donné plus haut, donne clairement les exemples de ce que le scss peut permettre de faire et nous l'avons expliqués aussi à plusieurs reprises. Le SASS nous permet de faire beaucoup plus de choses concrètes que le CSS.

Pour expliquer ce que raconte le site, donc, sait-on jamais qu'on ne lise pas anglais ^^

Variable : en effet, en css, on peut le faire avec une base :root, je parlerai donc ici surtout de la manière SCSS pour expliquer les utilités entières (ou essayer Wink).

Les variables sur le SCSS nous permettraient donc de créer une base de code et de l'écrire une seule fois. Exemple :

$backgroundisred:#ff0000;

Je répéterai donc donc mon background souhaité background:$backgroundisred.

A chaque mise à jour de notre site, au lieu de revenir sur nos 50 (pour grossir le trait mais l'idée y est) background de notre stylesheet, nous changerons juste $backgroundisred:#000; et le background changerait donc automatiquement partout sans avoir à nous retaper les 50 lignes. Evidemment si ce n'est que pour changer un background, ce n'est pas bien grave. Maintenant, imaginez une fiche de style où vous personnalisez chaque chose sur votre forum. Vous n'auriez qu'à modifier vos variables plutôt que revérifier vos milliers de ligne de CSS. La variable ne nous permettrait pas de modifier qu'un simple background mais on peut créer un corps entier qu'on éviterait de répéter un chaque fois. Je pense aux rôlistes notamment avec leur nombreuses fiches, que ce soit des fiches d'inscription, d'écriture, de lien et j'en passe, pour personnaliser le forum et garder la même idée de style partout, ce serait un gain de temps mais aussi de ligne.

Mais soit, on va dire que ça, :root nous permet de le faire.

Donc je vais passer au nesting.

Admettons que vous souhaitiez modifier, une fiche et une boîte de fiche, qu'on nommerait ficheForum.

Au lieu de bêtement taper :
Code:
ficheForum p{code}
ficheForum a{code}
ficheForum:hover{code}

(Et c'est évidemment un exemple ultra simple, mais faut voir plus loin avec Wink) nous n'aurions qu'à taper :
Code:
ficheForum {
p {code}
a {code}
:hover{code}
}

Là encore, c'est un exemple simple, mais je vous laisse imaginer s'il y avait plus de choses à traiter, la répétition. En se rappelant surtout que nous avons un nombre de caractères limités. Et bien avec cette méthode, je nous épargne déjà au moins 20 caractères. Ca paraît rien ? Je vous assure que si on s'épargne 20 caractères par-ci, 50 par là etc, on se fait une place monstrueuse dans notre fiche de style et dans un autre sens, on s'épargne aussi du temps de chargement.

Parce que, oui, disons le. Quand vous importez d'ailleurs votre fiche de style parce que vous faites une fiche html et une fiche css, faut l'appeler, la fiche css.

Le site nous parle ensuite de Partials et Modules. Je doute que nous puissions, malheureusement, l'utiliser sur forumactif, car cela s'applique surtout à des codes pouvant être importés d'un fichier, sauf que ForumActif n'autorise pas la création de multiples fiches css mais d'une seule et unique où nous étouffons tout, donc soit (dommage d'ailleurs qu'on puisse avec le JS et le HTML mais pas le CSS mais c'est un problème qui a déjà été soulevé). En gros, avec cette méthode, nous n'aurions qu'à créer des "fiches" css que nous aurions appelés (ou pas) ou importés (ou pas) dans les autres fiches souhaitées plutôt qu'appeler toute une fiche css à chaque chargement de page alors que c'est pas forcément nécessaire. Bah, oui, je m'en fous d'appeler le design de mon "Qui Est En Ligne" quand je suis dans un sujet, la répartition des scss évitait ça - mais oui, concrètement, sur ForumActif, ça ne nous serait pas forcément utile à l'heure actuelle, avec le système actuel.

Si ce n'était toujours pas clair, j'aurais pu crée deux fiches scss :
- base où je mets mon style comme mes couleurs par exemple
- qeel, j'ai besoin d'utiliser des couleurs de base, j'ai juste à écrire @use 'base' dans mon fichier "qeel" et ça m'appelle mes couleurs et mes variables installées dans base.

Mais oui, ça, c'était + pour l'information, mais j'ai bien conscience que cet aspect pourtant très utile du SASS, ne pourrait pas être concrétisé à l'heure actuelle.

Pour les Mixins désormais... Enorme gain de temps aussi lorsque c'est utilisé correctement, plus ou moins semblable aux variables et, je pense, non utilisable avec le CSS qu'on connaît.

000 - Installation du SCSS/SASS dans notre stylesheet. 26QVV4P

Leur exemple est parfait donc je le réutilise, tant qu'à faire. Laughing

Alors si sur le screen cela paraît plus long en SCSS... Il faut toujours garder à l'esprit qu'une variable et un mixin ont pour but d'être réutilisable et d'éviter sur le long terme les répétitions et on y gagne énormément en place.

Operators, pour ceux qui veulent tenter la responsivité (qui est une norme dans le monde du développement), vous savez qu'on code de + en + en %. Je vois souvent mes amis et collègues se casser la tête à sortir leur calculatrice pour savoir quelle taille devrait faire telle boîte et j'en passe. L'Operator permet de réaliser des calculs directement dans votre fiche de style. Ca permet aussi à ceux qui sont habitués à coder en px et qui tiennent à rester en px à le faire et juste adapter un % dans leur fiche de style, comme l'indique le site ;

000 - Installation du SCSS/SASS dans notre stylesheet. D5DTMyM

Concrètement, ces derniers exemples hors des variables, nous ne pouvons pas les faire avec la fiche CSS et je pointe juste que le :root est très peu connu du publique.

Pour faire simple, le but du SCSS/SASS (mais je dis SASS mais comme dis avec Nyxbanana, on peut parler d'autres préprocesseurs, je ne fais mention de SASS que parce que c'est le prépro le plus connu/utilisé depuis quelque années), c'est de nous faire gagner du temps et de la place, nous faire donc gagner en fluidité. Etant développeuse web, on a plus ou moins un dicton qui dit que nous sommes des feignants et que nous chercherons toujours à coder le moins possible et donc trouver des raccourcis à chaque fois. C'est exactement ce que fait le SCSS ; ça nous fait gagner du temps, de la place et l'entretien est bien plus rapide puisqu'il nous permet de ne changer que quelque petites choses pour réussir à changer tout un forum. Je ne pense pas beaucoup me tromper en disant que les gens iraient bien plus dans leur fiche de style du forum si celles-ci étaient plus simples et moins répétitives. Evidemment la façon dont on s'en sert en entreprise ne pourra pas être 100% applicable puisque nous nous servons aussi de l'avantage des Modules qui nous permet de créer plusieurs fiches ; pour nos variables, pour ci et ça et pour les réutiliser ensuite, exemple ; nous avons les variables, les commandes primordiales de scss puis ensuite nos autres fichiers scss sont pour gérer nos pages html, js, php, qu'importe, nous allons créer une boîte ? on aura le fichier de la boîte et son fichier scss. Ca épure, on s'y retrouve mieux. Mais évidemment dans notre système actuel, tout serait dans la feuille de style et même là, on s'y retrouverait déjà tous beaucoup mieux qu'actuellement.

Pour faire simple :
- Utiliser des variables.
- Imbriquer nos codes.
- Nous éviter de répéter des codes et donc prendre de la place, rendre plus difficile l'entretien de notre code et nous sucrer un nombre incroyable de caractères.
- Qui dit moins de caractère, dit feuille de style allégée, dis temps de chargement moins long puisqu'il y a moins de choses à traiter
- On pourrait gagner encore plus en fluidité en ayant des fiches de style comme nous avons des feuilles html et JavaScript puisqu'au lieu d'appeler toute notre feuille de style même pour des lieux où on en a pas besoin, seuls les fichiers concernés seraient appelés. Mais comme dis, ça, ce n'est pas le plus important, c'est plus "dans l'idéal de l'utilisation du scss" sans pour autant être quelque chose d'impératif pour l'utilisation du SCSS, j'ai surtout eu cette idée d'application grâce aux suggestions déjà postées. Et il va de soi que je prends en compte l'appel entre le css et les templates qui ne serait pas applicable de la même façon, d'où mon "dans l'idéal" et non "il faudrait aussi axer sur cette possibilité".

En espérant que ce soit clarifié Smile sinon il me semble que le site Sass est trouvable aussi en français, au cas où ! Je n'ai pas vérifié si les explications françaises étaient aussi claires qu'en anglais.
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Neptunia Mar 17 Mar 2020, 20:38

Oui c'est très clair maintenant.

Je maintiens mon vote contre parce que :

Pour les variables, on a la même chose en utilisant judicieusement les class
Pour le nesting idem, le CSS fait la même chose en moins de lignes et moins de caractères.
Même chose pour le Mixins où on voir clairement que la colonne gauche (SASS) contient bien plus de caractères que la droite (CSS)
Suffit de soigneusement planifier ses identifiants id et surtout class pour gagner du temps ensuite en CSS, c'est d'ailleurs le b.a.ba de l'informatique : perdre un peu de temps au début pour en gagner beaucoup ensuite.

Hormis les opérateurs qui permettent de ne pas lancer la calculette, mais là encore le code SASS/SCSS est plus lourd que sa version CSS.

Tous les exemples fournis montrent que la limite de nos feuilles CSS serait atteinte encore plus vite avec un préprocesseur SASS que sans.
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mar 17 Mar 2020, 20:48

Le mixin prend plus de place car dans l’exemple ce n’est cité qu’une fois, là où dans l’utilisation réelle cela nous évite en fait de répéter ces même lignes comme le fait le CSS. Donc ça prend de la place si c’est utilisé une seule fois, hors le but de la manœuvre c’est de l’utiliser plusieurs fois. Comme l’imbrication, les variables et compagnie finalement. Cela nous évite les répétitions et donc non, bien au contraire, cela n’alourdit pas. Ce n’est pas une démarche que l’on irait effectuer pour une simple ligne, là nous garderions le système de css (dans le scss) pour le coder. Mais quand on en vient aux répétitions, ce que l’on voit à droite sera répété alors que la gauche, nous l’écrivons une fois puis ensuite nous l’appelons en une ligne pour appeler ce bout de code. Le css permet les variables mais pas le mixin, ni l’opérateur et finalement pas le nesting qui nous fait gagner aussi plusieurs caractères.

C’est toujours dans une idée de gagner de la place. Si cela prenait plus de caractères, ce serait contradictoire avec le but même du SCSS qui est de simplifier et épurer le css. Smile
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Chiva_01 Mer 18 Mar 2020, 09:13

Bonjour,

Je trouve qu'on commence à demander de plus en plus des possibilité. N'oublions pas que FA offre des fora clés en main qui à la base doivent pas être bidouillé. Si vous voulez toutes les possibilités et libertés, faites un forum vous même.

Ceci n'engage que moi, c'est une opinion perso bien sure.

Chiva
Chiva_01

Chiva_01
****

Messages : 484
Inscrit(e) le : 23/01/2012

https://lacavernededetente.forumactif.com
Chiva_01 a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par RomainG Mer 18 Mar 2020, 10:22

Bonjour,

Je change d'avis, vu les explications des uns et des autres, moi je n'y connais rien, mais si des gens comme Neptunia qui code pas mal de truc, qui est douée dit que ce n'est pas super et comme je suis de l'avis de Chivas, mon vote sera contre.

Nos forums sont bien, on peut faire plein de bonnes choses avec ce que l'on a à notre disposition.

Désolé pour l'auteur de la suggestion.

Passez une belle journée ensoleillée
Cordialement
Romain
RomainG

RomainG
*****

Masculin
Messages : 600
Inscrit(e) le : 16/01/2018

https://www.facebook.com/groups/syndromeklinefelter
RomainG a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par *Splash* Mer 18 Mar 2020, 11:07

Chiva_01 a écrit:Bonjour,

Je trouve qu'on commence à demander de plus en plus des possibilité. N'oublions pas que FA offre des fora clés en main qui à la base doivent pas être bidouillé. Si vous voulez toutes les possibilités et libertés, faites un forum vous même.

Ceci n'engage que moi, c'est une opinion perso bien sure.

Chiva
C'est exactement ce que je pense, merci
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mer 18 Mar 2020, 12:18

Bonjour,

Pour commencer, je trouve vraiment curieux cette réflexion qu'on peut me faire sur une suggestion (ici comme en mp Wink) de "si ça ne te va pas, va voir ailleurs". Nous sommes dans un espace de suggestions donc je ne vois pas en quoi ma requête n'est pas légitime et me vaudrait de forcément aller voir ailleurs alors qu'aucun membre du staff de Forumactif n'est intervenu et que je ne fais qu'une simple suggestion dans un but d'amélioration et de régler plusieurs suggestions déjà soulevées. (Et je suis sur ForumActif depuis 12 ans donc je ne vois pas pourquoi je m'en irai soudainement).

Quant au fait qu'il y a déjà beaucoup à traiter... Dans ce cas, on arrête les suggestions sur forumactif ? C'est un raisonnement un peu curieux là aussi. S'il y a déjà trop de suggestions à traiter, on bloque la section le temps de fluidifier ? ^^ personnellement, je n'attends pas à ce que, si c'est validé aujourd'hui, ce soit réalisé demain. Mais dire non à une requête juste parce que "il y a déjà beaucoup à traiter" me fait surtout me dire que si c'est pour faire ça, autant fermer la section le temps que les suggestions validées et en cours, soient gérées ^^... Forumactif a malheureusement de plus en plus la réputation de ne pas avancer avec son temps, de ne pas évoluer comme les autres plateformes, d'être vieillot, donc lancer une suggestion dans un but d'évolution avec l'ère actuelle, ne me paraissait pas si abusif, mais c'est jamais que mon avis. Pour le fait de pouvoir modifier son forum et le personnaliser, c'est effectivement une très bonne chose, c'est certain. Donc pourquoi ne pas évoluer si nous pouvons déjà le faire ? Tout peut toujours être amélioré Smile ! C'est ce qui est beau aussi avec le développement (et internet plus généralement), cela évolue chaque jour et nous évoluons avec.

Ensuite, sans vouloir remettre la parole de quiconque en doute... Le développement est mon métier donc j'estime savoir un minimum de quoi je parle, je ne me contente pas de bidouiller sur forumactif pour rendre mon forum joli : c'est mon métier. Lorsqu'on me dit que le SCSS est plus long que le CSS et donc ma suggestion n'est pas utile, cela me fait un peu rire tout de même, puisque le SCSS est justement créer dans un but d'alléger et simplifier nos feuilles de style ^^ (et de nous permettre de pousser plus loin le css). Peut-être aurais-je du préciser davantage le fait que pour des commandes "normales", votre fiche css resterait la même qu'actuellement mais que vous pourriez simplement effectuer les possibilités nommées (nestings, mixins, etc) pour réduire votre feuille de style lorsque vous avez des répétitions à effectuer ? Que ces commandes ne sont pas toutes à effectuer si vous n'en n'avez l'utilité qu'une seule fois mais que pour les commandes répétitives cela vous aiderait ? (D'où ma mention sur les fiches sur les forums où nous répétons énormément de choses à chaque fois et que cela nous prend de la place pour pas grand chose, ou simplement les éléments multiples sur un forum, les choses différentes à traiter comme j'ai expliqué avec le nesting, qui nous réduit considérablement notre fiche de style et notre nombre de caractères utilisés). Et attention, ne pas me faire dire ce que je n'ai pas dis ; oui, nous garderions le même système que le css (donc permettre à ceux qui ne veulent pas évoluer de rester dans leur confort) mais permettre quand même à ceux qui veulent mieux s'organiser et surtout pousser leur possibilités et codes plus loin, de le faire. Les raisons que j'ai pu citer me paraissaient déjà colossales et non un petit rien, surtout lorsqu'il s'agit d'alléger nos feuilles de style et nos fiches html où nous ajoutons souvent ces feuilles de style.
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par *Splash* Mer 18 Mar 2020, 13:23

Hi,
Et tu crois vraiment que la personne lambda soit sensible à ton discours ?
Si tu es programmeur autant te donner les moyens pour utiliser SASS avec des supports qui le propose.
*Splash*

*Splash*
Membre actif

Masculin
Messages : 3806
Inscrit(e) le : 25/02/2018

https://caforum.fr
*Splash* a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par IvyDTyler Mer 18 Mar 2020, 13:38

Puisqu'il s'agirait justement de leur simplifier la tâche alors qu'ils ont peur d'aller dans le panneau admin lorsque ça touche aux templates, JS et feuilles de style ; totalement. J'ai déjà fais le comparatif de montrer du SCSS à des personnes qui ne connaissaient que le CSS et qui étaient déçues de ne pas avoir connu plus tôt les pratiques du SCSS vu que c'est un gros gain de temps et d'énergie.

Aujourd'hui, ceux qui n'aiment pas le code y vont à reculons parce que ça leur paraît long, compliqué. Il y a des tutoriels de CSS et des méthodes assez longues qui prennent deux fois moins de temps avec du SCSS (comme cité plus haut). Pire, ils se perdent parce qu'ils n'ont pas d'organisation et ne pensent pas en terme d'organisation, donc ils replongent rarement dans leur feuille de style à cause de ça, parfois on y retrouve des trucs qu'ils n'utilisent pas depuis des années ou qu'ils n'ont jamais utilisés, associé à de l'html dépassé (tableau au lieu de grid pour ne citer que ça). Là encore le SCSS éviterait ça puisqu'on regroupe des éléments de notre css. La longueur des feuilles de style fait peur à de nombreuses personnes et je les comprends, j'étais dans ce cas aussi il y a 12 ans quand j'ai commencé à mettre le nez là-dedans.

Personnellement, c'est parce que bidouiller les codes sur Forumactif me plaisait que j'ai décidé de me pencher sur le code et finalement que j'en ai fais mon métier. Pourtant, aujourd'hui, retourner dans les templates et les feuilles de style, d'html et surtout le JS qui n'est plus aux normes, me paraît vraiment trop compliqué par rapport à ce qu'il se fait aujourd'hui. Je sais que je ne pourrais jamais faire ce que je fais dans mon travail, sur forumactif, simplement parce que certaines démarches paraissent compliquées. J'ai justement, grâce à mon métier, réussi à avoir un certain recul sur forumactif (qui m'a pourtant aidé à apprendre les bases de css et html !) pour voir à quel point, bien souvent, on se complique la vie alors qu'en quelque commandes ça pourrait être fait, simplifié. L'ironie c'est que je suis une développeuse JavaScript et que je n'ose pas écrire de script sur FA car les méthodes de JS que j'ai appris et que j'utilise au quotidien ne sont pas encore d'actualité sur forumactif. Et je ne fais que me dire "si c'était comme ça sur forumactif et que j'avais su ça dès le départ, j'aurais mis beaucoup moins de temps à m'y pencher", car au début, j'y allais aussi à reculons et j'ai eu du mal à vraiment me lancer, au départ, c'était plus par nécessité car nos forums devaient être nécessairement beaux pour être visités (dans le monde des rpg tout du moins) que j'y allais, avant d'apprendre à vraiment aimer.

Donc, pour répondre à certains commentaires ; non, je n'ai pas forcément envie de changer de plateforme, car j'attache une valeur très sentimentale et nostalgique à forumactif et ce que la plateforme m'a permise de faire, d'où aussi mon envie de la voir évoluer dans les normes actuelle. J'attache une valeur sentimentale à FA qui m'a aidé à trouver cette passion pour le développement - entre autres choses bien évidemment - mais qui m'a permise de commencer à apprendre et développer puis finalement, aller jusqu'à en faire mon métier actuellement. Et donc, étant très attachée à la plateforme, il me paraît normale d'aimer la voir évoluer avec le temps ? ^^ bien évidemment, même si ce ne serait pas pour demain ou après demain mais dans quelque mois, années, cela reste une évolution qui ferait plaisir à voir, comme de nombreuses évolutions Smile !
IvyDTyler

IvyDTyler
***

Autre / Ne pas divulguer
Messages : 109
Inscrit(e) le : 07/09/2014

https://sandcastle.forumactif.com/
IvyDTyler a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par no_way Jeu 19 Mar 2020, 13:53

Bonjour c'est très pratique pour traiter les couleurs aussi.


Dernière édition par no_way le Sam 21 Mar 2020, 16:55, édité 1 fois
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par NyxBanana Jeu 19 Mar 2020, 14:14

Tu parles beaucoup de la taille économiser sur la feuille de style, Ivy... Mais je pense que tu perds de vue un élément important... Qui est la raison pour laquelle nous sommes limités dans un premier temps. reflexion

Je ne travaille pas chez FA mais en y réfléchissant deux minutes, il parait assez évident que c'est pour limiter l'espace de stockage consommé par le CSS sur les serveurs de FA. Or, in fine, le css qui sortira de ton SCSS dépassera cette milite qui, je me doute, est pensée de manière à être optimale pour eux et pour nous.

Surtout qu'il est mentionné plus haut qu'une utilisation "bête et méchante" de SCSS peu, au final, amener à plus de mal que de bien en matière de longueur et de caractères. (le meilleur exemple est sans doute l'utilisation abusive de nesting au lieu de l'utilisation d'une class qu'on voit souvent chez les utilisateurs de ce genre de langages, sans même parler de ceux qui importeraient les mixins pour finalement n'en utiliser qu'à un ou deux endroit sur leur forum, ne rentabilisant pas du tout l'outil)

Je suis d'accord avec toi sur le fait que, théoriquement, c'est une belle idée et tout... Mais pratiquement, c'est autre chose et il faut composer avec le fait que beaucoup de personnes ne s'intéressent pas à tout ça dans la communauté de FA.

Je pense que si tu veux utiliser ce genre de langages il vaudrait mieux que tu le fasse sur ton ordinateur et que tu compile en local sur l'un des compilers gratuits trouvable en ligne, sur GULP ou autre programme dédié pour ensuite ramener ton CSS sur ta stylesheet. Du moins, c'est la solution de facilité qui me vient depuis ma lecture du premier message dans ce sujet.

Surtout qu'avec les outils dont on dispose aujourd'hui, rien n'est plus facile que de posséder un dossier dropbox partagé ou un drive partagé où toutes les personnes ayant à toucher à la feuille de style puissent aller chercher directement ton SCSS, SASS, LESS, autres.
NyxBanana

NyxBanana
**

Messages : 54
Inscrit(e) le : 22/10/2015

http://marbhadh.forumactif.com
NyxBanana a été remercié(e) par l'auteur de ce sujet.
  • 0

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par Kallindra Lun 23 Mar 2020, 14:01

Bonjour,

Moi qui ne code quasi pas, je n'ai rien compris à cette demande.
Donc je me fis à l'avis de @Neptunia ^^
Kallindra

Kallindra
Membre habitué

Féminin
Messages : 1548
Inscrit(e) le : 04/03/2013

https://libr-fantasymania.lebonforum.com/
Kallindra a été remercié(e) par l'auteur de ce sujet.

000 - Installation du SCSS/SASS dans notre stylesheet. Empty Re: Installation du SCSS/SASS dans notre stylesheet.

Message par RomainG Lun 23 Mar 2020, 16:47

Kallindra a écrit:Bonjour,

Moi qui ne code quasi pas, je n'ai rien compris à cette demande.
Donc je me fis à l'avis de @Neptunia ^^

Bonjour,

Rassure toi, je ne code jamais, moi non plus je n'y comprends rien donc je fais confiance à Neptunia et Chiva Mr. Green

Belle fin de journée
Cordialement
Romain
RomainG

RomainG
*****

Masculin
Messages : 600
Inscrit(e) le : 16/01/2018

https://www.facebook.com/groups/syndromeklinefelter
RomainG a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum