Category: sass

Ruby Sass to be put to pasture on March 26, 2019

There have long been multiple implementations of Sass. Most notably, the canonical Ruby version, now at 3.5.6. Then there is LibSass, the C++ version, which is at version 3.4 and… Current LibSass 3.4 should be compatible with Sass 3.4. LibSass is notable because it powers the majority of Sass ports. Over 30 of t...

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins

According to an article from A List Apart about CSS Grid, a “new era in digital design is dawning right now.” With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There’s an entirely new system available for creating layouts,...

Building a 3D Rotating Carousel with CSS and JavaScript

A lot has been said on the use of traditional 2D carousels, for example this piece on Smashing Magazine covers this subject. There’s no simple yes or no answer to the ‘should I use a carousel?’ question; it depends on the particular situation. When I started researching this topic, I didn’t need a 3D carousel, ...

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept deals with animating objects in delayed su...

Build a Style Guide Straight from Sass

Last fall, our dev team wanted to get started with style guides. We had added a new member to the team, and as he was getting up to speed, we realized how lacking our project documentation was. If you’ve ever been a new developer on a team with weak documentation, you know how confusing it can be to try to famili...

Fluid Responsive Typography With CSS Poly Fluid Sizing

    Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is...

Front-End Tooling Trends for 2017

Do you have more than two years’ development experience? Are your advanced CSS skills aided with Sass and Autoprefixer? Is your JavaScript knowledge reasonable and you’re happy using Gulp, npm, and jQuery? If so, you’re a typical developer, according to Ashley Nolan’s Front-End Tooling Survey. ...

A Thing To Know about Gradients and “Transparent Black”

Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this: .element { background: linear-gradient( to bottom, red, transparent ); } There is a pretty big gotcha here, though. In Chrome (also Android), Firefox, and Edge, you’d be all good. But in Safari (also iOS),...

From Sass to PostCSS

Tyler Gaw documents his process of moving off Sass and onto PostCSS, but keeping most of the code the same. That meant making sure he was using PostCSS plugins that would replicate most of Sass’ functionality, like nesting and mixins and whatnot. Tyler is sold. I find it an interesting experiment, and it’s ...

Loops in CSS Preprocessors

If you’ve ever watched old sci-fi flicks, you know how powerful loops can be. Feed your robot nemesis an infinite loop, and kaboom. Robo dust. Preprocessor loops will not cause dramatic explosions in space (I hope), but they are useful for writing DRY CSS. While everyone is talking about pattern libraries and mo...