Revue : Prepros - Geek'n'Lady Et bonjour ! Comme vous le savez maintenant, je suis une adepte de Sass. Mais qui dit Sass (ou même Less), dit compilation. Très sincèrement, ça m’embêtait de devoir à chaque fois lancer cmder et de demander à Ruby d’écouter les dossiers de mes sites et de les compiler. Au boulot, aucun problème pour compiler nos sites en Less étant donné que je suis sur un Mac avec CodeKit (oui je sais, coder sur Mac c’est le mal mais je n’ai pas vraiment le choix !) Il s’agit d’un logiciel gratuit qui possède également une version payante. Entrons dans le vif du sujet. Comment ça fonctionne ? Pour commencer, il faut importer un projet dans Prepros et procéder à quelques réglages de l’application et du projet. Sur cet exemple, je travaille sur le design du blog (non ce n’est pas un spoil :p ) qui comme vous le savez est en Sass. En activant « Sync Browsers » et en installant l’extension Prepros sur Google Chrome, Prepros rafraîchit automatiquement les pages dès l’enregistrement d’un fichier. 19 mars 2016
LESS « The Dynamic Stylesheet language 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
Prepros est le compagnon de vos projets SASS - Seemios Blog Prepros est un petit logiciel qui va vous faciliter la vie, surtout si vous ne supportez pas la ligne de commandes. Il permet de compiler vos fichiers SCSS ou SASS très simplement. Plus besoin d’installer Ruby et d’ouvrir votre invite de commande sur Windows. Tout est graphique et automatique après un petit paramétrage. Prepros est capable de compiler de nombreux langages tels que Less, Coffeescript, Markdown ou encore Haml. Cependant, nous allons plus particulièrement nous intéresser à la compilation des fichiers SCSS du préprocesseur SASS présenté dans un précédent billet. L’installation est très simple puisqu’il suffit de télécharger le programme d’installation sur le site officiel et de l’exécuter. Au lancement de Prepros, une fenêtre épurée vous permet d’accéder aux différents paramètres de l’application et de créer un nouveau projet. En bas à gauche de l’écran, le bouton « + » vous permet d’ajouter un projet dans Prepros. automatiquement ajouté au projet.
Simplifiez-vous la vie avec LESS - HTML / CSS Le CSS est un langage déclaratif simple : la plupart du temps, on applique une valeur à une propriété. Mais de nos jours, avec le développement des attributs propriétaires (vous savez, les fameux -moz-*, -webkit-* et autres), le code se trouve dupliqué en de nombreux endroits. En voici un exemple typique : 1#foo { 2 -moz-border-radius: 10px; 3 -webkit-border-radius: 10px; 4 border-radius: 10px; De même, il est impossible d’imbriquer des sélecteurs en CSS : 2#foo { 3 bar { 4 color: #150; 6 baz::before { 7 content: '['; 9 baz::after { 10 content: ']'; 15#foo bar{ 16 color: #150; 18#foo baz::before { 19 content: '['; 21#foo baz::after { 22 content: ']'; Enfin, imaginons le cas où il vous faudrait définir une palette de couleurs pour votre site. Des gens intelligents se sont donc penchés sur la question, et en ont retiré l’observation suivante : « Nous devrions créer un langage dynamique capable de générer des feuilles de style que les navigateurs pourraient comprendre. » Ainsi naquit LESS.
Optimisez vos CSS avec LESS | Washaweb Note : Ce tutoriel a été initialement publié dans le Hors Série N°15 de Webdesign Magazine. C’est avec leur aimable autorisation que je peux aujourd’hui publier cet article ici, sur mon blog. Apprenez à optimiser vos CSS en intégrant le Framework LESS. Pour ce tutoriel, vous trouverez la librairie LESS.js sur le site lesscss.org, ainsi qu’une page d’exemple ici. Introduction Lors de la réalisation d’un site HTML, on s’aperçoit que la rédaction de feuilles de styles peut vite devenir fastidieuse et répétitive. Présentation de LESS LESS peut fonctionner de différentes manières qui sont toutes détaillées sur le site (en anglais). Pour l’exemple d’intégration de ce tutoriel, nous allons partir d’un fichier HTML qui contient déjà une feuille de style selon l’exemple suivant : <! Nous déposons le fichier téléchargé less.js à la racine du site après l’avoir renommé. Activer le mode « watch » Première utilisation : les variables Opérations Héritage
Digging Into Sass - A Guide A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started). In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Recommended Reading: Using Bootstrap 3 With Sass Tools Of The Trade Thoriq showed you how you can use Sass from the command line using the sass --watch command. If you prefer GUI tools, you can go with my personal favourite app, Codekit, a web developer tool for compiling Sass, concatenating, autoprefixing and much more. If you just want to try out Sass without paying for anything you can use the terminal, or Koala (here’s our review), a free cross-platform feature-rich app, which can hold its ground against premium counterparts. Variables Nesting Extending Rulesets
LESS Is More: Make Your CSS Coding Easier with LESS Home : Articles : LESS Is More: Make Your CSS Coding Easier with LESS Tutorial by Matt Doyle | Level: Intermediate | Published on 18 May 2011 Categories: This tutorial introduces LESS, a dynamic stylesheet language that makes it quicker and easier to write CSS. In recent years, CSS has matured into a very powerful way to style web pages. It's now possible to create a website's look almost entirely in CSS, with minimal use of images. This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. For this reason, various dynamic stylesheet languages are starting to spring up. In this article you'll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort. What is LESS? LESS is a dynamic stylesheet language that extends the standard CSS syntax. LESS is easy to understand, install and use. Installing LESS in your web page Using LESS is easy: That's it! variables .
LESS compiler in PHP - lessphp New: lessphp 0.4.0, compiles Bootstrap 3, breaking changes, see Changelog (August 9th 2013) About lessphp is a compiler for LESS written in PHP. The entire compiler comes in a single includable class, but an additional command line interface to the compiler is included. It will run on PHP 5.1+. For an overview of the syntax take a look at the lessphp documentation. Follow the author on twitter for updates: @moonscript. Demo Use the live demo to test the compiler using your own code, or click through the example buttons to see various parts of the language. Edit me ↴ CSS comes here, click compile to build. Quick Start The typical flow of lessphp is to create a new instance of lessc, configure it how you like, then tell it to compile something using one built in compile methods. The compile method compiles a string of LESS code to CSS. The compileFile method reads and compiles a file. echo $less->compileFile("input.less"); $less->checkedCompile("input.less", "output.css"); Documentation Plugins Issues
11 Mixin Libraries For Sass Designers Should Get If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. Pin it There are many mixins are made by developers, to help you when working with Sass in your development. Recommended Reading: A Simple And Easy Guide To Understand Sass 1. Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. Check out the complete documentation to use each available mixin and function. 2. Sass CSS3 Mixins provide mixins that works across different browsers. Download this mixin here. 3. Want to filter your image with stunning effect in Sass? 4. CssOwl provides useful mixins to set the position of an element (relative or absolute) and add content with the pseudo selector ( :after and :before). 5. 6.
sur le site Kaelig.fr > Sass Reference Syntax There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS3. This means that every valid CSS3 stylesheet is a valid SCSS file with the same meaning. The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. Either syntax can import files written in the other. $ sass-convert style.sass style.scss $ sass-convert style.scss style.sass Note that this command does not generate CSS files. Using Sass Sass can be used in three ways: as a command-line tool, as a standalone Ruby module, and as a plugin for any Rack-enabled framework, including Ruby on Rails and Merb. gem install sass If you’re using Windows, you may need to install Ruby first. To run Sass from the command line, just use sass input.scss output.css You can also tell Sass to watch the file and update the CSS every time the Sass file changes: Rack/Rails/Merb Plugin :style
Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. PreprocessingPreprocessing permalink CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! VariablesVariables permalink
Sass Guidelines Livre Sass et Compass avancé, optimiser ses feuilles de style – Éditions Eyrolles