Getting started with Bourbon | CSS3. Compass is the most famous Sass mixin library. It provides lots of cross-browser CSS implementations alongside powerful helper features like easy data URI and image sprite creation and more. However, some argue it's a layer of complexity they can live without, especially if they're just beginning with Sass. This is where Bourbon comes in. Bourbon describes itself as "A simple and lightweight mixin library for Sass". The project's creator, Phil LaPier expands upon this, saying, "I wanted a unified mixin library to make it easier to update vendor prefixes, and to have a simple starting place for all our new projects, so I created Bourbon.” Try the Bourbon In case you're not familiar with the term 'mixin', it's a feature when using Sass to produce repetitive CSS code with ease. .linear-gradient { @include linear-gradient(#1e5799, #2989d8); } That produces this CSS: Bourbon has generated a full ‘vendor stack' of CSS properties that will afford the widest possible browser support.
Easy buttons. CSS Specificity Should Be (Mostly) Irrelevant. There have been numerous articles written by some very reputable people discussing the topic of CSS specificity. I think it’s great if a CSS developer wants to learn the ins and outs of specificity, because it is an important aspect of how CSS works. But I’m going to put forth an argument here that CSS specificity is quite overrated and, in fact, learning about CSS specificity has the potential to degrade the quality of your code. Who Says Classes Can’t Be Unique? If you were to ask the average web developer to tell you the difference between a class and an ID, they’d give you the basic answer that I gave in this CSS Basics article: IDs are specific, and can’t be reused; classes are less specific and are reusable. But many developers have taken this a step further. There is nothing wrong with using a class that only appears once in your stylesheet.
On its own, .element is exactly the same as #element. Specificity Doesn’t Live in a Vacuum It doesn’t matter that #element and ! Handy Sass Mixins - Web Design Weekly. Mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful.
I have also added the mixins to GitHub. If you have any favourite mixins, thoughts, tweaks or modifications, be sure to submit a pull request or add them in the comments below. GitHub If you are new to Sass, I would highly recommend you check out my Why you scared of Sass? Responsive Breakpoints My most utilised mixin that I don’t think I could live without anymore. Usage: Output: Retina Images This mixin by Jason Zimdars is a breeze to use and offers a greater visual experience to those that are lucky enough to have a retina device.
Clearfix .article { @include clearfix();} Box Sizing Reset your elements box model with ease. *, *:after, *:before { @include box-sizing(border-box);} SMACSS and Rails – A Styleguide for the Asset Pipeline • 55 Minutes Blog. If you’re already familiar with SMACSS, skip ahead to the Rails styleguide. SMACSS principles SMACSS (Scalable and Modular Architecture for CSS) is a set of CSS guidelines created and promoted by Jonathan Snook, who also offers an e-book of the same name. A generous portion of the book’s contents is available for free at smacss.com. If you aren’t already familiar with SMACSS, I highly recommend the book; it’s a quick read. Let’s recap some core principles of SMACSS before we dive into the Rails implementation. Categorization Base styles are the default styles for HTML elements (h1, p, pre, etc.).Layout styles are grid and other reusable layout classes.
Guidelines Avoid IDs in CSSMinimize the depth of CSS selectorsUse classes to define visual presentation patterns1 SMACSS versus Rails conventions As an experienced Rails developer, you may notice that many of the SMACSS principles contradict what are typically considered best practices in Rails. A SMACSS styleguide for Rails projects Filenames. CSS · Styleguide. The Sass Way.