background preloader

Install the Compass Stylesheet Authoring Framework

Install the Compass Stylesheet Authoring Framework
Installing Ruby Compass runs on any computer that has ruby installed. For more advanced users you may want to install rvm. Setting up the ruby environment $ gem update --system$ gem install compass Looking for the next release's preview version? To install the preview version of Compass: gem install compass --pre Tell us about your project and we'll help you get it set up: I would like to set up my project named with starter stylesheets. Thanks. Terminal newbies, read the Designer’s Guide to the OSX Command Prompt first! $ gem install compass $ compass create <myproject> Note: Values indicated by <> are placeholders. Note: $ is a placeholder for your terminal's prompt. Then follow the instructions that compass provides in the output. Hate the Command Line? Try one of these Community supported GUI applications: Next Steps

Tutorial Compass, CSS trop facile avec SCSS et SASS Compass est un framework qui permet de compiler des feuilles de style css en utilisant SCSS ou SASS. Cet outil permet d’intégrer des frameworks CSS tel que blueprint. Il met également à disposition une API pour une intégration HTML et CSS3 propre et productive. Les limites de CSS A l’air des sites web dynamiques et des supports mobiles, le concept de feuille de style semble souffrir de quelques faiblesses. Mise en place rapide d’un bootstrap avec Compass Compass est développé en ruby, il faut donc s’assurer que la machine sur laquelle vous développez possède un interpréteur ruby d’installé. Pour installer compass Pour créer un nouveau projet, il suffit de lancer la commande suivante : Il est possible de changer certains paramètres (tels que le noms des répertoires des différents assets) en ajoutant les options suivantes : Dans le cas d’un projet Rails, il suffit d’ajouter compass-rails dans le GemFile, et de recréer le bundle de votre application. Synthaxe d’écriture du SCSS ou du SASS

Simplifiez-vous la vie avec LESS La partie fun du cours commence. Vous allez apprendre à utiliser LESS pas à pas. On commence ? Veuillez noter que CSS est totalement compatible avec LESS, ce qui signifie que vous pourrez tout à fait utiliser du CSS pur dans votre code si vous le souhaitez. Constantes Tout d’abord, LESS vous permet d’utiliser des constantes. un bleu électrique (#17B6FF) ;un magenta pétant (#FF17B6) ;un vert citron (#B6FF17) ;un vert acide (#1BFF17). Si vous décidez de changer une des couleurs de votre palette, vous allez devoir vous battre avec votre éditeur à coups de « rechercher / remplacer ». LESS générera le CSS suivant : On pourrait pousser un peu plus loin le concept en utilisant des noms de variables plus ciblés : Vous pouvez utiliser des variables de différents types (couleurs, dimensions, pourcentages, chaînes de caractères, etc.). Classes abstraites Les classes abstraites peuvent être comparées à des fonctions. Si vous souhaitez utiliser plusieurs paramètres, séparez-les par des virgules. Imbrication

Sass: Install Sass Applications There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it). CodeKit (Paid) Mac Ghostlab (Paid) Mac Windows Hammer (Paid) Mac LiveReload (Paid, Open Source) Mac Windows Prepros (Paid) Mac Windows Linux Scout-App (Free, Open Source) Windows Linux Mac Libraries The Sass team maintains two Node.js packages for Sass, both of which support the standard JavaScript API. There are also community-maintained wrappers for the following languages: Java, including a Gradle plugin. Command Line When you install Sass on the command line, you'll be able to run the sass executable to compile .sass and .scss files to .css files. sass source/stylesheets/index.scss build/stylesheets/index.css First install Sass using one of the options below, then run sass --version to be sure it installed correctly. Learn More About Sass

Related: