0

I have the following SASS code

.twitter-icon {
    position: relative;

    &:before {
        @include icon($twitter);
        position: absolute;
    }
}

.facebook-icon {
    position: relative;

    &:before {
        @include icon($facebook);
        position: absolute;
    }
}

.linkedin-icon {

...

I thought to optimize it with a SASS Mixin that generates different css classes and icon-fonts depending by passed parameters.

I started to write it as below, but I don't know how to replace native Bootstrap 2.3.2 @include icon($twitter); with the generic @include icon($social-icon); to have different CSS classes with different imported icons.

Actual solution works only for CSS selector .#{$social-name}-icon 

@mixin socialIcons($social-name, $social-icon) {
    .#{$social-name}-icon {
        position: relative;

        &:before {
            @include icon($social-icon);
            position: absolute;
        }
    }
}

@include socialIcons(twitter, twitter-sign);

The problem is that I need that $social-icon could contain a variable (please, look at my original code) such as $twitter, $facebook, ... and not a simple string.

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • I don't know if is necessary to modify also mixin call for example `@include socialIcons(twitter, $twitter);` or `@include socialIcons("twitter", "twitter");` but i'm opened to it – Luca Detomi Feb 26 '16 at 10:23
  • I don't understand the problem here. What you've already written looks like it does what you want. – cimmanon Feb 26 '16 at 12:54
  • You're right, I edited my question to better explain. Variables used in `@include icon(...);` are Boostrap default – Luca Detomi Feb 26 '16 at 13:46
  • Your question still makes no sense. Variables don't contain other variables. When you write `$foo: $bar`, the variable `$foo` contains whatever value `$bar` contained at that point in time, it doesn't contain a reference to the variable `$bar`. – cimmanon Feb 26 '16 at 13:50
  • So you're saying that replace all rules with a single mixin and many calls with different parameters is not possible in this case? Please look at [this link in LESS documentation](http://lesscss.org/features/#variables-feature-variable-names). In LESS is possible to define variables with variable names, I thought that in SASS could be possible too. – Luca Detomi Feb 26 '16 at 13:54
  • I'm saying I have no idea what you're asking in your question because it makes no sense. But if what you're asking is if Sass supports variable variables, the answer is no: http://stackoverflow.com/questions/8533432/creating-or-referencing-variables-dynamically-in-sass – cimmanon Feb 26 '16 at 13:58
  • 1
    I found that calling mixin with `@include socialIconFont(twitter, $twitter);` accomplishes desired behaviour, but I can't write it as more complete answer due to "protection". – Luca Detomi Mar 07 '16 at 14:17

0 Answers0