Articles by

Hugo “Kitty” Giraudel

Non-binary accessibility & diversity advocate, frontend developer, author. Real life cat. They/them.

Mixin to Qualify a Selector

There is no easy way of qualifying a selector from within its associated ruleset. By qualifying I mean prepending an element name (e.g. a) to a class (e.g. .btn) so that a ruleset gets specific to a combination …

Placing Items on a Circle

It can be quite challenging to place items on a circle with CSS. Usually, we end up relying on JavaScript because some plugins do it all right away. However more often than not there is no good reason to do …

@extend Wrapper a.k.a Mixtend

When extending a selector with the @extend directive, Sass doesn’t take the CSS content from the extended selector to put it in the extending one. It works the other way around. It takes the extending selector and append it to …

Clamping a Number

In computer science, we use the word clamp as a way to restrict a number between two other numbers. When clamped, a number will either keep its own value if living in the range imposed by the two other values, …

Strip-unit Function

There is a lot of confusion around the way units work in Sass. Yet, they work exactly as they do in real life. If you want to remove the unit of value, you have to divide it by 1 unit. …

Striped Gradient Mixin

A popular way to draw stripes in CSS it to define a linear-gradient with overlapping color-stops. It works very well but is not very convenient to write by hand… Billion dollar idea: using Sass to automatically generate it from a …

Mixin for Offset Positioning

If there is one shorthand CSS dramatically misses, it is the one making it possible to define the position property, as well as the four offset properties (top, right, bottom, left).

Fortunately, this is typically …