JeuWeb - Crée ton jeu par navigateur
SCSS - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : SCSS (/showthread.php?tid=6999)

Pages : 1 2


SCSS - Racktor - 21-08-2013

(21-08-2013, 02:27 PM)Harparine a écrit :
(21-08-2013, 02:20 PM)Racktor a écrit : C 'est quoi SCSS ?


C'est un préprocesseur CSS. Une surcouche qui permet d'organiser ses CSS en utilisant des variables, des boucles, des structures conditionnelles, des fonctions, etc. Ce "micro-langage" est compilé pour donner un fichier CSS tout ce qu'il y a de plus classique. Je l'utilise depuis quelques mois et j'avoue que c'est assez ultime : je ne pourrais plus m'en passer Wink
Connais tu un tuto (fr au mieux) sur ca ?


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Sephi-Chan - 21-08-2013

Tu pourrais prendre la peine de chercher SCSS sur Google quand même… -_-


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Racktor - 21-08-2013

Non mais chercher c'est pas un problème mais si quelqu'un connais un tuto pour un débutant en fr, perso je prends ...
PS : c'est normal qu'on me parle de framework compass ?


RE: Développer un jeu avec Javascript et Canvas : The no tears way - Xenos - 21-08-2013

(21-08-2013, 03:40 PM)Sephi-Chan a écrit : Tu pourrais prendre la peine de chercher SCSS sur Google quand même… -_-

SCSS:
google a écrit :Select Comfort Corp.
NASDAQ: SCSS - 21 août 10:07 ET
22.25+0.30‎ (1.37%‎)

Ca ne va pas l'aider de chercher de but en blanc :p (ok, là je troll un peu)

Redevenons plus sérieux.
Citation :des boucles, des structures conditionnelles,
Là, en revanche, je suis très sceptique... Déjà, je ne l'ai pas vu sur le site de SASS, mais surtout, je ne vois pas comment le CSS de sortie pourrait émuler les if et les boucles.

Ca sent l'topic qui dérive \o/


RE: SCSS - Sephi-Chan - 21-08-2013

Je sépare le sujet pour éviter tout problème de dérive.


(21-08-2013, 04:12 PM)Xenos a écrit :
Citation :des boucles, des structures conditionnelles,
Là, en revanche, je suis très sceptique... Déjà, je ne l'ai pas vu sur le site de SASS, mais surtout, je ne vois pas comment le CSS de sortie pourrait émuler les if et les boucles.

Les conditions sont résolues à la compilation.


RE: SCSS - Racktor - 21-08-2013

Comme entré en matière ce tuto est bon ?


RE: SCSS - Sephi-Chan - 21-08-2013

Ça a l'air. Le plus délicat n'est pas d'apprendre à utiliser SCSS, c'est de l'intégrer à ton worflow.

Déjà, utiliser SCSS et/ou Compass d'installer Ruby sur ta machine. Si tu es sous Linux c'est trivial, sous Mac OS X c'est déjà fait, et sous Windows c'est un poil plus compliqué (selon ta débrouillardise et/ou ta capacité à chercher de l'aide).

Ensuite, il faut permettre de compiler simplement les fichiers SCSS en un fichier CSS (pour pouvoir tester le rendu dans un navigateur). On peut le faire via la commande sass (c'est le plus simple) ou en installant un plugin dans ton éditeur de texte (selon ce que c'est).


Visiblement, des outils comme Scout peuvent t'aider. Tu devrais peut-être commencer par ça.


RE: SCSS - Racktor - 21-08-2013

Faut déja que je regarde tout ca, les tuto sur le site de Xenos (en anglais ca va être coton mais bon ...).


RE: SCSS - Xenos - 21-08-2013

Ok, c'est des conditions résolues "à la compilation", pas en temps réel (dommage...)

Finalement, je reste sur mon système perso :p N'ayant besoin que d'alias de nom et de variables, je préfère avoir un fichier PHP à qui j'envoie l'URL du "CSS étoffé", ce PHP me renvoie alors le contenu comme réponse HTTP et sauve également le CSS (minimifié) dans un fichier *.css. Ouais, "je réinvente la roue", mais je me prends moins la tête à faire 1 script qu'à me farcir toute l'installation et la doc pour Windows...
Bon, ok, j'ai dévié, mais je me ferai pardonner un jour, plus tard, quand je passerai ce script en Open Source Wink.


RE: SCSS - Sephi-Chan - 21-08-2013

Avec Scout tu n'as rien d'autres à installer. Wink

La fonctionnalité la plus utilisée (car on s'en sert sans s'en rendre compte) est l'encapsulation. Les variables sont également très utiles, ainsi que les mixins. Le reste est cool mais plus situationnel.

Compass s'appuie d'ailleurs sur ces mixins pour te permettre de t'abstraire des préfixes spécifiques à chaque navigateur.

Compass permet également de générer des sprites CSS automatiquement : à partir d'un dossier contenant les images sources, il crée l'image unique et une classe CSS pour chaque image. On peut également automatiquement remplacer l'URL d'une image de background par son équivalent Base64 (très pratique pour les images qu'on ne peut pas intégrer dans un sprite comme les dégradés qui se répètent).


Quelle idée de développer sous Windows. ^^