gulp工作流

 1 var gulp = require(‘gulp‘), 
 2    cssmin = require(‘gulp-minify-css‘),
 3     less = require(‘gulp-less‘),
 4     runSequence = require(‘run-sequence‘),
 5     rename = require("gulp-rename");
 6    changed = require(‘gulp-changed‘);
 7   autoprefixer=require("gulp-autoprefixer");
 8   spriter=require(‘gulp-css-spriter‘);
 9   livereload = require(‘gulp-livereload‘);
10   var sourcemaps = require(‘gulp-sourcemaps‘);
11   var chmod = require(‘gulp-chmod‘);
12 var srcPath = "./src/";
13 var destPath="./dest/";
14 var cssminconfig={
15          compatibility: "ie6,ie7,ie8,+selectors.ie7Hack,+properties.iePrefixHack"
16        };
17 gulp.task(‘cssSprite‘, function () {
18   return gulp.src(destPath+‘style/*.min.css‘)
19    .pipe(spriter({
20             // 生成的spriter的位置
21             ‘spriteSheet‘: ‘dest/style/img_d/imgs.png‘,
22             // 生成样式文件图片引用地址的路径
23             // 如下将生产：backgound:url(../images/sprite20324232.png)
24             ‘pathToSpriteSheetFromCSS‘: ‘img_d/imgs.png‘
25         }))
26   //产出路径
27   .pipe(cssmin(cssminconfig))
28   .pipe(gulp.dest(‘dest/style‘));
29 });
30 gulp.task(‘less‘, function () {
31     var _pipe=gulp.src(srcPath+‘style/*.less‘) 
32       .pipe(less({
33         sourceMap: true
34     }))
35       .pipe(autoprefixer())
36       .pipe(chmod(777))
37       .pipe(sourcemaps.init())
38       .pipe(sourcemaps.write())
39       .pipe(gulp.dest(destPath+‘style‘));
40 
41     _pipe=_pipe.pipe(changed(destPath)).pipe(cssmin(cssminconfig))
42           .pipe(rename(function (path) {
43              console.log(path);
44              path.basename += ‘.min‘;
45           }))
46       
47     return  _pipe.pipe(gulp.dest(destPath+‘style‘))
48 })
49 gulp.task("resource",function(){
50   return gulp.src([srcPath+"**/*.{png,jpg,html,mp3,mp4,gif,flv,swf}"]).pipe(changed(destPath)).pipe(gulp.dest(destPath));
51 });
52 
53 gulp.task("js", function() {
54   var _pipe= gulp.src(srcPath + "**/*.js").pipe(changed(destPath))
55     if(process.env.prod){
56       _pipe=_pipe.pipe(uglify(uglifyConfig));
57     }
58     return _pipe.pipe(gulp.dest(destPath));
59 });
60 gulp.task("reload", function() {
61   livereload.reload();
62 });
63 gulp.task(‘testWatch‘, function () {
64    return gulp.watch([srcPath+"**/*.{js,less}"],["build"])
65 });
66 
67 gulp.task(‘default‘,[‘less‘,‘resource‘,‘js‘,‘testWatch‘]); //定义默认任务
68 
69 gulp.task("build",function(cb){
70     runSequence(["resource","less","js","reload"],cb)
71 });
72 
73 //gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
74 //gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
75 //gulp.dest(path[, options]) 处理完后文件生成路径

 1 @charset "utf-8";
 2 /* CSS Document */
 3 @f1:‘microsoft yahei‘,Simhei;
 4 .wh(@w:0,@h:0){
 5     width:@w;height:@h;
 6 }
 7 .abstl(@top:0;@left:0){
 8     position: absolute;top:@top;left:@left;
 9 }
10 .abstr(@top:0,@right:0){
11     position: absolute;top:@top;right:@right;
12 }
13 .absbl(@bottom:0,@left:0){
14     position: absolute;bottom:@bottom;left:@left;
15 }
16 .absbr(@bottom:0,@right:0){
17     position: absolute;bottom:@bottom;right:@right;
18 }
19 .commonbg(@x:0,@y:0){
20     background: url(img_d/common.png) no-repeat @x @y;
21 }
22 .toh(){
23     white-space:nowrap;
24     text-overflow:ellipsis;
25     -o-text-overflow:ellipsis;
26     overflow: hidden;
27 }
28 .wbk(){
29     word-break: break-all;
30     word-wrap: break-word;
31 }

  1 var gulp = require("gulp");
  2 var babel = require("gulp-babel");
  3 var autoprefixer = require("gulp-autoprefixer");
  4 var sass = require(‘gulp-ruby-sass‘);
  5 var concat = require("gulp-concat");
  6 var cssmin = require(‘gulp-minify-css‘);
  7 var sourcemaps = require(‘gulp-sourcemaps‘);
  8 var uglify = require(‘gulp-uglify‘);
  9 var del = require(‘del‘);
 10 var merge = require("merge-stream");
 11 var rev = require("gulp-rev");
 12 var replace = require("zell-grr");
 13 var eslint = require(‘gulp-eslint‘);
 14 var runSequence = require(‘run-sequence‘);
 15 var through2 = require(‘through2‘);
 16 var rename = require(‘gulp-rename‘);
 17 var zellsprite=require("zellsprite");
 18 var browserSync,reload, filter,needEmittingSassError=false,needsassSourcemap=true,chmod = require(‘gulp-chmod‘);
 19 if (process.env.zellenv) {
 20   filter = require("gulp-filter");
 21   browserSync = require(‘browser-sync‘).create();
 22   reload = browserSync.reload;
 23 }
 24 if(process.env.prod){
 25   needsassSourcemap=false;
 26   needEmittingSassError=true;
 27 }
 28 var srcPath = "./src/";
 29 var destPath = "./dest/";
 30 var commonSrcPath = "../common/src/";
 31 var path = require("path")
 32 var DEBUG = false;
 33 var cssminConfig = {
 34   compatibility: "ie6,ie7,ie8,+selectors.ie7Hack,+properties.iePrefixHack",
 35   roundingPrecision:-1
 36 };
 37 var uglifyConfig = {
 38   warnings: false,
 39   output: {
 40     ascii_only: true,
 41     comments: /author|copyright|license/,
 42   },
 43   compress: {
 44     global_defs: {
 45       DEBUG: DEBUG
 46     }
 47   }
 48 };
 49   if(process.env.zellenv){
 50     browserSync.emitter.on("client:connected",function(){
 51       require("dns").lookup("www.100bt.com",function(e,address){
 52         if(address.search("173")>-1){
 53           browserSync.notify("你在测试环境",1000);
 54           return false;
 55         }
 56         if(address.search("127")>-1){
 57           browserSync.notify("你在本地环境",1000);
 58           return false;
 59         }
 60         browserSync.notify("你在未知的可能是线上的环境因为www.100bt.com->"+address,1000);
 61       })
 62     })
 63     }
 64 del.sync(destPath + "*");
 65 zellsprite.default(gulp,{src:"./spritesrc",dest:"./spritedest",templateFile:"./css.hb"});
 66 gulp.task("sass", function() {
 67   var _pipe=sass([srcPath + "**/*.scss"], {
 68         sourcemap: false,
 69         sourcemap: needsassSourcemap,
 70         emitCompileError: needEmittingSassError
 71       }).pipe(autoprefixer());
 72   // if(process.env.zellenv){
 73     _pipe=_pipe.pipe(chmod(777));
 74   // }
 75 
 76   if(process.env.prod){
 77     _pipe=_pipe.pipe(cssmin(cssminConfig));
 78   }
 79   if(!process.env.prod){
 80     _pipe=_pipe.pipe(sourcemaps.write());
 81   }
 82   _pipe=_pipe.pipe(gulp.dest(destPath));
 83   if (process.env.zellenv) {
 84       _pipe=_pipe.pipe(filter(‘**/*.css‘)) // Filtering stream to only css files
 85       .pipe(reload({
 86         stream: true
 87       }));
 88   }
 89   return _pipe;
 90 });
 91 
 92 gulp.task("css", function() {
 93   var _pipe=gulp.src(srcPath + "**/*.css")
 94     .pipe(autoprefixer())
 95     if(process.env.prod){
 96       _pipe=_pipe.pipe(cssmin(cssminConfig));
 97     }
 98     return _pipe.pipe(gulp.dest(destPath));
 99 });
100 gulp.task("lintjs",function(){
101   var _pipe= gulp.src(srcPath + "**/*.js")
102     _pipe=_pipe.pipe(eslint()).pipe(eslint.format()).pipe(eslint.failAfterError());
103     return _pipe;
104 })
105 gulp.task("lintes",function(){
106   var _pipe= gulp.src(srcPath + "**/*.es")
107     _pipe=_pipe.pipe(eslint({
108     "parserOptions": {
109         "ecmaVersion": 6
110     }
111 })).pipe(eslint.format()).pipe(eslint.failAfterError());
112     return _pipe;
113 })
114 gulp.task("js",["lintjs"], function() {
115   var _pipe= gulp.src(srcPath + "**/*.js")
116   _pipe=_pipe.pipe(chmod(777));
117   if(process.env.prod){
118     _pipe=_pipe.pipe(uglify(uglifyConfig));
119   }
120     return _pipe.pipe(gulp.dest(destPath));
121 });
122 
123 gulp.task("babel",["lintes"], function() {
124   var _pipe= gulp.src(srcPath + "**/*.es")
125     .pipe(babel())
126   // if(process.env.zellenv){
127     _pipe=_pipe.pipe(chmod(777));
128   // }
129     if(process.env.prod){
130       _pipe=_pipe.pipe(uglify(uglifyConfig));
131   }
132     return _pipe.pipe(gulp.dest(destPath));
133 });
134 var i=0;
135 gulp.task("rev", ["makeRevMap","makeLocalRevMap"], function() {
136   var mani = gulp.src("./rev-manifest.json");
137   return gulp.src(destPath + "/**/*.css")
138     .pipe(replace({
139       manifest: mani,
140       modifyUnreved: function(name, base) {
141         var a = path.relative(path.dirname(base), path.resolve("..", name));
142         a = a.replace(/\\/g, "/");
143         return a;
144       },
145       modifyReved: function(name, unrevName, base) {
146         var rev = path.basename(name).split("-").pop().split(".")[0];
147         var a = path.relative(path.dirname(base), path.resolve("..", unrevName)) + "?" + rev;
148         a = a.replace(/\\/g, "/");
149         return a;
150       },
151       dosthwithContent:function(contents,rename,file){
152          var reg=new RegExp(‘(?:\\\(‘+"http://resource.a0bi.com/marketnew/"+rename.unreved+‘\\\))‘,"img");
153                 var rev = path.basename(rename.reved).split("-").pop().split(".")[0];
154                 var _contents=contents.replace(reg,"("+"http://resource.a0bi.com/marketnew/"+rename.unreved+"?"+rev+")");
155                 reg=new RegExp(‘(?:([\‘"])‘+"http://resource.a0bi.com/marketnew/"+rename.unreved+‘\\1)‘,"img");
156                 _contents=_contents.replace(reg,"http://resource.a0bi.com/marketnew/"+rename.unreved+"?"+rev);
157                 return _contents;
158       }
159     }))
160     .pipe(gulp.dest(destPath));
161 });
162 
163 gulp.task("makeRevMap", function() {
164   return gulp.src("../*/dest/**/*.{html,css,js,png,jpg,swf,mp4,mp3,flv,gif,jpeg}")
165     .pipe(rev())
166     .pipe(rev.manifest())
167     .pipe(gulp.dest("./"));
168 });
169 
170 gulp.task("makeLocalRevMap",function(){
171   return gulp.src(destPath + "/**/*.{html,css,js,png,jpg,swf,mp4,mp3,flv,gif,jpeg}")
172     .pipe(rev())
173     .pipe(rev.manifest())
174     .pipe(rename("revmanifestjs.js"))
175     .pipe(through2.obj(function(file, encoding, done) {
176       var content = "var __revmanifestJS=" + String(file.contents);
177       file.contents = new Buffer(content);
178       this.push(file);
179       done();
180     }))
181     .pipe(gulp.dest("./"));
182 });
183 
184 gulp.task("resource", function() {
185   return gulp.src([srcPath + "**/*.{png,jpg,html,mp3,mp4,gif,flv,swf}"]).pipe(gulp.dest(destPath));
186 });
187 gulp.task(‘browser-sync‘, function() {
188   browserSync.init({
189     proxy: "http://www.100bt.com/",
190     // proxy: "http://resource.a0bi.com/",
191     online: false,
192     // open:"ui"
193     notify:true,
194     open:false,
195     rewriteRules: [{
196       match: /localhost:3000/g,
197       fn: function(match) {
198         return ‘bs.100bt.com‘;
199       }
200     }]
201   });
202 });
203 gulp.task("watches",function(){
204   return gulp.watch([srcPath.replace(/^\.\//, "") + "**/*.es"], ["babel"],reload);
205 });
206 gulp.task("watchscss",function(){
207   return gulp.watch([srcPath.replace(/^\.\//, "") + "**/*.scss"], ["sass"]);
208 });
209 gulp.task("watchjsp",function(){
210   return gulp.watch(["E:/projectA/source/gw/WebRoot/**/*.jsp"], browserSync.reload);
211 })
212 gulp.task("watch", function() {
213   if (process.env.zellenv) {
214     // gulp.watch(["E:/projectA/source/gw/WebRoot/**/*.jsp"], browserSync.reload);
215   }
216   // gulp.watch("spriteSrc/**/*.{png,jpg}",["buildSprite"]);
217   return gulp.watch([srcPath.replace(/^\.\//, "") + "**/*.{scss,es}"], ["buildwithoutSprite"]);
218 });
219 
220 gulp.task("copySprite",function(){
221   return gulp.src("spritedest/**/*.{png,jpg}").pipe(gulp.dest(destPath+"scss/spritedest/"));
222 });
223 gulp.task("buildSprite",function(cb){
224   runSequence("sprite","copySprite",cb);
225 });
226 console.log("sd")
227 gulp.task("default", function(cb) {
228   if (process.env.zellenv) {
229     console.log("helloZellEnv");
230     runSequence("build", "watches", "watchscss","watchjsp","browser-sync", cb);
231   } else {
232     runSequence("build", "watches","watchscss", cb);
233   }
234 });
235 
236 gulp.task("concatConfig", function() {
237   var _pipe=gulp.src([‘./revmanifestjs.js‘, "./dest/es/config.js","../common/dest/es/_beforerequire.js"])
238     .pipe(concat("rev-config.js"));
239     if(process.env.prod){
240     _pipe=_pipe.pipe(uglify(uglifyConfig))
241     }
242     return _pipe.pipe(gulp.dest("./dest/es/"));
243 });
244 
245 gulp.task("buildwithoutSprite",function(cb){
246   del.sync(destPath + "*");
247   if(process.env.prod){
248     runSequence("copySprite",["sass", "babel", "resource", "js", "css"], "rev", "concatConfig", cb);
249   }else{
250     /*本地环境去掉耗时的而无太大用途的公共资源md
251     5和加版本号的操作*/
252     runSequence("copySprite",["sass", "babel", "resource", "js", "css"], "makeLocalRevMap", "concatConfig", cb);
253   }
254 });
255 
256 gulp.task("build", function(cb) {
257   del.sync(destPath + "*");
258   if(process.env.prod){
259     runSequence(‘buildSprite‘,["sass", "babel", "resource", "js", "css"], "rev", "concatConfig", cb);
260   }else{
261     /*本地环境去掉耗时的而无太大用途的公共资源md
262     5和加版本号的操作*/
263     runSequence(‘buildSprite‘,["sass", "babel", "resource", "js", "css"], "makeLocalRevMap", "concatConfig", cb);
264   }
265 });
266 

  1 @charset "utf-8";
  2 //                                                __
  3 //                                               /\ \__
  4 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
  5 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`  6 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
  7 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____  8 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
  9 
 10 @mixin when($alias) {
 11   @if $alias == mobile {
 12     @media (max-width: $mobileBreakPointWidth) {
 13       @content;
 14     }
 15   }
 16   @if $alias == pc {
 17     @media (min-width: ($mobileBreakPointWidth + 1px)) {
 18       @warn "这个when(pc)接口已经废弃请勿使用,在base.jsp里面实现了在html里面加class的操作，可以考虑使用.html--inpc .html--inmobile实现相关功能";
 19       @content;
 20     }
 21   }
 22   @if $alias == pcnew{
 23     @if &{//存在上下文就unshift
 24       @include unshiftClass(".html--inpc"){
 25         @content;
 26       };
 27     } @else{//否则是直接套一个类在外面
 28       .html--inpc {
 29           @content;
 30       }
 31     }
 32   }
 33   @if $alias == pcmain {
 34     @media (max-width: $pcMainWidth) {
 35       @content;
 36     }
 37   }
 38 }
 39 
 40 //                                                __
 41 //                                               /\ \__
 42 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
 43 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__` 44 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
 45 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____ 46 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
 47 //2个等级的字体
 48 
 49 @mixin setfontfamily($type) {
 50   @if $type == 1 {
 51     font-family: $fontFamily_normal;
 52   }
 53 
 54   @if $type == 2 {
 55     font-family: $fontFamily_special;
 56   }
 57 }
 58 
 59 @mixin sethlhSame($height){
 60   height:$height;
 61   line-height:$height;
 62 }
 63 
 64 @mixin sethlh($type){
 65   @if $type == 1 {
 66     height:$fontSize_small * 2;
 67     line-height:$fontSize_small * 2;
 68     @include when(mobile) {
 69       height:$fontSize_smallrem * 2;
 70       line-height:$fontSize_smallrem * 2;
 71     }
 72   }
 73 
 74   @if $type == 2 {
 75     height: $fontSize_normal * 2;
 76     line-height: $fontSize_normal * 2;
 77 
 78     @include when(mobile) {
 79       height: $fontSize_normalrem * 2;
 80       line-height: $fontSize_normalrem * 2;
 81     }
 82   }
 83 
 84   @if $type == 3 {
 85     height: $fontSize_normal2 * 2;
 86     line-height: $fontSize_normal2 * 2;
 87 
 88     @include when(mobile) {
 89       height: $fontSize_normal2rem * 2;
 90       line-height: $fontSize_normal2rem * 2;
 91     }
 92   }
 93 
 94   @if $type == 4 {
 95     height: $fontSize_title_normal * 2;
 96     line-height: $fontSize_title_normal * 2;
 97 
 98     @include when(mobile) {
 99       height: $fontSize_title_normalrem * 2;
100       line-height: $fontSize_title_normalrem * 2;
101     }
102   }
103 
104 
105   @if $type == 5 {
106     height: $fontSize_title_large * 2;
107     line-height: $fontSize_title_large * 2;
108 
109     @include when(mobile) {
110       height: $fontSize_title_largerem * 2;
111       line-height: $fontSize_title_largerem * 2;
112     }
113   }
114 }
115 
116 //5个等级的字体大小
117 @mixin setfontsize($type,$force:false) {
118   @if $type == 1 {
119     font-size: #{$fontSize_small}(if($force,#{"!important"},#{""}));
120 
121     @include when(mobile) {
122       font-size: #{$fontSize_small}(if($force,#{"!important"},#{""}));
123       font-size: #{$fontSize_smallrem}(if($force,#{"!important"},#{""}));
124     }
125   }
126 
127   @if $type == 2 {
128     font-size: #{$fontSize_normal}(if($force,#{"!important"},#{""}));
129 
130     @include when(mobile) {
131       font-size: #{$fontSize_normal}(if($force,#{"!important"},#{""}));
132       font-size: #{$fontSize_normalrem}(if($force,#{"!important"},#{""}));
133     }
134   }
135 
136   @if $type == 3 {
137     font-size: #{$fontSize_normal2}(if($force,#{"!important"},#{""}));
138 
139     @include when(mobile) {
140       font-size: #{$fontSize_normal2}(if($force,#{"!important"},#{""}));
141       font-size: #{$fontSize_normal2rem}(if($force,#{"!important"},#{""}));
142     }
143   }
144 
145   @if $type == 4 {
146     font-size: #{$fontSize_title_normal}(if($force,#{"!important"},#{""}));
147 
148     @include when(mobile) {
149       font-size: #{$fontSize_title_normal}(if($force,#{"!important"},#{""}));
150       font-size: #{$fontSize_title_normalrem}(if($force,#{"!important"},#{""}));
151     }
152   }
153 
154 
155   @if $type == 5 {
156     font-size: #{$fontSize_title_large}(if($force,#{"!important"},#{""}));
157 
158     @include when(mobile) {
159       font-size: #{$fontSize_title_large}(if($force,#{"!important"},#{""}));
160       font-size: #{$fontSize_title_largerem}(if($force,#{"!important"},#{""}));
161     }
162   }
163 }
164 
165 //                                                __
166 //                                               /\ \__
167 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
168 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`169 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
170 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____171 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
172 
173 @mixin toe($isscroll:false) {
174   //文字省略?
175   overflow: hidden !important;
176   @if $isscroll==true {overflow-x: scroll !important;}
177   white-space: nowrap !important;
178   text-overflow: ellipsis !important;
179 }
180 
181 @mixin toeline($linenumb:1) {
182   display:block;
183   overflow: hidden !important;
184   text-overflow: ellipsis !important;
185   -webkit-line-clamp: $linenumb;
186   display: -webkit-box;
187   -webkit-box-orient: vertical;
188 }
189 //                                                __
190 //                                               /\ \__
191 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
192 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`193 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
194 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____195 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
196 
197 @mixin textCenter {
198   //文字居中
199   text-align: center !important;
200 }
201 
202 //                                                __
203 //                                               /\ \__
204 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
205 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`206 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
207 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____208 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
209 
210 @mixin blockCenter {
211   //块居?
212   margin-left: auto !important;
213   margin-right: auto !important;
214 }
215 
216 //                                                __
217 //                                               /\ \__
218 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
219 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`220 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
221 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____222 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
223 
224 @mixin siteColorConfig {
225   @include when(mobile){
226     ::-webkit-scrollbar-track-piece{
227       background-color:#fff;
228       -webkit-border-radius:3;
229     }
230     ::-webkit-scrollbar{
231       width:0px;
232       height:0px;
233     }
234     ::-webkit-scrollbar-thumb{
235       height:1px;
236       background-color:#999;
237       -webkit-border-radius:7px;
238       outline:2px solid #fff;
239       outline-offset:-2px;
240       border: 2px solid #fff;
241     }
242   };
243   ::selection {
244     background: $bgc_selection;
245     color: $color_selectioin;
246   }
247 
248   //站点通用配置
249   //链接颜色
250   html{background-color: #fff;}
251   *{
252     outline:none;
253     border:none;
254   }
255   a {
256 
257     color: $color_link;
258     text-decoration: none;
259     &:hover {
260       color: $color_link__Hover;
261       text-decoration: underline;
262     }
263   }
264 
265   ul, ol, dl {
266     padding: 0;
267   }
268 
269   li {
270     list-style: none;
271   }
272 
273   //全局字体和行高设?
274   html {
275     line-height: 1;
276     font-family: $fontFamily_normal;
277 
278     @include setfontsize(2);
279   }
280   .justPC{
281   @include when(mobile){
282     display: none!important;
283   };
284 }
285 
286 .justMobileB{
287   @include when(pcnew){
288     display: none!important;
289   };
290   @include when(mobile){
291     display: block;
292   };
293 }
294 
295 .justMobileIB{
296   @include when(pcnew){
297     display: none!important;
298   };
299   @include when(mobile){
300     display: inline-block;
301   };
302 }
303 .justMobileI{
304   @include when(pcnew){
305     display: none!important;
306   };
307   @include when(mobile){
308     display:inline;
309   };
310 }
311 }
312 
313 //                                                __
314 //                                               /\ \__
315 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
316 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`317 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
318 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____319 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
320 
321 @mixin layout-w-1-2 {
322   width: percentage(1 / 2);
323   box-sizing: border-box;
324 }
325 
326 @mixin layout-w-1-3 {
327   width: percentage(1 / 3);
328   box-sizing: border-box;
329 }
330 
331 @mixin layout-w-2-3 {
332   width: percentage(2 / 3);
333   box-sizing: border-box;
334 }
335 
336 @mixin layout-w-1-4 {
337   width: percentage(1 / 4);
338   box-sizing: border-box;
339 }
340 
341 @mixin layout-w-3-4 {
342   width: percentage(3 / 4);
343   box-sizing: border-box;
344 }
345 
346 @mixin layout-w-1-5 {
347   width: percentage(1 / 5);
348   box-sizing: border-box;
349 }
350 
351 @mixin layout-w-2-5 {
352   width: percentage(2 / 5);
353   box-sizing: border-box;
354 }
355 
356 @mixin layout-w-3-5 {
357   width: percentage(3 / 5);
358   box-sizing: border-box;
359 }
360 
361 @mixin layout-w-4-5 {
362   width: percentage(4 / 5);
363   box-sizing: border-box;
364 }
365 @mixin layout-w-1-6 {
366   width: percentage(1 / 6);
367   box-sizing: border-box;
368 }
369 @mixin layout-w-1-7 {
370   width: percentage(1 / 7);
371   box-sizing: border-box;
372 }
373 @mixin layout-w-2-7 {
374   width: percentage(2 / 7);
375   box-sizing: border-box;
376 }
377 @mixin layout-w-3-7 {
378   width: percentage(3 / 7);
379   box-sizing: border-box;
380 }
381 @mixin layout-w-2-9 {
382   width: percentage(2 / 9);
383   box-sizing: border-box;
384 }
385 
386 //                                                __
387 //                                               /\ \__
388 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
389 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`390 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
391 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____392 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
393 
394 //这个可以这样?
395 // <div class="ct-container2">容器
396 //   <span class="ct-content">！！！！这个必须是span！！！！
397 //     <div class="maxwidth400"这个必须是inlineblock如果要自动水平居中的?<h1>Some text</h1><p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said?Did ye see anything looking like men going towards that ship a while ago?"</p></div>
398 //   </span><b class="ct-faker"></b>这个必须写出?
399 // </div>
400 //.ct-container2{@include center-tablecelinline(800,400)}
401 //但是如果内容大过一屏的话就只能在大过一屏的大内容块里面居中所以更加通用的弹窗用不了这个东西
402 @mixin center-tablecellinline($width, $height) {
403   & {
404     width: if(unitless($width), #{$width}px, $width);
405     height: if(unitless($height), #{$height}px, $height);
406     display: table;
407     text-align: center;
408 
409     .ct-content {
410       display: table-cell;
411       vertical-align: middle;
412       *display: inline-block;
413     }
414 
415     .ct-faker {
416       display: inline-block;
417       height: 100%;
418       vertical-align: middle;
419     }
420   }
421 }
422 
423 //                                                __
424 //                                               /\ \__
425 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
426 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`427 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
428 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____429 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
430 
431 @mixin bgrgba($args...) {
432   @if type-of(nth($args, 1)) == "color" {
433     @at-root{
434       .btbuild_rgba &{
435           background-color: rgba(nth($args, 1), nth($args, 2));
436       }
437       .btbuild_no-rgba &{
438         filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startcolorstr=#{ie-hex-str(rgba(nth($args, 1), nth($args, 2)))},endcolorstr=#{ie-hex-str(rgba(nth($args, 1), nth($args, 2)))});
439       }
440     }
441   }
442 
443   @if type-of(nth($args, 1)) == "number" {
444     @at-root{
445       .btbuild_rgba &{
446         background-color: rgba(nth($args, 1), nth($args, 2), nth($args, 3), nth($args, 4));
447       }
448       .btbuild_no-rgba &{
449         filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘true‘,startcolorstr=#{ie-hex-str(rgba(nth($args, 1), nth($args, 2), nth($args, 3), nth($args, 4)))},endcolorstr=#{ie-hex-str(rgba(nth($args, 1), nth($args, 2), nth($args, 3), nth($args, 4)))});
450       }
451     }
452   }
453 }
454 
455 //                                                __
456 //                                               /\ \__
457 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
458 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`459 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
460 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____461 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
462 
463 @mixin float($side) {
464   float: unquote($side);
465   display: inline-block;
466 }
467 
468 //                                                __
469 //                                               /\ \__
470 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
471 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`472 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
473 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____474 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
475 
476 @mixin clearfix {
477   display: block;
478   *zoom: 1;
479 
480   &:after {
481     content: "\20";
482     display: block;
483     height: 0;
484     clear: both;
485     visibility: hidden;
486     overflow: hidden;
487   }
488 }
489 
490 //                                                __
491 //                                               /\ \__
492 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
493 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`494 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
495 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____496 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
497 
498 @mixin opacity($opacity) {
499   opacity: $opacity;
500   filter: alpha(opacity = $opacity * 100);
501 }
502 
503 //                                                __
504 //                                               /\ \__
505 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
506 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`507 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
508 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____509 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
510 
511 @mixin min-height($height) {
512   min-height: $height;
513   height: auto !important;
514   _height: $height;
515 }
516 
517 @mixin min-width($width) {
518   min-width: $width;
519   width: auto !important;
520   _width: $width;
521 }
522 
523 @mixin max-height($height) {
524   max-height: $height;
525   height: auto !important;
526   _height: $height;
527 }
528 
529 @mixin max-width($width) {
530   max-width: $width;
531   width: auto !important;
532   _width: $width;
533 }
534 
535 //                                                __
536 //                                               /\ \__
537 //   ____     __   _____      __     _ __    __  \ \ ,_\    __
538 //  /‘,__\  /‘__`\/\ ‘__`\  /‘__`\  /\`‘__\/‘__`\ \ \ \/  /‘__`539 // /\__, `\/\  __/\ \ \L\ \/\ \L\.\_\ \ \//\ \L\.\_\ \ \_/\  __/
540 // \/\____/\ \____\\ \ ,__/\ \__/.\_\\ \_\\ \__/.\_\\ \__\ \____541 //  \/___/  \/____/ \ \ \/  \/__/\/_/ \/_/ \/__/\/_/ \/__/\/____/
542 
543 // div.logo {
544 //   background: url("logo.png") no-repeat;
545 //   @include image-2x("logo2x.png", 100px, 25px);
546 // }
547 
548 // outputing
549 
550 // div.logo {
551 //   background: url("logo.png") no-repeat;
552 // }
553 // @media (min--moz-device-pixel-ratio: 1.3),
554 //        (-o-min-device-pixel-ratio: 2.6 / 2),
555 //        (-webkit-min-device-pixel-ratio: 1.3),
556 //        (min-device-pixel-ratio: 1.3),
557 //        (min-resolution: 1.3dppx) {
558 //         div.logo {
559 //             background-image: url("logo2x.png");
560 //             background-size: 100px 25px;
561 //         }
562 // }
563 @mixin image-2x($image, $width, $height) {
564   @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
565     /* on retina, use image that‘s scaled by 2 */
566     background-image: url($image);
567     background-size: $width $height;
568   }
569 }
570 
571 // .pop {
572 //   background-color: red;
573 //   position: relative;
574 //   float: left;
575 //   padding: 20px;
576 
577 //   .hello {
578 //     top: -8px;
579 
580 //     @include triangle(up, 8px, red, white);
581 //   }
582 // }
583 
584 // <div class="pop"><div class="hello"></div>hellomynameis</div>
585 
586 @mixin triangle($direction, $size: 6px, $color: #222, $color2: transparent) {
587   content: ‘‘;
588   display: block;
589   position: absolute;
590   height: 0;
591   width: 0;
592   overflow: hidden;
593   border:0;
594   @if $direction == "up" {
595     border-bottom: $size solid $color;
596     border-left: (3 / 4 * $size) solid $color2;
597     border-right: (3 / 4 * $size) solid $color2;
598   }
599   @else if $direction == "down" {
600     border-top: $size solid $color;
601     border-left: (3 / 4 * $size) solid $color2;
602     border-right: (3 / 4 * $size) solid $color2;
603   }
604   @else if $direction == "left" {
605     border-top: (3 / 4 * $size) solid $color2;
606     border-bottom: (3 / 4 * $size) solid $color2;
607     border-right: $size solid $color;
608   }
609   @else if $direction == "right" {
610     border-top: (3 / 4 * $size) solid $color2;
611     border-bottom: (3 / 4 * $size) solid $color2;
612     border-left: $size solid $color;
613   }
614 }
615 
616 @mixin imgAlpha($absurl){
617   background:url($absurl) no-repeat;
618   _background-image:none;
619   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘$absurl‘);
620 }
621 
622 @mixin abstl($t:0,$l:0){position: absolute!important;top:$t;left:$l;right:auto!important;bottom:auto!important;}
623 @mixin abstr($t:0,$r:0){position: absolute!important;top:$t;left:auto!important;right:$r;bottom:auto!important;}
624 @mixin absbl($l:0,$b:0){position: absolute!important;top:auto!important;left:$l;right:auto!important;bottom:$b;}
625 @mixin absbr($b:0,$r:0){position: absolute!important;top:auto!important;left:auto!important;right:$r;bottom:$b;}
626 
627 @mixin wh($w,$h) {
628   width: $w;
629   height: $h
630 }
631 @mixin h-lh($h){
632   height: $h;
633   line-height: $h
634 }
635 @mixin mainWidget($width:1000px){
636   width: $width;margin: 0 auto;
637 }
638 @mixin pa{position:absolute;}
639 @mixin pr{position:relative;}
640 @mixin toh{white-space:nowrap;
641   text-overflow:ellipsis;
642   -o-text-overflow:ellipsis;
643   overflow: hidden;}
644 @mixin wbk{
645   word-break: break-all;
646   word-wrap: break-word;
647 }
648 @mixin dibWrap{font-size:0;*word-spacing:-1px;}
649 @mixin dib{font-size: 12px;
650     letter-spacing: normal;
651     word-spacing: normal;
652     vertical-align:top;
653      display: inline-block;
654     *display:inline;
655     *zoom:1;
656     }
657 //日后补上sass生成sprite获取位置的办?
658 // @mixin mobileicon($iconwidth,$iconheight,$destWidth,$destHeight){
659 //     $height:(50/12/2);
660 //     $width:(50/12/2) * (115/41);
661 //     $xscale:$width;
662 //     line-height: $height;
663 //     @include wh($width#{rem},$height#{rem});
664 //     background-size:$xscale#{rem} auto;
665 // }
666 
667 @mixin noinlinespace {
668     font-size: 0;
669     -webkit-text-size-adjust:none;
670 }
671 
672 @function calmobile($n) {
673   @return #{($n/12/2)}rem;
674 }
675 
676 @function ncalmobile($n) {
677   @return ($n/12/2)*1rem;
678 }
679 
680 @mixin fontsetting($size,$lineheight,$msize:null,$mlineheight:null,$color:null,$hcolor:null) {
681   font-size: if(unitless($size),#{$size}px,$size);/*pc端支持有没有px单位*/
682   @if (unitless($lineheight) and $lineheight >= 12){
683     //假定没有单位且小于12有可能用行高倍数来做so...
684     line-height: #{$lineheight}px;
685   }@else{
686     line-height: $lineheight;
687   }
688   @if ($msize != null and $mlineheight != null) {
689     @include when(mobile){
690       font-size: calmobile($msize);/*m只支持无单位*/
691       @if ($mlineheight >= 24){
692         //假定没有单位且小于12有可能用行高倍数来做so...
693         line-height: calmobile($mlineheight);
694       }@else{
695         line-height: $mlineheight;
696       }
697     };
698   }
699   @if ($color != null) {
700     color:$color;
701   }
702   @if ($hcolor != null) {
703     &:hover{color:$hcolor;}
704   }
705 }
706 @function getbgpct($iconlength,$imgposition,$imglength){
707   @if $imgposition == 0 {
708     @return 0;
709   }
710   @return percentage(($imgposition)/($imglength - $iconlength));
711 }
712 @mixin bgp($imgw,$imgh,$ofx,$ofy,$bgw,$bgh) {
713   background-position:-$ofx#{px} -$ofy#{px};//ie某些认不出两位小数的精确度百分比so
714   @include when(mobile){
715     background-position:getbgpct($imgw,$ofx,$bgw) getbgpct($imgh,$ofy,$bgh);
716     background-size:percentage($bgw / $imgw) percentage($bgh / $imgh);
717   };
718 }
719 @mixin addCommonInnerBorder($width:1px,$color:#000,$opacity:0.1){
720   &{
721     position: relative;
722   }
723   &:after{
724     content:" ";
725     position: absolute;
726     top: $width;
727     left: $width;
728     right: $width;
729     bottom: $width;
730     outline: $width solid;
731     @include unshiftClass(".btbuild_rgba"){
732       outline-color: rgba($color, $opacity);
733     };
734     @include unshiftClass(".btbuild_no-rgba"){
735       outline-color:lighten($color, 50%);
736     };
737   }
738 }
739 @mixin addCommonImgBrighter(){
740   &{
741     position: relative;
742   }
743   &:before{
744     display: none;
745     content:" ";
746     position: absolute;
747     top: 0px;
748     left: 0px;
749     right: 0px;
750     bottom: 0px;
751     background-image: url(http://resource.a0bi.com/marketnew/common/dest/scss/img_s/alpha20.png);
752   }
753   &:hover:before{
754     display: block;
755   }
756 }
757 @mixin animated ($duration:1s,$count:infinite){
758     animation-duration: $duration;
759     animation-fill-mode: both;
760     animation-iteration-count: $count;
761 }
762 @mixin animatePulse_scale($scale:1.01,$duration:2s) {
763     @include animated($duration:$duration);
764     animation-name: pulse;
765   @at-root{
766       @keyframes pulse {
767         0% {
768             transform: scale3d(1,1,1)
769         }
770         50% {
771             transform: scale3d($scale,$scale,$scale)
772         }
773         100% {
774             transform: scale3d(1,1,1)
775         }
776     }
777   }
778 }
779 
780 //                             ___    ___    __
781 //                           /\_ \  /\_ \  /\ 782 //   ____    ___   _ __   ___\//\ \ \//\ \ \ \ \____     __     _ __
783 //  /‘,__\  /‘___\/\`‘__\/ __`\\ \ \  \ \ \ \ \ ‘__`\  /‘__`\  /\`‘__784 // /\__, `\/\ \__/\ \ \//\ \L\ \\_\ \_ \_\ \_\ \ \L\ \/\ \L\.\_\ \ \/
785 // \/\____/\ \____\\ \_\\ \____//\____\/\____\\ \_,__/\ \__/.\_\\ \_786 //  \/___/  \/____/ \/_/ \/___/ \/____/\/____/ \/___/  \/__/\/_/ \/_/
787 
788 
789 @mixin scrollbar-button($char,$color) {
790     background-image: url("data:image/svg+xml;utf8,<svg xmlns=‘http://www.w3.org/2000/svg‘ version=‘1.1‘ height=‘12px‘ width=‘12px‘><text x=‘0‘ y=‘12‘ fill=‘#{$color}‘ font-size=‘12‘>#{$char}</text></svg>");
791 }
792 
793 @mixin scrollbar-buttons($color) {
794     &:vertical:decrement {
795         @include scrollbar-button("▲", $color);
796     }
797     &:vertical:increment {
798         @include scrollbar-button("▼", $color);
799     }
800     &:horizontal:decrement {
801         @include scrollbar-button("?", $color);
802     }
803     &:horizontal:increment {
804         @include scrollbar-button("?", $color);
805     }
806 }
807 
808 @mixin initscrollbar-buttons{
809   ::-webkit-scrollbar-button {
810      & {
811         background-repeat: no-repeat;
812         height: 15px;
813         width: 15px;
814         @include scrollbar-buttons(#535353);
815 
816         &:vertical:decrement {
817             background-position: 0 -2px;
818         }
819         &:vertical:increment {
820             background-position: 0 1px;
821         }
822         &:horizontal:decrement {
823             background-position: 0 -2px;
824         }
825         &:horizontal:increment {
826             background-position: 3px -2px;
827         }
828 
829 
830         &:hover,
831         &:focus {
832             background-color: #c0c0c0;
833         }
834         &:active {
835             background-color: #7a7a7a;
836             @include scrollbar-buttons(#cbcbcb);
837         }
838     }
839 
840     // Dark scrollbars
841     .platform-win.dark & {
842         @include scrollbar-buttons(#ababab);
843 
844         &:hover,
845         &:focus {
846             background-color: #595959;
847         }
848         &:active {
849             background-color: #a9a9a9;
850             @include scrollbar-buttons(#000);
851         }
852     }
853 }
854 }
855 
856 @mixin addValignHelper() {
857   .valignHelper{
858     display: inline-block;
859     height: 100%;
860     vertical-align: middle;
861   }
862 }
863 
864 @mixin dimension($w,$h,$mw:null,$mh:null) {
865     width:if(unitless($w),$w#{px},$w);
866     height:if(unitless($h),$h#{px},$h);
867     @if($mw!=null){
868       @include when(mobile){
869         width:if(unitless($mw),calmobile($mw),$mw);
870         height:if(unitless($mh),calmobile($mh),$mh);
871       };
872     }
873 }
874 
875 @mixin pos($args...){
876   /**
877    * 4个重载
878    * pos(topleftrightbottom);
879    * pos(top,left);
880    * pos(x,y,zeropoint);
881    * pos(top,right,botom,left);
882    * usage:pos(20px)
883    *       pos(300px,200px)
884    *       pos(20px,40px,br);
885    *       pos(40px,auto,auto 30px);
886    */
887   $temp_pos_length:length($args);
888   $oneParam:if($temp_pos_length>=1,nth($args, 1),null);
889   $twoParam:if($temp_pos_length>=2,nth($args, 2),null);
890   $threeParam:if($temp_pos_length>=3,nth($args,3),null);
891   $fourParam:if($temp_pos_length>=4,nth($args, 4),null);
892   @if($temp_pos_length==1){
893     top:$oneParam;
894     right:$oneParam;
895     bottom:$oneParam;
896     left:$oneParam;
897   }@else if($temp_pos_length==2){
898     top:$oneParam;
899     left:$twoParam;
900   }@else if($temp_pos_length==3){
901     @if($threeParam==tl){
902       top:$oneParam;
903       left:$twoParam;
904     }@else if($threeParam==tr){
905       top:$oneParam;
906       right:$twoParam;
907     }@else if($threeParam==bl){
908       bottom:$oneParam;
909       left:$twoParam;
910     }@else if($threeParam==br){
911       bottom:$oneParam;
912       right:$twoParam;
913     }
914   }@else if($temp_pos_length==4){
915     top:$oneParam;
916     right:$twoParam;
917     bottom:$threeParam;
918     left:$fourParam;
919   }
920 }
921 
922 @mixin commonmorebtn() {
923     display: block;
924     height:calmobile(50);
925     @include fontsetting(14,14,24,50,#f0f0f0);
926     background-color: #ccc;
927     text-align: center;
928     margin:calmobile(40) 0 calmobile(30);
929 }
930 @mixin unshiftClass($prefixClass,$isAnd:false) {
931   @at-root{
932   @if ($isAnd==true) {
933     #{$prefixClass}#{&}{
934       @content;
935     }
936   }@else{
937     #{$prefixClass} &{
938         @content;
939       }
940     }
941 }
942 }
943 @mixin vw() {
944     -webkit-writing-mode: vertical-rl;
945     -ms-writing-mode: tb-rl;
946     writing-mode: vertical-rl;
947     *writing-mode: tb-rl;/* IE 写法 */
948     unicode-bidi : bidi-override;
949 }
950 
951 @mixin addMiddleLine($color:red) {
952   position: relative;
953   &:before{
954     content:"";
955     top:50%;
956     left:0;
957     right:0;
958     height:1px;
959     background-color: $color;
960     position: absolute;
961     z-index: 1;
962   }
963 }
964 @mixin mts($margin:0) {
965   @include when(mobile){
966     margin-top: $margin#{px};
967   };
968   @include when(pcnew){
969     margin-top: calmobile($margin);
970   };
971 }
972 @mixin mrs($margin:0) {
973   @include when(mobile){
974     margin-right: $margin#{px};
975   };
976   @include when(pcnew){
977     margin-right: calmobile($margin);
978   };
979 }
980 @mixin mbs($margin:0) {
981   @include when(mobile){
982     margin-bottom: $margin#{px};
983   };
984   @include when(pcnew){
985     margin-bottom: calmobile($margin);
986   };
987 }
988 @mixin pbs($margin:0) {
989   @include when(mobile){
990     padding-bottom: $margin#{px};
991   };
992   @include when(pcnew){
993     padding-bottom: calmobile($margin);
994   };
995 }

 1 @charset "utf-8";
 2 //站点通用变量
 3 
 4 //背景颜色
 5 $bgc_default:#fff;
 6 
 7 //通用小字号
 8 $fontSize_small:12px;
 9 $fontSize_smallrem:1rem;
10 
11 //正文字号
12 $fontSize_normal:14px;
13 $fontSize_normalrem:1.1666rem;
14 
15 //正文字号2
16 $fontSize_normal2:16px;
17 $fontSize_normal2rem:1.333333rem;
18 
19 //标题字号
20 $fontSize_title_normal:18px;
21 $fontSize_title_normalrem:1.5rem;
22 
23 //大标题字号
24 $fontSize_title_large:24px;
25 $fontSize_title_largerem:2rem;
26 
27 //通用正文字体宋体
28 $fontFamily_normal:Tahoma,Arial;
29 
30 //通用标题或美观字体微软雅黑
31 $fontFamily_special:微软雅黑,黑体;
32 
33 //默认字体颜色
34 $fontColor_default:#000;
35 
36 //默认链接颜色
37 $color_link:#f60;
38 
39 //默认链接已过颜色
40 $color_link__Hover:#f60;
41 $color_lightest:#999;
42 $color_light:#666;
43 $color_dark:#333;
44 
45 
46 //响应式的断点
47 // $mobileBreakPointWidth:414px;
48 $mobileBreakPointWidth:540px;
49 // $mobileBreakPointWidth:768px;
50 //pc主要区域的宽度
51 $pcMainWidth:1000px;
52 
53 //选择区域背景
54 $bgc_selection:#f60;
55 //选择区域字体颜色
56 $color_selectioin:#fff;