Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@charset "utf-8";


// iconfont 配置
// @file:     _config.scss
// @author:   一丝
// @update:   2013-12-10 17:41:06;     
    
// 调用 class 的前缀
$icon-class-prefix: icon- !default;

//给 iconfont 取一个字体名称
$icon-name: uxiconfont !default;
$font-family: "arial" !default;
//iconfont 字体地址 
$icon-src: "http://t.tbcdn.cn/apps/e/brix/fonts/uxiconfont" !default;

//定义icon数据列表
$icons:
  'travel' '\f043',
  'music' '\f04a',
  'search' '\f0023',
  'heart' '\f0043',
  'star' '\f0053';


//* iconfont 相关 mixin
//* @file:     _mixin.scss

/**
 *@ name:        iconfont.css V1.0.0
 *@ author:      一丝(yisibl)
 *@ update:      2013-12-20 14:30:55
 * 1. 防止读屏器读出无意义的图标
 * 2. 防止 OS X 中图标视觉变粗和细节丢失的问题
 * 3. Fiefox 25 开始支持「-moz-osx-font-smoothing:auto(默认)|grayscale」
 * Demo: http://jsbin.com/iWItiQe/2
 */
@mixin font-base-style($name:$font-family){
  font:{
    family:"#{$name}";
    size: 16px;
    style: normal;
    weight:normal;
    variant: normal;
  }
  line-height:1;
  display: inline-block;
  @content;
} 
%icon-base-styles {
  @include font-base-style(){
    color: red;
  };
}

/**
 * 引入 Web font
 * 注意：使用font-face需要 CSS 线上地址和引用的 font 线上地址同域，否则 IE9  会有 CSS3117 问题
 * CSS3117: @font-face failed cross-origin request. Resource access is restricted.
 */

 // 用法
 // 默认：     @include font-face();
 // 自定义：   @include font-face("字体名称","字体路径");
 // 路径结尾不加「/」
@mixin font-face($font-family: $icon-name, $font-src: $icon-src) {
    @font-face {
        font: {
            family: "#{$font-family}";
            weight: normal;
            style: normal;
        }
        src: url("#{$font-src}.eot");///* IE9 */
        src:
            url("#{$font-src}.eot?#iefix") format("embedded-opentype"), // /* IE6-IE8 */
            url("#{$font-src}.woff") format("woff"), // /* Chrome、Firefox */
            url("#{$font-src}.ttf") format("truetype"), // /* Chrome、Firefox、Opera、Safari, Android, iOS 4.2+ */
            url("#{$font-src}.svg##{$font-family}") format("svg"); // /* iOS 4.1- */
    }
}


// 调用字体 mixin
@function match($haystack, $needle) {
    @each $item in $haystack {
        $index: index($item, $needle);
        @if $index {
            $return: if($index == 1, 2, $index);
            @return nth($item, $return);
        }
    }
    @return false;
}

 // 用法
 // 默认：     @include icon();
 // 自定义：   @include icon("字体名称","字体路径");
 // 路径结尾不加「/」

@mixin icon($icon: false, $color: #333, $size: 16px) {
    @if $icon {
        &:before{
            content: match($icons, $icon);
        }
    }
    @if $size {
        font-size: $size;
    }
    @if $color{
        color: $color;
    }
    @extend %icon-base-styles;
    @content; // 追加新的样式规则
}

//是否输出全部iconfont编码
// 输出: @include get-icons(true);
// 不输出: @include get-icons;
@mixin get-icons($all-icons: false) {
    @if $all-icons {
        @each $icon in $icons {
            $name: nth($icon, 1);
            .#{$icon-class-prefix}#{$name} {
                @include icon($name,false,false);
            }
        }
    }
}




@include font-face(arial,xxxxx);

//调用方法
//@include icon(是否显示默认样式, '字符编码');
.iconfont{
    @include icon;
    font-size: 22px;
}

// [class^="#{$icon-class-prefix}"]:before,
// [class*="#{$icon-class-prefix}"]:before {
//     @include icon;
// }

.travel{
    @include icon(travel);
}


/**
 * 生成全部 iconfont    
 */
@include get-icons(true);

SassMeister-output.css

@charset "UTF-8";
/**
 *@ name:        iconfont.css V1.0.0
 *@ author:      一丝(yisibl)
 *@ update:      2013-12-20 14:30:55
 * 1. 防止读屏器读出无意义的图标
 * 2. 防止 OS X 中图标视觉变粗和细节丢失的问题
 * 3. Fiefox 25 开始支持「-moz-osx-font-smoothing:auto(默认)|grayscale」
 * Demo: http://jsbin.com/iWItiQe/2
 */
.iconfont, .travel, .icon-travel, .icon-music, .icon-search, .icon-heart, .icon-star {
  font-family: "arial";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  display: inline-block;
  color: red;
}

/**
 * 引入 Web font
 * 注意：使用font-face需要 CSS 线上地址和引用的 font 线上地址同域，否则 IE9  会有 CSS3117 问题
 * CSS3117: @font-face failed cross-origin request. Resource access is restricted.
 */
@font-face {
  font-family: "arial";
  font-weight: normal;
  font-style: normal;
  src: url("xxxxx.eot");
  src: url("xxxxx.eot?#iefix") format("embedded-opentype"), url("xxxxx.woff") format("woff"), url("xxxxx.ttf") format("truetype"), url("xxxxx.svg#arial") format("svg");
}
.iconfont {
  font-size: 16px;
  color: #333333;
  font-size: 22px;
}

.travel {
  font-size: 16px;
  color: #333333;
}
.travel:before {
  content: "\f043";
}

/**
 * 生成全部 iconfont    
 */
.icon-travel:before {
  content: "\f043";
}

.icon-music:before {
  content: "\f04a";
}

.icon-search:before {
  content: "\f0023";
}

.icon-heart:before {
  content: "\f0043";
}

.icon-star:before {
  content: "\f0053";
}