Add .scss Files and Variables

[robneu]

It would be really handy if the source directroy also included some scss partials and variables for the icon names. Right now I'm pulling in the raw icon files and generating a custom font within our themes but I wouldn't need to do that if the source included these.

The main reason for this is to make it a little easier to use custom icons within psudo selectors by giving the unicode content semantic variable names. If you also had grunt-webfont generate two individual scss partials and included them in the src dir, I could just pull those in and stop generating my own font.

Here's an example of what I mean:

// SiteIcons v 0.1.0 - MIT Licensed - Generated by grunt-webfont


@font-face {
    font-family: "siteicons";
    src: url("fonts/siteicons.eot");
    src: url("fonts/siteicons.eot?#iefix") format("embedded-opentype"),
        url("fonts/siteicons.woff") format("woff"),
        url("fonts/siteicons.ttf") format("truetype"),
        url("fonts/siteicons.svg#siteicons") format("svg");
    font-weight: normal;
    font-style: normal;
}

%sic {
    font-family: "siteicons";
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sic {
    @extend %sic;
}

// Icon Variables
$sic-amazon: "\f101";
$sic-apple: "\f102";
$sic-arrow-down: "\f103";
$sic-arrow-left: "\f104";
$sic-arrow-right: "\f105";
$sic-arrow-up: "\f106";
$sic-bandcamp: "\f107";
$sic-behance: "\f108";
$sic-bloglovin: "\f109";
$sic-book: "\f10a";
$sic-calendar: "\f10b";
$sic-camera-alt: "\f10c";
$sic-camera: "\f10d";
$sic-cancel: "\f10e";
$sic-caret-down: "\f10f";
$sic-caret-left: "\f110";
$sic-caret-right: "\f111";
$sic-caret-up: "\f112";
$sic-cart: "\f113";
$sic-category: "\f114";
$sic-check: "\f115";
$sic-chevron-down: "\f116";
$sic-chevron-left: "\f117";
$sic-chevron-right: "\f118";
$sic-chevron-up: "\f119";
$sic-close: "\f11a";
$sic-codepen-alt: "\f11b";
$sic-codepen: "\f11c";
$sic-comment: "\f11d";
$sic-dribbble: "\f11e";
$sic-edit-alt: "\f11f";
$sic-edit: "\f120";
$sic-ellipsis: "\f121";
$sic-error: "\f122";
$sic-external: "\f123";
$sic-facebook-alt: "\f124";
$sic-facebook: "\f125";
$sic-fast-forward: "\f126";
$sic-feed: "\f127";
$sic-flickr: "\f128";
$sic-format-aside: "\f129";
$sic-format-audio: "\f12a";
$sic-format-chat: "\f12b";
$sic-format-gallery: "\f12c";
$sic-format-image: "\f12d";
$sic-format-link: "\f12e";
$sic-format-quote: "\f12f";
$sic-format-standard: "\f130";
$sic-format-status: "\f131";
$sic-format-video: "\f132";
$sic-github: "\f133";
$sic-googleplay-alt: "\f134";
$sic-googleplay: "\f135";
$sic-googleplus: "\f136";
$sic-heart: "\f137";
$sic-instagram: "\f138";
$sic-iphone: "\f139";
$sic-kebab: "\f13a";
$sic-lastfm: "\f13b";
$sic-link-alt: "\f13c";
$sic-link: "\f13d";
$sic-linkedin: "\f13e";
$sic-loading: "\f13f";
$sic-loop: "\f140";
$sic-mail: "\f141";
$sic-medium: "\f142";
$sic-menu: "\f143";
$sic-minus: "\f144";
$sic-paper: "\f145";
$sic-paperclip: "\f146";
$sic-pause: "\f147";
$sic-person: "\f148";
$sic-phone: "\f149";
$sic-pinterest: "\f14a";
$sic-play: "\f14b";
$sic-playlist: "\f14c";
$sic-plus: "\f14d";
$sic-rdio: "\f14e";
$sic-repeat: "\f14f";
$sic-reply: "\f150";
$sic-restore: "\f151";
$sic-reverbnation: "\f152";
$sic-rewind: "\f153";
$sic-search: "\f154";
$sic-share-alt: "\f155";
$sic-share: "\f156";
$sic-shuffle: "\f157";
$sic-skip-ahead: "\f158";
$sic-skip-back: "\f159";
$sic-slideshare: "\f15a";
$sic-soundcloud: "\f15b";
$sic-spotify: "\f15c";
$sic-stop: "\f15d";
$sic-tag: "\f15e";
$sic-time: "\f15f";
$sic-tumblr: "\f160";
$sic-twitter: "\f161";
$sic-vimeo: "\f162";
$sic-vine: "\f163";
$sic-volume-off: "\f164";
$sic-volume-on: "\f165";
$sic-wordpress: "\f166";
$sic-youtube: "\f167";

// Icon Styles
.sic-amazon:before {
    content: $sic-amazon;
}

.sic-apple:before {
    content: $sic-apple;
}

.sic-arrow-down:before {
    content: $sic-arrow-down;
}

.sic-arrow-left:before {
    content: $sic-arrow-left;
}

.sic-arrow-right:before {
    content: $sic-arrow-right;
}

.sic-arrow-up:before {
    content: $sic-arrow-up;
}

.sic-bandcamp:before {
    content: $sic-bandcamp;
}

.sic-behance:before {
    content: $sic-behance;
}

.sic-bloglovin:before {
    content: $sic-bloglovin;
}

.sic-book:before {
    content: $sic-book;
}

.sic-calendar:before {
    content: $sic-calendar;
}

.sic-camera-alt:before {
    content: $sic-camera-alt;
}

.sic-camera:before {
    content: $sic-camera;
}

.sic-cancel:before {
    content: $sic-cancel;
}

.sic-caret-down:before {
    content: $sic-caret-down;
}

.sic-caret-left:before {
    content: $sic-caret-left;
}

.sic-caret-right:before {
    content: $sic-caret-right;
}

.sic-caret-up:before {
    content: $sic-caret-up;
}

.sic-cart:before {
    content: $sic-cart;
}

.sic-category:before {
    content: $sic-category;
}

.sic-check:before {
    content: $sic-check;
}

.sic-chevron-down:before {
    content: $sic-chevron-down;
}

.sic-chevron-left:before {
    content: $sic-chevron-left;
}

.sic-chevron-right:before {
    content: $sic-chevron-right;
}

.sic-chevron-up:before {
    content: $sic-chevron-up;
}

.sic-close:before {
    content: $sic-close;
}

.sic-codepen-alt:before {
    content: $sic-codepen-alt;
}

.sic-codepen:before {
    content: $sic-codepen;
}

.sic-comment:before {
    content: $sic-comment;
}

.sic-dribbble:before {
    content: $sic-dribbble;
}

.sic-edit-alt:before {
    content: $sic-edit-alt;
}

.sic-edit:before {
    content: $sic-edit;
}

.sic-ellipsis:before {
    content: $sic-ellipsis;
}

.sic-error:before {
    content: $sic-error;
}

.sic-external:before {
    content: $sic-external;
}

.sic-facebook-alt:before {
    content: $sic-facebook-alt;
}

.sic-facebook:before {
    content: $sic-facebook;
}

.sic-fast-forward:before {
    content: $sic-fast-forward;
}

.sic-feed:before {
    content: $sic-feed;
}

.sic-flickr:before {
    content: $sic-flickr;
}

.sic-format-aside:before {
    content: $sic-format-aside;
}

.sic-format-audio:before {
    content: $sic-format-audio;
}

.sic-format-chat:before {
    content: $sic-format-chat;
}

.sic-format-gallery:before {
    content: $sic-format-gallery;
}

.sic-format-image:before {
    content: $sic-format-image;
}

.sic-format-link:before {
    content: $sic-format-link;
}

.sic-format-quote:before {
    content: $sic-format-quote;
}

.sic-format-standard:before {
    content: $sic-format-standard;
}

.sic-format-status:before {
    content: $sic-format-status;
}

.sic-format-video:before {
    content: $sic-format-video;
}

.sic-github:before {
    content: $sic-github;
}

.sic-googleplay-alt:before {
    content: $sic-googleplay-alt;
}

.sic-googleplay:before {
    content: $sic-googleplay;
}

.sic-googleplus:before {
    content: $sic-googleplus;
}

.sic-heart:before {
    content: $sic-heart;
}

.sic-instagram:before {
    content: $sic-instagram;
}

.sic-iphone:before {
    content: $sic-iphone;
}

.sic-kebab:before {
    content: $sic-kebab;
}

.sic-lastfm:before {
    content: $sic-lastfm;
}

.sic-link-alt:before {
    content: $sic-link-alt;
}

.sic-link:before {
    content: $sic-link;
}

.sic-linkedin:before {
    content: $sic-linkedin;
}

.sic-loading:before {
    content: $sic-loading;
}

.sic-loop:before {
    content: $sic-loop;
}

.sic-mail:before {
    content: $sic-mail;
}

.sic-medium:before {
    content: $sic-medium;
}

.sic-menu:before {
    content: $sic-menu;
}

.sic-minus:before {
    content: $sic-minus;
}

.sic-paper:before {
    content: $sic-paper;
}

.sic-paperclip:before {
    content: $sic-paperclip;
}

.sic-pause:before {
    content: $sic-pause;
}

.sic-person:before {
    content: $sic-person;
}

.sic-phone:before {
    content: $sic-phone;
}

.sic-pinterest:before {
    content: $sic-pinterest;
}

.sic-play:before {
    content: $sic-play;
}

.sic-playlist:before {
    content: $sic-playlist;
}

.sic-plus:before {
    content: $sic-plus;
}

.sic-rdio:before {
    content: $sic-rdio;
}

.sic-repeat:before {
    content: $sic-repeat;
}

.sic-reply:before {
    content: $sic-reply;
}

.sic-restore:before {
    content: $sic-restore;
}

.sic-reverbnation:before {
    content: $sic-reverbnation;
}

.sic-rewind:before {
    content: $sic-rewind;
}

.sic-search:before {
    content: $sic-search;
}

.sic-share-alt:before {
    content: $sic-share-alt;
}

.sic-share:before {
    content: $sic-share;
}

.sic-shuffle:before {
    content: $sic-shuffle;
}

.sic-skip-ahead:before {
    content: $sic-skip-ahead;
}

.sic-skip-back:before {
    content: $sic-skip-back;
}

.sic-slideshare:before {
    content: $sic-slideshare;
}

.sic-soundcloud:before {
    content: $sic-soundcloud;
}

.sic-spotify:before {
    content: $sic-spotify;
}

.sic-stop:before {
    content: $sic-stop;
}

.sic-tag:before {
    content: $sic-tag;
}

.sic-time:before {
    content: $sic-time;
}

.sic-tumblr:before {
    content: $sic-tumblr;
}

.sic-twitter:before {
    content: $sic-twitter;
}

.sic-vimeo:before {
    content: $sic-vimeo;
}

.sic-vine:before {
    content: $sic-vine;
}

.sic-volume-off:before {
    content: $sic-volume-off;
}

.sic-volume-on:before {
    content: $sic-volume-on;
}

.sic-wordpress:before {
    content: $sic-wordpress;
}

.sic-youtube:before {
    content: $sic-youtube;
}