Grow your CSS skills. Land your dream job.

Insert SASS Mixin variable in comment

  • # January 22, 2013 at 5:35 pm

    Hi, just a quick question cause I can’t find any resources online. I got the following SASS mixin to add my font-sizes in rem with fallback:

    @mixin rem-font-size ($size) {
    font-size: $size + px; font-size: ($size / 10) + rem; /* =$size + px */
    }
    and it compiles to

    font-size: 16px;
    font-size: 1.6rem;
    /* =$size + px */

    which is pretty much I wanted. Except that I want the value of $size displayed in the comment as well. Any ideas how to solve that?

    # January 22, 2013 at 6:21 pm

    By referencing the variable like this: #{$var}, you can force Sass to output it in places where it usually wouldn’t.

    So you should be able to use.

    @mixin rem-font-size ($size) {
    font-size: $size + px; font-size: ($size / 10) + rem; /* =#{$size + px} */
    }

    # January 22, 2013 at 6:34 pm

    Awesome, works perfectly! Thanks @rosspenman. Do you know online resource where I can look something like that up myself next time? I could not find it in the official SASS reference that one is hard to read I think.

    # January 22, 2013 at 6:38 pm

    [It actually is in the Sass documentation](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_), but it isn’t explained very well.

    # January 22, 2013 at 6:38 pm

    I just kind of guessed that it would work, and it did! :)

    # January 22, 2013 at 6:52 pm

    Ah it is even in there. Someone should definitely write a nicer doc for SASS.

    # January 23, 2013 at 3:49 am

    Kaelig did: http://www.kaelig.fr/bettersassdocs/

    # January 23, 2013 at 6:21 am

    Wow! That’s cool!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".