CSS Image Sprite with Compass. CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop. But, through all my experience of dealing with CSS Image Sprite, there is no other way that much easier than using Sprite Function for Compass. So, let’s take a look at how it works. Recommended Reading: Syntactically Awesome Stylesheets: Using Compass In Sass Starting Compass Before working with Compass codes, we need to create Compass project watch it.
So, every time there is a change in the project including the images and the .scss, Compass will compile it into the proper form. Let’s open your Terminal or Command Prompt (if you are on Windows), and run the following commands. compass create /path/to/project cd /path/to/project compass watch Combining Images Icons by Futurosoft @import "browsers/*.png"; Layout Orientation Horizontal Diagonal Conclusion. Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.
If it doesn’t work in any of those, it’s a bug so please report it. Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix. In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered. It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. Firefox (and IE?) ProCSSor - Advanced CSS Prettifier.
Preboot. Easy CSS Management and Spriting With Sass and Compass | The Simple Part. Every so often I like to revisit old projects of mine and refactor them a little, either using some new ideas I learnt in the meantime, or trying out some new technique or framework on familiar ground. This time, I’m going over a wordpress theme I made a couple of years ago and using Compass to organize the style sheets.
Converting the existing style sheet (circa 8k uncompressed) to SCSS didn’t take long – only a few minutes by hand – and there are tools which you can use to automate the conversion, so it left me plenty of time to explore more Sass features which make style sheet management much easier. Today we’re going to look at command directives and a few basic spriting helpers. What are Sass and Compass? Sass (Syntactically Awesome Style Sheets) is a language built around and on top of CSS3, adding a bunch of features like variables, mixins (sort of macros), and several helpers for more common css operations.
The examples shown below can be downloaded here. Variables Will generate 6. Form with conditionnal submit button. Home - Scalable and Modular Architecture for CSS. Object Oriented CSS · stubbornella/oocss Wiki. Sass - Syntactically Awesome Stylesheets. LESS « The Dynamic Stylesheet language. La gestion des couleurs avec Sass & Compass. Enfin ! Je prends enfin le temps de rédiger un article sur mon outil favori du moment, le couple : Sass & Compass.
Dans ce micro-tutoriel je vais vous montrer comment modifier la palette de couleur de votre site en ne modifiant qu’une seule valeur. Tant que j’y suis je vous recommande une fois de plus l’utilisation de Zen-Coding. Comment faire ? En consultant la doc de Sass & la doc de Compass… Mais comme je suis gentil je vous donne la solution pour cette fois, mais pensez à la consulter la doc, ces deux outils sont des véritables trésors qui vont vous faciliter la vie dans votre quotidien d’intégrateur. Le « moteur » Le concept consiste à générer de multiples palettes de couleurs en ne se basant que sur une seule couleur d’origine, un peu à la manière de Color Scheme Designer mais entièrement en css. $fond:#222; $texte:#AAA; $base_color: #48A3E9; Démonstration & téléchargement Vous pouvez voir un exemple de rendu compilé avec la couleur #48A3E9 sur cette page.