Separate character codes as SCSS variables

[milichev]

Sometimes we have to style elements as icons without additional elements in markup, for example styling input[type="checkbox"]:before. To do so it would be great to have a separate file simple-line-icon-variables.scss with only font-face mixin and charcode declarations like the following:

$simple-line-font-path: "../fonts/" !default;
$simple-line-font-family: "simple-line-icons" !default;
$simple-line-icon-prefix: "icon-" !default;

@mixin simple-line-font-icon {
  font-family: '#{$simple-line-font-family}';
  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;
}

$simple-line-icon-user: "\e005";
...
$simple-line-icon-login: "\e066";
$simple-line-icon-logout: "\e065";

Then in simple-lines-icons.scss:

@import "simple-line-icon-variables";

.#{$simple-line-icon-prefix} {
  &user,
  ...
  &social-steam {
    @include simple-line-font-icon;
  }

.#{$simple-line-icon-prefix}user:before {
  content: $simple-line-icon-user;
}

And somewhere in our code something like that:

@import "~simple-line-icons/scss/simple-line-icon-variables";

input[type="checkbox"].fancy {
  display:none;

  & + label {
    &:after {
      @include simple-line-font-icon;
      content: $simple-line-icon-check;
    }
  }
}

The same goes for LESS.
I can make a pull request if it is interesting for anyone else.