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 them, apparently, including the most popular one: node-sass, which provides Sass for the bajillion projects out there that wanna run an npm-y JavaScript-based dev environment and avoid the Ruby dependency.

(more…)

Using Sass to Control Scope With BEM Naming

Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some time now, which gives us a level of scope—but it's easy for it to lose its usefulness when you're nested quite deeply. The & can send us down a windy road of doom when we completely lose track of what it means and can be responsible for some really heavy bloat.

(more…)

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, especially with Grid. However, as with most web technologies, browser support is always something of an issue. Let's look at how we can make the fundamental aspects of Grid work across the browsers that support it, including older versions of Internet Explorer that supported an older and slightly different version of Grid.

(more…)

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 succession to produce fluid motion.

The technique doesn't only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and "feel". (more…)

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 familiarize yourself with a dozen projects without documentation.

(more…)

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 cool to know it's basically possible, but I'm definitely not sold yet.

Now instead of just having Sass as a dependency, which is an active healthy project, you have a whole bunch of plugins with different authors as dependencies. And for what? Assuming you use libsass, you don't get any speed. If you like some particular PostCSS plugin, using Sass doesn't prevent you from using that also. One thing I definitely wouldn't recommend is preprocessing those custom properties, as those are not interchangeable things.

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 modular design, most of the focus has been on CSS selectors. No matter what acronym drives your selectors (BEM, OOCSS, SMACSS, ETC), loops can help keep your patterns more readable and maintainable, baking them directly into your code.

We'll take a look at what loops can do, and how to use them in the major CSS preprocessors: Sass, Less, and Stylus. Each language provides a unique syntax, but they all get the job done. There's more than one way to loop a cat.

(more…)

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I'll let Filip tell the story of his new tool that changes that.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag