Hugo Giraudel

While very helpful with arithmetic, Sass falls a bit short with mathematical helper functions. There has been an open issue on the official repository to ask for more math-related functions for almost 3 years.

Some third-party vendors like Compass or SassyMath provide advanced support for math features, but they are external dependencies which could (should?) be avoided.

One of the most popular request on this matter is a power function or even a exponent operator. Unfortunately, there is still … Read article “Power Function”

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 of an element selector and a class selector (e.g. a.btn) for instance.

As of today, the best (and so far only valid way) to do so is as follow:

.button {
  @at-root a#{&} {
    // Specific styles for `a.button`
  

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 it in JavaScript rather than CSS. This is presentational purpose, let’s go the CSS way.

Ana Tudor explained how she managed to do it in a Stack Overflow answer, using chained CSS transforms. Thereafter I turned her … Read article “Placing Items on a Circle”

Scrollbars are one of those UI components that are present on almost every page of the internet, yet we (developers) have little to no control over it. Some browsers give us the ability to customize their appearance but for most browsers including Firefox it just is not possible.

There has been some updates and standardization to styling scrollbars. See The Current State of Styling Scrollbars for the lastest, which you could port to a mixin.

Still, Chrome and Internet Explorer … Read article “Custom Scrollbars Mixin”

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 the extended one.

Because of how it works, it makes it impossible to use it from different scopes. For instance, you can’t extend a placeholder that has been declared in a @media block, nor can you extend a placeholder from … Read article “@extend Wrapper a.k.a Mixtend”

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, take the lower value if initially lower than it, or the higher one if initially higher than it.

As a quick example before going any further:

$clamp: clamp(42, $min: 0, $max: 1337);    // 42
$clamp: clamp(42, $min: 1337, $max: 9000); 

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. For instance, to remove the cm unit of 42cm, you have to divide it by 1cm. It works exactly the same in Sass.

$length: 42px;
$value: $length / 1px;
// -> 42

But what if you don’t know … Read article “Strip-unit Function”

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 list of colors!

/// Stripe builder
/// @author Hugo Giraudel
/// @param {Direction} $direction - Gradient direction
/// @param {List} $colors - List of colors
/// @output `background-image` if several colors, `background-color` if only one
@mixin stripes($direction, $colors) {
  $length: 

There is a fairly popular CSS hack using transparent borders on a 0-width / 0-height element to mimic triangles. There is a CSS snippet here on CSS-Tricks that depicts it.

If, like me, you never quite remember how it works, be sure we can use Sass to help us.

/// Triangle helper mixin
/// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
/// @param {Color} $color [currentcolor] - Triangle color 
/// @param {Length} $size [1em] - 

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 something that can be solved with a CSS preprocessor such as Sass. We only have to build a simple mixin to save us from declaring the 5 properties manually.

/// Shorthand mixin for offset positioning
/// @param {String} $position -