Hugo Giraudel is a front-end developer from France enjoying hacking around Sass just for the heck of it. He is the author of SassyLists, SassyJSON, SassyMatrix, SassyCast, SassySort and Browserhacks.

Hugo's articles

  1. Caching Values from Sass Mixins

    Let’s back up a little bit so I can explain the context of this post. In recent weeks I have been actively comparing rendering output between mixins and placeholders. As a result, the more I think about it, the more I believe using mixins and placeholders as they are described in the Sass docs is simply not enough.

    Let’s focus on the main goal here: CSS output. In this whole experiment, I am not considering code complexity or code quality. I’m only considering final CSS output. The point is to have CSS output that is as light and lean as possible.

    If you’ve read my previous SitePoint articles covering placeholders vs mixins and @extend directives, you would be aware that there are a couple of drawbacks with both features. Mixins do not merge selectors while @extend directives are restricted to their scope, hence they are basically unusable in a responsive context with @media blocks (which I tackled and partially solved in my article on cross-scope @extend).

    Today, I would like to deal with another issue: Mixin grouping.

    What is Mixin Grouping?

    Mixins are really handy when you want to create shortcuts in your variable code. For instance, you could have a mixin accepting two arguments to output both width and height. Or a mixin for offset positioning. That’s nice.

    The problem with mixins is every time you call them, they dump CSS rule sets. If you call them twice with the same arguments from 2 different selectors, they won’t be merged into a single rule set. Instead, they will dump the same rule set twice — which kind of sucks.

    For this article, we’ll deal with a very simple use case: A size mixin to assign width and height. Here is what it looks like:

  2. Cross-Media Query @extend Directives in Sass

    If you read my previous article on Sass’s @extend directive or if you have pretty solid knowledge about the way Sass works, you may be aware that you cannot do this:

    [code language="css"]
    %example {
    color: blue;
    font-weight: bold;
    font-size: 2em;
    }

    @media (max-width: 800px) {
    .generic-class {
    @extend %example;
    }
    }
    [/code]

    What’s happening here is we’re trying to extend a placeholder inside a media query from another scope (in this case, the root). It just doesn’t work, and if you try it you’ll get the following error message:

    You may not @extend an outer selector from within @media.
    You may only @extend selectors within the same directive.

  3. A Creative Grid System With Sass and calc()

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do with a couple of Sass variables and the calc() function from CSS.

    There are probably still quite a couple of flaws and edge cases that are not handled in this example. If you have any recommendations for improving this, be sure to share. Otherwise keep in mind it’s just an experiment.

    What Are We Trying to Do?

    In the last couple of days I have been working with the calc() function in CSS. calc() can be a blessing when it comes to cross-unit calculations, and gets even better when you have a couple of Sass variables to make everything easily customizable.

  4. Creating a Rainbow Border with Sass

    p>A lot of modern designs are making good use of a multi-colored border effect (which we might also refer to as a “rainbow” border or “striped” border). For example, look at Treehouse’s blog – it has a multi-colored border under its navigation and it looks really nice.

    Treehouse's colored border

    However, in my opinion, Treehouse is coding it wrong. Since this is strictly concerned with aesthetics, it should be handled by CSS – and CSS only – without requiring any extra work in the HTML. Treehouse uses 50 span elements, each of them with a specific background color and a specific size, to create its nav border.

    Whaaaat?

    It’s overkill to dump such a large load of elements into the DOM just so you can create a striped border. Why not use CSS for this? I mean only CSS. Gradients are awesome for this type of task! Yes, you can create multiple colors in this manner using CSS gradients, and it’s quite easy to do.

    The only caveat is that gradients are kind of a pain to write. They have a tedious syntax that is very likely to result in mistyping and errors. Plus having to repeat color stops in order to achieve multiple colors is annoying.

  5. My Current CSS and Sass Styleguide

    It’s never easy to find a way to write consistent, future-proof, and robust CSS. It’s taken me months, if not years, to come up with a clean way to write mine. In fact, my process is still evolving, and I expect it to change even more.

    In the meantime I have accumulated enough knowledge to write an article about how I feel about writing CSS. I don’t claim that these suggestions are for everyone, and they’re certainly not perfect. But I thought it would be nice to put these into an article to share them with the community.

    Naming conventions

    Naming conventions are a team decision. If, like me, you are dealing with your CSS on your own, you can go nuts and use something that suits you. Personally, I go with Nicolas Gallagher’s methodology which is influenced by the well-known Yandex BEM system.

  6. Dealing with Color Schemes in Sass

    A lot of sites have a specific color scheme for every section. Even this very site you are reading does this – you are in the blue section AKA CSS. This is a clever design trend to create clear distinctions between various parts of the same entity.

    But on the technical side, this can be a pain to work with. Not because it is overly complicated – more because it involves a lot of annoying repetition.

    Unless, that is, you automate the process with — let’s say — Sass. Then you have something really easy to work with. Since I have had to do this more than once, I’ll show you how I handle the situation.

  7. Architecture for a Sass Project

    Remember when we used to do everything with nothing more than plain old CSS? All we had was a single CSS file, longer than a sleepless night? Yay! Thousands and thousands of lines — usually poorly written — of CSS where we were struggling to find the one value we had to change to fix some obscure and frustrating IE bug.

    Well those days are behind us, folks. Dealing with CSS has become more interesting and more complicated. Probably the latter because of the former. And now that we have CSS preprocessors, responsive web design, progressive enhancement, graceful degradation, and all the other things cool kids talk about, CSS has become more powerful than ever.

    CSS has become more interesting and complicated.
    — Me.

    So because we have a lot to deal with, it is important that we stay organized. And we can probably all agree that it isn’t always easy to be. So I thought in this post I could help you to understand how you should think (rather than how you should do; I’ll leave you the only judge of that).

  8. Is Compass to Sass what jQuery is to JavaScript?

    Below is a statement made to me a short time ago by someone on Twitter named David Leuliette (translated from French): #Compass is to #Sass what #jQuery is to #JavaScript, do you confirm @HugoGiraudel? — David Leuliette, Twitter So far I have to say the analogy has some merit. To be honest, it is not […]

  9. A Sass Component in 10 Minutes

    Developers today recognize that while it’s great to write your website or application code as a collection of smaller pieces (i.e. components), accomplishing this is not always easy. So let’s look at this topic in detail using Sass. Because nothing works better than a good ol’ example, I suggest we take something that is needed […]

  10. What Nobody Told You About Sass’s @extend

    Sass provides a lot of powerful features to write consistent and robust CSS. One of the most powerful yet tricky ones has to be @extend. While most Sass users understand the basics of @extend, I feel there are some more obscure parts to it that are not as well known. But first, let’s start with […]