Share
Sass est un excellent moyen d'accélérer le développement front-end en général, je l'utilise dans chacun de mes projets. Sass (comme avec tous les autres préprocesseurs) permet d'imbriquer des styles, des fonctions et du code pré-écrit dans ce qu'on appelle des mixins. Foundation a quelques versions différentes. Nous avons actuellement couvert les variantes HTML / CSS les plus courantes, mais parlons maintenant d'une version basée sur Sass.
L’équipe derrière Foundation a non seulement utilisé Sass pour permettre un style plus convivial et dynamique, mais elle offre également une plus grande personnalisation dans la version Sass que dans la version HTML / CSS..
Sass est idéal pour ceux d'entre vous qui, comme moi, sont les concepteurs d'abord et les codeurs ensuite. HTML et CSS sont assez faciles à apprendre et à faire le travail, mais c’est un grand pas en avant de passer de ces langages simplistes à jQuery et JavaScript. L'utilisation de Sass vous permet de flirter avec l'idée de fonctions, de variables et de code réutilisable, ce qui facilite grandement la transition vers des langages plus complexes..
Nous allons plonger ici, et nous devrons utiliser le terminal / invite de commande pour le faire, mais ne vous découragez pas, car c'est plus facile qu'il n'y paraît. Pour commencer, ouvrez Terminal (OS X) et collez le texte suivant:
sudo gem installer zurb-foundation
Le traitement peut prendre un certain temps, mais il devrait en résulter un écran comme celui-ci:
Une fois cette étape terminée, vous aurez essentiellement ajouté le noyau Foundation à votre système, ce qui vous permettra de le réutiliser à votre guise sans devoir vous rendre sur le site Foundation. Ce qui est bien avec cette approche, c'est qu'avec une autre commande simple, vous pouvez mettre à jour ce cadre réutilisable principal vers la dernière version publique ou candidate à la publication. Pour ce faire, il suffit de coller l’un des éléments suivants dans le terminal:
mise à jour sudo gem zurb-foundation
sudo gem installer zurb-foundation --pre
La dernière étape de la configuration consiste à installer Compass, ce qui nous permettra de créer des versions de Foundation à utiliser dans nos projets. Encore une fois, cela peut prendre un certain temps alors soyez patient. Coller dans ce qui suit:
sudo gem installer compas
Après l'installation, vous devriez avoir une sortie Terminal qui ressemble à ceci:
Maintenant que nous avons parcouru les méandres de l’installation d’un joyau de rubis et de son maintien à jour, configurons un projet pour pouvoir commencer à analyser cette voie de développement avec Foundation.
Chaque fois que vous voulez démarrer un nouveau projet, ouvrez simplement le terminal et tapez "cd" (changement de répertoire), sans les marques de parole, vous devrez soit taper un chemin, soit créer un dossier pour votre projet et le faire glisser au terminal. Assurez-vous cependant qu'il y a un espace entre "cd" et votre chemin. Suivez ceci avec une commande qui créera réellement votre projet:
compas créer VOTRE-PROJET-NOM -r zurb-foundation - utiliser des fondations
Veillez à modifier le texte "YOUR-PROJECT-NAME" correspondant au nom actuel de votre projet et à appuyer sur Entrée. Vous verrez ensuite de nombreuses lignes d’informations donnant lieu à un choix. Ce choix indique si vos fichiers Sass seront convertis en fichiers CSS chaque fois que vous les enregistrez ou manuellement lorsque vous choisissez de les convertir. J'utilise toujours le deuxième choix, qui crée automatiquement des fichiers CSS chaque fois que je sauvegarde mes fichiers Sass. Vous devriez voir quelque chose comme ça:
Vous pouvez constater que beaucoup de choses se sont passées et que votre projet basé sur la Fondation est né. Une fois que vous avez choisi votre méthode de compilation à l'aide de la méthode "Compilation compas" ou "Montre compas", vous pouvez saisir le code que vous pouvez voir au bas de l'image. Cela vous permettra juste de gagner du temps car il ajoute votre feuille de style de sortie et normalise.
À partir de là, vous pouvez commencer à construire votre projet avec Sass.
Si vous utilisez Windows, vous pouvez toujours utiliser la version Sass de Foundation, quelques étapes supplémentaires sont toutefois nécessaires pour commencer. Tout d'abord, allons prendre Ruby. Ruby est ce qui nous permettra d’installer cette version de Foundation basée sur Sass. Contrairement à OS X, Windows ne l’a pas installé par défaut. Nous devrons donc aller le chercher..
Désormais, vous souhaiterez disposer de la dernière version (2.0.0 au moment de la rédaction) et, en fonction de l’architecture que vous utilisez, choisissez la norme pour les ordinateurs 32 bits ou x64 pour les ordinateurs 64 bits. Si vous ne savez pas lequel, vous devez simplement cliquer avec le bouton droit de la souris sur "Poste de travail" et cliquer sur "Propriétés" pour le savoir. A défaut, optez pour 32 bits.
Une fois téléchargé, lancez l'installation. Ne cochez pas / ne changez rien sauf si vous savez ce que vous faites. Une fois l’installation terminée, accédez aux programmes, puis à Ruby et cliquez sur «Démarrer l’invite de commande avec Ruby». Une fois que cela est chargé, copiez le code suivant et collez-le dans l'invite de commande, vous pouvez le faire en cliquant avec le bouton droit de la souris sur la barre du haut et en allant dans Édition> Coller..
bijou installer zurb-fondation
Vous verrez quelque chose de similaire à ceci:
Vous pouvez également maintenir Foundation à jour à l'aide de la commande de construction general public ou de la commande release candidate:
mise à jour de gem zurb-fondation
bijou installer zurb-foundation --pre
Maintenant que nous avons la configuration de base, allons de l'avant et installons la dernière pièce, Compass. Comme auparavant, nous pouvons installer Compass en utilisant une commande:
bijou installer une boussole
Soyez patient, cela produira un écran comme celui-ci:
Pour créer réellement votre projet, vous devez basculer vers un répertoire tel que "Bureau" et exécuter une commande. Vous pouvez le faire en tapant "cd" sans les marques de parole, suivies d'un espace, suivies d'un chemin. Pour ajouter le chemin lui-même, vous pouvez soit en saisir un, soit simplement faire glisser le dossier dans l'invite de commande..
Une fois que vous avez changé de répertoire, exécutez cette commande et veillez à modifier YOUR-PROJECT-NAME pour le nom de votre projet actuel..
compas créer VOTRE-PROJET-NOM -r zurb-foundation - utiliser des fondations
Et c'est tout! Après cela, il n'y a aucune différence entre Windows et OS X.
Si vous utilisez OS X, il existe un excellent outil de développement appelé CodeKit. Cette application réduit automatiquement JS, CSS, SCSS et convertit SCSS en CSS, ce qui signifie que vous pouvez tuer terminal et utiliser CodeKit à la place. Il offre également une mise en évidence des erreurs pour JS et SCSS, y compris des bibliothèques telles que jQuery..
Je sais ce que tu penses; "Je n'ai pas OS X". Ne vous inquiétez pas, je ne vous ai pas oublié, vous êtes sous Windows. Vous pouvez télécharger l'application équivalente la plus proche, Prepros..
Dans la partie suivante, nous verrons ce que vous pouvez faire avec cette version plus dynamique de Foundation, basée sur Sass, notamment la personnalisation de la construction, la modification des styles par défaut, etc..
Accentsconagua