Rechercher dans la communauté

Qu’est-ce qu’un préprocesseur ? En informatique, un préprocesseur est un programme qui procède à des transformations sur un code source, avant l'étape de traduction proprement dite (compilation ou interprétation). Les préprocesseurs sont des exemples typiques de langages spécialisés. Selon le niveau de leur analyse du texte source, on distingue des préprocesseurs lexicaux et des préprocesseurs syntaxiques. Lequel utilisé pour le CSS ? Dans ce topic je vais vous présenter SASS qui est celui que j’utilise le plus. Néanmoins il en existe d’autre tel que LESS ou encore Stylus. Pour SASS, voici une petite description: SASS (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style ou encore un métalangage de feuilles de style en cascade (CSS). Pour celui-ci ils existent 2 syntaxes, une syntaxe nommée « syntaxe indentée » et une autre nommé « SCSS » qui est proche de CSS. Il peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs). Pour les deux autres que je ne connais pas, je vous laisse vous documentez. Installation Pour installer SASS vous allez avoir besoin de Ruby que l’on trouve pour windows à ce lien autrement pour Linux ou encore OS X vous pouvez utiliser le système de gestion des paquets que vous préférez. Une fois installé assurez-vous d’avoir l’exécutable au sein de votre variable d’environnement PATH puis exécuté au sein de l’invité de commande : gem update –system gem install compass Et voilà on va pouvoir commencer un nouveau projet, en guise de démonstration on va réaliser une grille CSS sans notion responsive. Démonstration SASS Pour commencer nous allons créer un dossier dans lequel nous allons ouvrir un invité de commande et exécuter ceci : compass init compass watch Puis nous allons supprimer les fichiers ie.scss ainsi que print.scss, de même nous allons créer le fichier _grid.scss. Au sein du fichier screen.scss nous allons supprimer tout son contenu pour le remplacer par : @import "compass"; * {@include box-sizing(border-box);} body {margin: ; padding: ; font-family: sans-serif;} @import "grid"; Explication pour ce bout de code : - @import signifie que nous allons utiliser un fichier annexe à celui que nous éditons, pour le fichier ‘compass’ rien n’est à créer puisque c’est un fichier de la librairie tandis que pour le fichier ‘grid’ vous aurez remarqué qu’il fait référence au fichier que nous avons créé peu de temps avant. - @include fais référence à une ‘fonction’ propre à compass (cela nous évite de préfixé les règles CSS) Le plus gros du travail se situe au sein de _grid.scss , commençons par initialiser quelque variable pour cela rien de compliqué : $columns : 12!default ; $gutter : 20px!default ; L’attribut !default appliqué sur les variables nous permet de pouvoir modifier la valeur de celle-ci avant l’import du fichier autrement cette variable prendra la valeur 12 par défaut. Par la suite nous allons créer une classe qui sera une classe réservé pour un héritage. %grid { float: left; position: relative; min-height: 1px; padding: $gutter * 0.5; } Et pour finir voici ce que nous allons aimer, voir même chérir (it’s a trap!): notre itération. @for $i from 1 through $container { .grid-#{$i} { @extend %grid; width: $i / $container * 100%; } } Bon on commence avec du lourd, le nom de la variable qui va de 1 à 12 dans notre exemple. Rien de bien compliqué, si vous connaissez un peu tout type de langage on s’y retrouve puis viens #{$i}, celui-ci nous permet de faire un echo (php), un println (java), etc… Ensuite viens l’extension à la classe que nous avons créer précédemment puis un calcul tout bête que même ma petite cousine de primaire saurais faire :x Je vais m’attarder un peu au niveau de l’héritage, avec celle-ci, ce qui va se passer c’est que tout les classes relative à notre grille tel que .grid-1, .grid-2 vont avoir la même position, le même padding, la même hauteur minimum de ce fait ce qu’il va se passer c’est que SASS va regrouper tout les noms de classes au sein de la même règle, pour être plus clair voici ce qui va se passer: .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { float: left; position: relative; min-height: 1px; padding: 1px; } Si certains éléments méritent un peu plus de précision, je vous laisse m'en informer et je ferais ce qui doit être fait PS: Merci @Gameuse Skitty pour avoir fait un relecture

Je ne peux vous faire qu’une liste exhaustive d’éditeur de texte que j’utilise personnellement pour développer en HTML/CSS/JS néanmoins ceux-ci peuvent être utilisé pour beaucoup de langage. Pour l’ensemble de cette liste je vais prendre le temps de détailler en gros les fonctionnalités. Beaucoup d’entre eux dispose à peu près des mêmes. - Atom (Github) D’après un article de developpez.com, je cite : Après ce long texte qui vous a surement ennuyé, je ne peux que vous donnez un lien vers le site de l'éditeur ici et vous conseillez quelques extensions plutôt utile : - Emmet de emmetio - Minimap de atom-minimap - Symbols-tree-view de xndcn - Brackets (Adobe) Brackets est un éditeur open-source pour le web design et le développement sur des technologies Web telles que HTML, CSS et JavaScript. Le projet a été créé et est maintenu par Adobe. Il a été d'abord le projet qui servait de base à Adobe Edge Code, mais les projets ont fusionné, ce qui a permis à Brackets d'intégrer de nouvelles fonctionnalités liées au Creative Cloud. L'éditeur supporte l'ajout d'extensions qui peuvent ajouter des fonctionnalités à celui-ci. Celles-ci peuvent être développées dans Brackets lui-même avec HTML, CSS et JavaScript, étant donné qu'il est écrit avec ces trois langages. Il est également possible de développer des thèmes. De même il possède une extension nommé Extract permettant de copier du CSS immédiatement depuis un fichier PSD ou AI, à condition d’avoir une licence pour ces logiciels graphique. Cet éditeur de texte disposent des mêmes extensions que celui dont j’ai parlé précédemment et pour finir voici un lien vers le site de l'éditeur ici. - Sublime Text (Jon Skinner) Plutôt que reprendre ce qui a déjà été dit je préfère vous laissez relire la description d’Atom qui inclue quelque mot au sujet de cet éditeur. Concernant cet éditeur, le point négatif est qu’il est payant, environ 70$, néanmoins il comporte comme les autres un gestionnaire d’extension pour permettre une installation de ceux-ci plus aisée. Si vous êtes intéressé par celui-ci, voici le lien du site internet de l’éditeur. D’un point de vue personnel je vous recommanderai l’éditeur Atom qui est extrêmement personnalisable, néanmoins les deux autres restent tout de même plutôt performant et ergonomique. D'une autre part je vais vous donner quelques autres éditeurs qui commencent à se faire vieux tel que Notepad++ ou encore Emacs. Naturellement certain préféreraient un IDE pour travailler sur un logiciel complet, dans ce cas je peux vous conseiller WebStorm, PHPStorm ou NetBeans.