Share
Le Bootstrap de Twitter est incontestablement populaire - et si vous êtes un fan de préprocesseurs CSS, vous adorerez le fait qu'il soit construit sur LESS. Malheureusement, si vous aimez (comme moi) aimer travailler avec SASS, il n’existe généralement rien de disponible pour commencer. Jusqu'à maintenant. Ce tutoriel vous expliquera comment combiner le logiciel Bootstrap de SASS, Compass et Twitter..
Nouveau logo Sass par Bermon Painter
Pour commencer, nous devrons télécharger quelques fichiers. Vous aurez également besoin de votre éditeur de texte préféré; J'utilise WebStorm de JetBrains, mais vous êtes libre d'utiliser ce que vous préférez.
Rendez-vous sur rubyinstaller.org pour que nous puissions saisir Ruby et appuyer sur le gros bouton de téléchargement rouge. Sur cette page Téléchargements, cliquez sur le lien Rails actuel. La version que j'utilise aujourd'hui est la suivante: rubyinstaller-1.9.3-p286
Une fois que le téléchargement commence, nous devrons aller chercher un rechargeur en direct. Sur une machine Windows, rendez-vous sur Scout; Mon rechargeur en direct de choix, les utilisateurs de Mac utiliseront probablement LiveReload.
Prochaine tâche: récupérer une superbe édition SASS de Bootstrap-SASS de Twitter sur GitHub: il suffit de cliquer sur ZIP… (je ne saurais trop remercier Thomas McDonald pour cette conversion de LESS.)
Ok, c'est tout pour le téléchargement.
Allez-y et installez Ruby Installer et Scout.
Créez maintenant un dossier temporaire et extrayez-y le zip Bootstrap-Sass:
Ensuite, nous devons nous diriger vers notre fenêtre Invite de commandes pour configurer notre projet. Allez-y et tapez bijou installer une boussole à l'invite C: \.
Cela installera la boussole sur votre machine. Attendez juste quelques minutes pour terminer (peut-être prendre un café). Une fois que c'est fait, allez-y et fermez votre invite de commande.
Allez dans le répertoire où vous voulez placer votre nouveau projet, puis Shift + Clic droit (sous Windows) sur ce dossier. Puis choisissez Ouvrir la fenêtre de commande ici. Une fois ouvert, tapez compas créer YourProjectName. Vous pouvez également accéder à votre projet directement via l'invite de commande - consultez Introduction à la ligne de commande du concepteur pour plus d'informations sur la navigation dans les répertoires..
Voilà pour créer votre projet Compass / Sass.
Vous vous rappelez quand vous avez créé ce dossier temporaire? Maintenant il est temps d'aller chercher Bootstrap à jeter dedans.
Rendez-vous sur 'YourTempFolder \ thomas-mcdonald-bootstrap-sass-dabed1e \ vendor \ assets'. Là, vous allez copier le contenu du dossier Assets et le coller dans votre dossier de projet. Allez-y, supprimez ie, screen et print.scss dans votre dossier Sass..
Votre dossier de projet devrait ressembler à ceci:
Vous allez maintenant avoir un projet Bootstrap configuré avec tous les goodies SCSS. Maintenant, pour aller chercher votre code HTML pour commencer, je vais utiliser fluid.html à partir des modèles HTML du site Web Bootstrap de Twitter..
Sur le site Web, affichez le code source, puis copiez-le (un moyen très facile de se procurer un balisage Bootstrap de base). Ensuite, lancez votre éditeur de texte, créez un nouveau fichier et nommez-le index.html. Continuez et collez le contenu HTML du modèle HTML Bootstrap de Twitter.
Une fois que cela est fait, allez-y et éditez le code HTML pour qu'il pointe toutes les références à votre structure de fichiers, c'est-à-dire… href = "… /assets/ico/favicon.ico" à href = "images / favicon.ico".
Et n'oubliez pas de définir la référence de votre feuille de style sur "stylesheets / style.css"! Vous devrez également modifier jquery.js en bootstrap.js. Prenez votre temps et redressez les références HTML pour qu'elles correspondent aux chemins de vos projets.
Créez un fichier nommé style.scss dans votre dossier Sass afin que Scout sache quoi rechercher. Feu éclaireur! Scout devrait ressembler à ceci une fois que vous avez appuyé sur son bouton de lecture.
Il créera et mettra à jour votre css automatiquement, en se comportant efficacement comme la commande 'Compass Watch'.
Obtenir votre style.scss ouvert dans votre éditeur de texte, vous devez ajouter deux règles d'importation: @import 'bootstrap'; et @import 'bootstrap-responsive';. Sauvegarde le!
Félicitations, vous avez maintenant un site Bootstrap and Sass fonctionnel et très modifiable!
Remarque: Les mixins et les variables peuvent tous être changés facilement en allant dans /bootstrap/_mixins.scss et /bootstrap/_variables.scss respectivement.
La puissance de Bootstrap et Sass ne peut être niée; utilisez ce pouvoir à bon escient! Pour toute référence à l'utilisation du bootstrap de Twitter, consultez notre série Bootstrap 101 ou visitez le site Web Bootstrap de Twitter et lancez le projet de Thomas McDonald sur GitHub. Si rien d'autre, envoyez-lui un rapide merci!
Voici à nouveau les liens, plus quelques ressources d'apprentissage supplémentaires.
Accentsconagua