8 Sass mixins you must have in your toolbox. At their core, Sass mixins are blocks of code that you define once and can then re-use anywhere, if you are familiar with any programming language you can think of them as functions.
A mixin can take multiple parameters and make calls to functions to in the end output CSS, and they are super useful when you want really clean and DRY code. Some of the mixins below are already included in the Compass library, but since I prefer not to use Compass in my projects, I decided to write them myself. So, here are the 8 mixins I think every developer should have in their toolbox. 1. Set a rem font size with pixel fallback Rem is similar to the em value, but instead of being relative to the parent element it’srelative to the font-size set in the <html>. Usage p { @include font-size(14px) } Output 2. When Sass 3.2 was released some time ago, they made it possible to define names to our media queries, which makes the usage of them a lot cleaner. 3.
Pattern.svgpattern.pngpattern@2x.png 4. 5. Breakpoint. Namespace support is being added to Sass. Namespace support has been long-requested by those writing CSS the Sass way .
The feature is still in development and should hit a Sass version near you soon enough, but it looks to be a very simple and consistent way of dealing with the vast number of use cases for namespaces. For a deeper take on the history, read this issue and this comment which summarizes the solution and some of the rejected alternative solutions. Here’s an example use case shared by Chris Eppstein : @function current-module() { @return nth(&, 1); } mymodule { @at-root { . #{current-module()}-header { ... } . And this would generate CSS like: Création de sprites avec Sass et Compass - Vtcreative, le blog. Préambule – Cet article est le premier d’une série qui aura pour but de partager avec vous (créatifs, développeurs, ou tout simplement curieux du net), quelques techniques de travail, concepts, mais aussi pistes de réflexion autour du développement front-end et du web design.
Ces informations ne se positionnent absolument pas comme des solutions ultimes, mais plutôt comme des retours d’expérience. Libre à vous de les rejeter, de les utiliser telles quelles, mieux encore, de vous en inspirer dans le cadre de vos propres projets. J’ai récemment participé à l’intégration d’une application web [ 1 ] composée d’une trentaine de fichiers PSD, dans lesquels on pouvait trouver environ 150 icônes d’interface.
Avant de débuter l’intégration de ce projet, il m’a semblé logique de définir une méthode efficace et surtout évolutive pour remédier aux contraintes que cette quantité d’icônes allait engendrer. Principes de base Cette approche a néanmoins ses limites. Utilisation avancée & Retina Conclusion. Decouple Your CSS From HTML With Reusable Modules – TNG - The Nitty Gritty. Sass 3.2 has a wonderful method to define reusable modules called placeholders which enable us to decouple CSS from HTML while using unambiguous, semantic class names.
Oh and by the way… We've got a raffle to give a way a book. See more below. A few weeks ago Ian Storm Taylor had a great article on how to find the best way to CSS using Object Oriented CSS and the CSS preprocessor Sass. The OOCSS view of thing is that you define modules to work with and in order to change these modules - to build variants of them - you apply classes to an HTML element that change its styles accordingly. ! For instance here is an easy example of a button that changes its appearance when applying classes on it. The Absolute Beginner's Guide to Sass. What is Sass?
Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. It’s a way to simplify your CSS workflow, making development and maintenance tasks easier. For instance, have you ever had to do a find-and-replace in your stylesheet to change a particular HEX color for a particular indecisive client?
Or had to open up the calculator app to figure out a column width in a multi-column design? Sass introduces new concepts such as variables, mixins, nestings and selector inheritance. Sass looks similar to CSS, but without the semi-colons and curly braces. Given the following CSS: You’d write the following in Sass: #skyscraper_ad display: block width: 120px height: 600px #leaderboard_ad display: block width: 728px height: 90px Sass uses two-space indentations to define code nesting. Now that you see how Sass is written, let’s look at some of the things that makes Sass so awesome.
Variables $red: #FF4848 Nesting There are two types of nesting. Selector Nesting Mixins.