C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» [RPG] Fiche de présentation
Mar 21 Mar 2017, 13:28 par neko-systeme

» Système d'onglets simple et personnalisable
Sam 18 Mar 2017, 21:43 par Invité

» [RPG] Fiche personnage avec bannière
Sam 18 Mar 2017, 13:26 par Invité

» [RPG] Fiche personnage avec bannière latérale
Sam 18 Mar 2017, 13:23 par Invité

» Menu horizontal
Sam 18 Mar 2017, 11:47 par Ami-mimi

» Message d'accueil alias PA
Mar 14 Mar 2017, 16:14 par Invité

» Infobulle avec effets CSS3
Mar 14 Mar 2017, 10:15 par Oxidize

» Trois colonnes avec effet Zoom
Ven 10 Mar 2017, 17:07 par Invité


Poster un nouveau sujet   Partagez | 
 

Compiler un fichier LESS en CSS avec Crunch!

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



Compiler un fichier LESS avec Crunch!


Informations générales

Description :
Petit tutoriel rapide sur l'utilisation du logiciel Crunch! pour compiler du LESS en CSS. Il ne s'agit pas d'un cours sur le LESS mais simplement d'un rapide guide pour accompagner mes codes directement exploitables Wink

Démo :
Aucune démonstration disponible

Testé sur :
Windows 7

Crédits :
Proposé par 'Christa le 01/12/2012 | Validé par Espeon

Mise(s) à jour :
Pas de mise à jour pour l'instant

Le tutoriel


Introduction


Salut la compagnie !

Petite introduction égocentrique pour vous expliquer pourquoi un article sur Crunch!

Je vais à partir de maintenant tâcher de vous proposer quelques codes directement exploitables (ou "Libre Service") et, pour vous en faciliter la personnalisation, vous proposer les versions LESS des fichiers CSS. Qu'est-ce que donc que le LESS, me demanderez vous ? Il s'agit d'une version un peu particulière du CSS qui autorise l'utilisation de variables, fonctions et autres joies de la programmation. Vous pouvez en apprendre plus sur le site officiel si ça vous intéresse.

Cela étant dit, inutile de vous triturer les méninges dessus, vous n'aurez pas besoin d'apprendre à coder en LESS pour vous servir de ces fichiers. En effet, voici donc un logiciel qui vous permettra d'en extraire la substantifique moelle, j'ai nommé CRUNCH!


En plus il a une interface très sexy.

Les prérequis


Vous le trouverez le logiciel à cette adresse : http://crunchapp.net/
Vous aurez également besoin de Adobe Air : http://get.adobe.com/fr/air/
Tout ceci est gratuit, n'ayez pas peur !

Installez en premier lieu Adobe Air, puis Crunch!. N'ayez pas peur de l'anglais, il ne vous mordra pas, promis Wink

Mode d'emploi


Maintenant que vous avez Crunch!, lancez l'application, puis dans l'ordre :

Désactivez la compression


Cliquez sur le petit engrenage dans la barre verticale à gauche et vérifiez que la case "Minify crunched CSS" n'est pas cochée. Sinon, votre code CSS sera tout compressé, ce qui est plus léger, mais illisible !

Créez et modifier votre fichier LESS


Revenez sur le symbole de la page et cliquez sur "New LESS File" et collez-y le code LESS qu'on vous aura fourni.

Vous pouvez éditer le code comme vous l'entendez, le LESS resemble beaucoup au CSS ! Mais faites attention car il y a quelques subtilités dans son fonctionnement Wink

En premier lieu, il est probable que votre fichier LESS (du moins ceux que je proposerai, les autres codeurs font ce qu'ils veulent ) commencera par plein de petits @nomDeVariable:valeur;, il s'agit de variables LESS qui seront utilisées pour la génération du code final. Ainsi, vous pouvez éditer facilement toutes les valeurs nécessaires sans avoir besoin de coder en CSS.

Viendront ensuite les mixins, il s'agit de petites fonctions utiles pour générer le fichier LESS, surtout n'y touchez pas, ou bien le ciel vous tombera sur la tête.

Enfin, le reste constituera votre feuille de style et ressemblera beaucoup à du CSS classique. En fait, vous pourrez ajouter vos propres classes et propriétés CSS si vous en avez envie Wink

Générez votre fichier CSS


Une fois que vous avez fini vos modifications, enregistrez votre fichier (c'est plus sécuritaire Wink ) en cliquant sur la petite disquette de la barre de menu (je me dis que les jeunes qui n'ont jamais connu les disquettes doivent se demander qu'est-ce que c'est que ce symbole bizare XD) et cliquez sur "Crunch File" en haut à droite de l'éditeur :

Le logiciel vous génèrera alors votre CSS final tout beau tout propre, qu'il ne vous restera plus qu'à copier-coller sur votre forum !

That's All, Folks !

Vous pouvez également jeter un oeil à l'application WinLess, mais elle me semble un peu trop "compliquée" pour un usage amateur. Par contre, ils ont un compilateur online, pour les gens pressés : http://winless.org/online-less-compiler




Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)


Dernière édition par 'Christa le Ven 14 Déc 2012, 16:01, édité 4 fois
MessageSujet: Compiler un fichier LESS en CSS avec Crunch!   Sam 01 Déc 2012, 09:58
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://enaevolare.fr
avatar
Lostmindy
Lostmindy

Féminin Messages : 2851



13-12-2012 - Tutoriel validé par Espeon



Ne me vouvoyez pas, merci (même si vous avez 15 ans de moins que moi, j'veux pas le savoir)
MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   Jeu 13 Déc 2012, 12:48
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 13



Merci beaucoup pour ce tutoriel très utile Smile
MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   Jeu 03 Jan 2013, 11:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://edendesmers.azureforum.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 39



Un très grand merci, ça m'a l'air très intéressant !!
MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   Mer 31 Juil 2013, 10:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://louha.net
{ Membre }
{ Membre }

Féminin Messages : 15



merci
MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   Ven 12 Déc 2014, 16:19
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Masculin Messages : 23



Merci
MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   Mar 10 Mai 2016, 18:50
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Masculin Messages : 23



Merci
MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   Mar 10 Mai 2016, 18:50
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Compiler un fichier LESS en CSS avec Crunch!   
Revenir en haut Aller en bas
 

Compiler un fichier LESS en CSS avec Crunch!

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» probleme avec outlook express ou internet exploreur ?
» Ouvrir des fichiers externes avec GameMaker ?
» [Résolu] Décompressage foireux
» Google earth et 62st
» tableau de calcul ?

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Pour aller plus loin...-
Poster un nouveau sujet   

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit