Create Sass mixin for base styles

[Daniel Tonon]

Currently icomoon is really only set up to support icons added through class names, adding the icon through class names isn't always an option though.

The problem is this bit:

[class^="icon-"], [class*=" icon-"] {

    /* use !important to prevent issues with browser extensions that change fonts */

    font-family: 'icons' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

In order to use those styles, we need to either repeat them all over the place (yuk!) or create our own mixin with the same styles in it or use @extend on them like this:

%icon { @extend [class^="icon-"]; }

.class-name:before {
  @extend %icon;
  content: $icon-name;
}

The @extend method almost solves the issue but if you need to add an icon inside a media query, it doesn't work there.

If Icomoon wrapped the the base styles inside a mixin then they would be usable from anywhere purely through style sheets.

I imagine something like this:

@mixin icomoon() {

    /* use !important to prevent issues with browser extensions that change fonts */

    font-family: 'icons' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

[class^="icon-"], [class*=" icon-"] {
    @include icomoon;
}

Then to use an icon all you would need to do is this:

.class-name:before {
  @include icomoon;
  content: $icon-name;
}

To give users the maximum amount of choice, you could allow people to have the choice between using a mixin or an @extend in their styles by doing this:

@mixin icomoon() {

    /* use !important to prevent issues with browser extensions that change fonts */

    font-family: 'icons' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

%icomoon {
    @include icomoon;
}

[class^="icon-"], [class*=" icon-"] {
    @extend %icomoon;
}

Then users have the choice to use either of these methods:

//Media query friendly but adds the full set of styles to the css every time the mixin is used
.class-name:before {
  @include icomoon;
  content: $icon-name;
}

//Media query unfriendly but prevents code repetition in the css
.class-name:before {
  @extend %icomoon;
  content: $icon-name;
}