github : https://github.com/uustoboy/base_mixins ( 有坑慎用 )
项目截图:
_base_mixins.scss 混合宏的引入文件;
_setting_mixins.scss 设置默认参数文件;
_template_mixins.scss 模板混合宏文件(引入template全部文件，其实还没有完全开发完成有待成长！~~);
_utensil_mixins.scss 基础混合宏文件 (引入utilities全部文件);
utilities引入文件夹;
_animation.scss css3动画基础的混合宏
_background.scss 背景图的混合宏
_block.scss display的混合宏
_clear.scss 浮动的混合宏
_css3.scss css3基础的混合宏
_fonts.scss 字体的混合宏
_function.scss scss方法函数
_group.scss 简写组合的混合宏
_other.scss 其他的混合宏
_position.scss 定位的混合宏
_rem.scss 转rem和转rpx的方法函数
_resetpack.scss 默认打包的混合宏
_size.scss 宽高的混合宏
_text.scss 文字的混合宏
template引入文件夹;
_round.scss 圆形模板混合宏
_triangle.scss 三角模板混合宏
API:
_setting_mixins.scss可以设置：
@charset "UTF-8";
//全局设置
//版本号:
$version : 0.0.0;
//兼容老版ie;
$support-for-ie : true;
//css3前缀;
$vendors : webkit moz ms o; //csss前缀;
$prefixWebkit : true !default; //谷歌前缀:o前缀
$prefixMozilla : true !default; //火狐前缀:moz前缀
$prefixMicrosoft : true !default; //IE前缀:ms前缀
$prefixOpera : true !default; //opera前缀:o前缀
$prefixNo : false !default; //默认;
//单位;
$unit : px;
//移动端默认单位大小;
$designWidth : 640;
//微信小程序默认单位大小;
$wxDesignWidth : 750;
动画混合宏(_animation.scss):
keyframes //ss3动画,只能写在调用页面,配合.css3( @style,@frames )使用;
animation //animation动画;
animation-name //animation动画名称;
animation-duration //animation动画成一个周期所需要的时间;
animation-timing-function //animation动画速度形式;
animation-iteration-count //animation动画播放次数;
animation-direction //animation动画轮流反向播放动画;
animation-play-state //animation动画"播放"或"暂停";
animation-delay //animation动画延迟时间设置;
animation-fill-mode //animation动画运动完成后的状态设置;
背景图片混合宏(_background.scss):
bg //设置背景;
bgsize //设置background-size;
bgclip //设置background-clip;
bgorigin //设置background-origin;
bgposition //设置background-position;
bgc //设置背景颜色;
块混合宏(_block.scss):
block //块
inline //inline;
inblock //inline-block;
flex //flex(新版本的弹性盒模型);
box //box(老版本的弹性盒模型);
table //table;
hide //none;
box-sizing //怪异盒模型;
box-flex //设置元素可伸缩其尺寸;
box-orient //设置子元素应该被水平或垂直排列;
horizontal //设置子元素水平排列;
vertical //设置子元素垂直排列;
box-direction //规定框元素的子元素方向排列;
reverse //反方向排列;
no-box-direction //默认方向方向排列;
box-align //对齐框的子元素;
浮动混合宏(_clear.scss):
fl //左浮动;
fr //右浮动;
clear //清除浮动;
css3混合宏(_css3.scss):
css3 //添加css3前缀:
transition //css3过渡;
transition-property //过度属性;
transition-duration //过度时间;
transition-timing-function //过渡效果;
transition-delay //过度延迟时间;
border-radius //css3圆角;
border-image //边框图片;
box-shadow //阴影;
no-box-shadow //去除阴影;
user-select //是否允许用户选中文本;
transform //transform;
transform-origin //元素的基点位置;
transform-style //3D 转换;
backface-visibility //隐藏被旋转的 div 元素的背面;
perspective //设置景深;
perspective-origin //设置 3D 元素的基点位置;
rotate //旋转;
selection //改变默认选中颜色
scrollbar //css3 改变滚动条;
字体混合宏(_fonts.scss):
f //设置字体;
fa //设置字体;
c //文字颜色;
fs //文字风格;
fb //文字加粗;
no-b //去掉文字加粗;
ita //文字斜体;
no-fs //去掉文字风格;
line //设置line-height;
function 函数(_function.scss 基本上是内部使用):
TestNum //判断是否为数字;
returnNum //判断是否为数字返回true/false;
returnStr //判断是否为字符串;
addUnits //添加单位;
简写组合函数(_group.scss 个人最爱快速开发):
whl //设置width/height/line-height;
whfl //设置width/height/font-size/line-height;
whflc //设置width/height/font-size/line-height/color;
whflcb //设置width/height/font-size/line-height/color/background;
hl //设置height/line-height;
hflc //设置height/font-size/line-height/color;
wl //设置width/line-height;
fline //设置font-szie/line-height;
flc //设置font-size/line-height/color;
faflc //设置family/font-size/line-height/color;
wh //设置width/height;
清标签默认属性类(_normalize.scss)：
label //清楚标签默认样式
定位混合宏(_position.scss)：
abs //绝对定位
rel //相对定位
fixed //固定定位
t //定位top值;
l //定位left值;
b //定位bottom值;
r //定位right值;
tl //定位top/left值;
rl //定位right/left值;
bl //定位bottom/left值;
br //定位bottom/right值;
tlbr //定位top/left/bottom/right值;
z1 //层级为10;
z2 //层级为20;
z3 //层级为30;
z4 //层级为40;
z5 //层级为50;
z6 //层级为60;
z-max //最高层级;
px转rem & px转rpx 函数(_rem.scss):
px2rem //转换rem
px2rpx //转换rpx
打包混合宏(_resetpack.scss):
base //打包默认样式;
大小混合宏：(_size.scss):
w //设置width;
h //设置height;
size //设置width/height;
文字混合宏(_text.scss):
text-overflow //超出一行....;
ellipsis-row //多行显示...;
break-word //强制折行;
word-wrap //断行;
hide-text //隐藏文字;
indent //设置text-indent;
replace-text //显示图标;
tal //文字居左对齐;
tar //文字居右对齐;
tac //文字居中对齐;
其他属性混合宏(_other.scss)：
vit //元素顶端对齐方式;
vic //元素中部对齐方式;
vib //元素最低对齐方式;
over //超出截断;
ofv //取消截断;
cur //鼠标手;
def //鼠标默认;
opacity //透明度;
圆形模板混合宏(_round.scss)：
round //圆形;
roundc //圆形加背景色;
三角形模板混合宏(_triangle.scss)：
triangle-up //上三角圆形 $w:宽,$h:高,$color:颜色;
triangle-bottom //下三角圆形 $w:宽,$h:高,$color:颜色;
triangle-left //左三角圆形 $w:宽,$h:高,$color:颜色;
triangle-right //右三角圆形 $w:宽,$h:高,$color:颜色;
triangle-topleft //左上三角圆形 $w:宽,$h:高,$color:颜色;
triangle-topright //右上三角圆形 $size:大小,$color:颜色;
triangle-bottomleft //左下三角圆形 $size:大小,$color:颜色;
triangle-bottomright //右下三角圆形 $size:大小,$color:颜色;
举个栗子
上图：
项目截图：
c/发布的css文件夹
i/发布的图片文件夹
j/js发布的文件夹
s/scss文件夹
index.html 静态页面
koala-config.json 是koala的配置文件
c目录:
s目录:
html不展示了基础代码;
scss代码:
@charset "UTF-8";
@import "./base_mixins/_base_mixins.scss";
/**
* 丘比特专题
* @author tq
* @create 2017-01-04
* @update 2017-01-20
*/ $BG_ULR :"../i/";//路径;
@include base($content:1000);
body{
background:#fdcd01 url('#{$BG_ULR}body-bg.jpg') no-repeat center 23px;
} /* 动画 */
@include keyframes(arrowBtn){
100% {
background-position:-600px 0;
}
}
/* 头部 */
.cupid-head{
@include rel((z:20));
.cupid-logo{
@include fl;
margin-top:20px;
}
.cupid-lan{
@include fr;
@include f(14);
@include line(78px);
}
.cupid-lanName{
color:#fff;
margin-right:12px;
}
}
/* 主体 */
.cupid-main{
@include rel;
@include wh(833px);
padding:52px 0 23px 0;
margin:0 auto;
}
.cupid-turntable{
@include wh(100%,100%);
margin:0 auto;
@include bg('#{$BG_ULR}cupid-turntable.gif');
}
.cupid-txt{
@include abs((t:144px,l:147px,z:6,w:525px,h:175px));
margin:0 auto;
@include bg('#{$BG_ULR}cupid-txt.png');
_background: url("../i/cupid-txt.gif") no-repeat 0 0;
}
.cupid-arrows{
@include abs((b:63px,l:134px,z:3,w:264px,h:243px));
@include bg('#{$BG_ULR}arrow.png');
_background: url("../i/arrow.gif") no-repeat 0 0;
}
.cupid-labelPack{
@include abs((t:545px,l:-75px,z:5,w:295px,h:250px));
@include over;
%cupid-label{
@include wh(219px,64px);
margin-bottom:30px;
}
.cupid-label1{
@extend %cupid-label;
@include bg('#{$BG_ULR}cupid-label1.png');
_background: url("../i/cupid-label1.gif") no-repeat 0 0;
}
.cupid-label2{
@extend %cupid-label;
margin-left:20px;
@include bg('#{$BG_ULR}cupid-label2.png');
_background: url("../i/cupid-label2.gif") no-repeat 0 0;
}
.cupid-label3{
@extend %cupid-label;
margin-left:75px;
@include bg('#{$BG_ULR}cupid-label3.png');
_background: url("../i/cupid-label3.gif") no-repeat 0 0;
}
}
.cupid-heartPack{
@include abs((t:-32px,l:-431px,z:6,w:1590px,h:778px));
@include bg('#{$BG_ULR}cupid-heart.png');
_background: url("../i/cupid-heart.gif") no-repeat 0 0;
}
.cupid-heart1{
@include abs((t:222px,l:-376px,z:6,w:91px,h:82px));
@include bg('#{$BG_ULR}cupid-heart1.gif');
}
.cupid-heart2{
@include abs((t:100px,r:-266px,z:6,w:114px,h:103px));
@include bg('#{$BG_ULR}cupid-heart2.gif');
}
.cupid-arrow{
@include abs((t:540px,r:-84px,z:10,w:296px,h:257px));
}
.cupid-arrowBtn{
@include bg('#{$BG_ULR}cupid-arrow.png');
@include css3(animation,arrowBtn 1.2s steps(2) infinite );
}
.cupid-arrowDisabled{
@include bg('#{$BG_ULR}cupid-arrowDisabled.png');
cursor: default;
}
.cupid-countdown{
padding-top:76px;
@include tac;
width:143px;
margin:0 auto;
@include flc(20px,44px,#fff);
}
.cupid-info{
@include tac;
padding-bottom:34px;
h2{
@include flc(24px,58px,#7d5b00);
}
p{
@include flc(14px,24px,#7d5b00);
}
}
/* 小版本 */
.min_content{
background:#fdcd01 url('#{$BG_ULR}body-bg-min.jpg') no-repeat center 23px;
.cupid-main {
@include wh(695px,695px);
padding: 0px 0 23px 0;
margin-top: -58px;
}
.cupid-turntable{
@include bg('#{$BG_ULR}cupid-turntable-min.gif');
}
.cupid-txt{
@include abs((t:73px,l:122px,z:6,w:436px,h:146px));
margin:0 auto;
@include bg('#{$BG_ULR}cupid-txt-min.png');
_background: url("../i/cupid-txt-min.gif") no-repeat 0 0;
}
.cupid-heartPack{
@include abs((t:-24px,l:-290px,z:6,w:1150px,h:563px));
@include bg('#{$BG_ULR}cupid-heart-min.png');
_background: url("../i/cupid-heart-min.gif") no-repeat 0 0;
}
.cupid-arrow{
top: 368px;
right: -130px;
}
.cupid-arrows{
@include abs((b:77px,l:113px,z:3,w:208px,h:176px));
@include bg('#{$BG_ULR}arrow-min.png');
_background: url("../i/arrow-min.gif") no-repeat 0 0;
}
.cupid-labelPack{
@include abs((t:405px,l:-88px,z:5,w:295px,h:250px));
@include over;
%cupid-label{
@include wh(176px,51px);
margin-bottom:30px;
}
.cupid-label1{
@extend %cupid-label;
@include bg('#{$BG_ULR}cupid-label1-min.png');
_background: url("../i/cupid-label1-min.gif") no-repeat 0 0;
}
.cupid-label2{
@extend %cupid-label;
margin-left:20px;
@include bg('#{$BG_ULR}cupid-label2-min.png');
_background: url("../i/cupid-label2-min.gif") no-repeat 0 0;
}
.cupid-label3{
@extend %cupid-label;
margin-left:75px;
@include bg('#{$BG_ULR}cupid-label3-min.png');
_background: url("../i/cupid-label3-min.gif") no-repeat 0 0;
}
}
.cupid-heart1{
@include abs((t:222px,l:-230px,z:6,w:62px,h:56px));
@include bg('#{$BG_ULR}cupid-heart1-min.gif');
}
.cupid-heart2{
@include abs((t:100px,r:-159px,z:6,w:83px,h:75px));
@include bg('#{$BG_ULR}cupid-heart2-min.gif');
}
} /* 弹层 */
.cupid-boom{
@include wh(288px,247px);
@include bg('#{$BG_ULR}cupid-boom.png');
_background: #fdcd01 url('#{$BG_ULR}cupid-boom.gif') no-repeat 0 0;
.cupid-boomInfo{
padding-top:76px;
@include tac;
@include flc(18px,30px,#fff);
} } /* 尾部 */
#jy_common_foot{
width:auto !important;
@include bgc(#fee167);
}
#jy_common_foot #common_footer{
margin:0 auto!important;
}
用Koala编辑出的css
@charset "UTF-8";
/** 丘比特专题 @author tq @create 2017-01-04 @update 2017-01-20 */
html { font-family: 'microsoft yahei', Arial, Helvetica, sans-serif; font-size: 12px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body { -webkit-user-select: none; user-select: none; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:; padding:; border:; outline:; font-size: 100%; vertical-align: baseline; background: transparent; } h1, h2, h3, h4, h5, h6, p { font-weight: normal; } a { text-decoration: none; -webkit-touch-callout: none; background-color: transparent; } li { list-style: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height:; } [hidden], template { display: none; } a:active, a:hover { outline:; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: .67em 0; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height:; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border:; -webkit-touch-callout: none; vertical-align: top; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height:; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } a, button, input, optgroup, select, textarea { -webkit-tap-highlight-color: transparent; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin:; -webkit-appearance: none; outline: none; line-height: normal; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border:; padding:; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding:; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border:; padding:; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing:; } td, th { padding:; } /* 默认浮动 */
.fl { float: left; } .fr { float: right; } .fn-clear { *zoom:; }
.fn-clear:after { content: ""; display: block; height:; clear: both; visibility: hidden; overflow: hidden; } /* 显示隐藏 */
.hide { display: none; } .show { display: block; } /* 文本方向 */
.tal { text-align: left; } .tar { text-align: right; } .tac { text-align: center; } /* 截取 */
.over { overflow: hidden; } .ofv { overflow: visible !important; } /* 定位 */
.abs { position: absolute; } .rel { position: relative; } /* 鼠标手势 */
.cursor { cursor: pointer; } .def { cursor: default; } /* 。。。。 */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 强制折行 */
.break-word { word-break: break-all; /*支持IE，chrome，FF不支持*/ word-wrap: break-word; /*支持IE，chrome，FF*/ } /* 默认颜色 */
.colr-red { color: #ff546a; } .colr-blue { color: #5fb3d2; } .colr-gray { color: #ccc; } .colr-yellow { color: #fff000; } .colr-org { color: #f60; } /* 默认背景颜色 */
.bg-red { background-color: #ff546a; } .bg-blue { background-color: #5fb3d2; } .bg-gray { background-color: #ccc; } .bg-yellow { background-color: #fff000; } .bg-org { background-color: #f60; } /* 默认置灰 */
.disabled { background-color: #ccc; } /* 默认字体 */
.f-12 { font-size: 12px; } .f-14 { font-size: 14px; } .f-16 { font-size: 16px; } .f-18 { font-size: 18px; } .f-20 { font-size: 20px; } .f-22 { font-size: 22px; } .f-24 { font-size: 24px; } .f-26 { font-size: 26px; } .f-28 { font-size: 28px; } .f-30 { font-size: 30px; } .f-32 { font-size: 32px; } /* margin padding */
.mt0 { margin-top: 0 !important; } .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mb0 { margin-bottom: 0 !important; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .ml0 { margin-left: 0 !important; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .mr0 { margin-right: 0 !important; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } /* 高度 */
.blk-5 { height: 5px; } .blk-10 { height: 10px; } .blk-15 { height: 15px; } .blk-20 { height: 20px; } .blk-25 { height: 25px; } .blk-30 { height: 30px; } .blk-35 { height: 35px; } .blk-40 { height: 40px; } .blk-45 { height: 45px; } .blk-50 { height: 50px; } /* 边框 */
.bor-t { border-top: solid 1px #ccc; } .bor-l { border-left: solid 1px #ccc; } .bor-r { border-right: solid 1px #ccc; } .bor-b { border-bottom: solid 1px #ccc; } .bor-t0 { border-top: none !important; } .bor-l0 { border-left: none !important; } .bor-r0 { border-right: none !important; } .bor-b0 { border-bottom: none !important; } .bor-das { border: 1px dashed #ccc; } .bor-dot { border: 1px dotted #ccc; } .border { border: 1px solid #ccc; } /* box */
.content { width: 1000px; margin: 0 auto; } body { background: #fdcd01 url("../i/body-bg.jpg") no-repeat center 23px; } /* 动画 */
@-webkit-keyframes arrowBtn { 100% { background-position: -600px 0; } }
@-moz-keyframes arrowBtn { 100% { background-position: -600px 0; } }
@-ms-keyframes arrowBtn { 100% { background-position: -600px 0; } }
@-o-keyframes arrowBtn { 100% { background-position: -600px 0; } }
@keyframes arrowBtn { 100% { background-position: -600px 0; } }
/* 头部 */
.cupid-head { position: relative; z-index:; }
.cupid-head .cupid-logo { float: left; margin-top: 20px; }
.cupid-head .cupid-lan { float: right; font-size: 14px; line-height: 78px; }
.cupid-head .cupid-lanName { color: #fff; margin-right: 12px; } /* 主体 */
.cupid-main { position: relative; width: 833px; height: 833px; padding: 52px 0 23px 0; margin: 0 auto; } .cupid-turntable { width: 100%; height: 100%; margin: 0 auto; background: url("../i/cupid-turntable.gif") no-repeat 0 0; } .cupid-txt { position: absolute; top: 144px; left: 147px; z-index:; width: 525px; height: 175px; margin: 0 auto; background: url("../i/cupid-txt.png") no-repeat 0 0; _background: url("../i/cupid-txt.gif") no-repeat 0 0; } .cupid-arrows { position: absolute; bottom: 63px; left: 134px; z-index:; width: 264px; height: 243px; background: url("../i/arrow.png") no-repeat 0 0; _background: url("../i/arrow.gif") no-repeat 0 0; } .cupid-labelPack { position: absolute; top: 545px; left: -75px; z-index:; width: 295px; height: 250px; overflow: hidden; }
.cupid-labelPack .cupid-label1, .cupid-labelPack .cupid-label2, .cupid-labelPack .cupid-label3, .min_content .cupid-labelPack .cupid-label1, .min_content .cupid-labelPack .cupid-label2, .min_content .cupid-labelPack .cupid-label3 { width: 219px; height: 64px; margin-bottom: 30px; }
.cupid-labelPack .cupid-label1 { background: url("../i/cupid-label1.png") no-repeat 0 0; _background: url("../i/cupid-label1.gif") no-repeat 0 0; }
.cupid-labelPack .cupid-label2 { margin-left: 20px; background: url("../i/cupid-label2.png") no-repeat 0 0; _background: url("../i/cupid-label2.gif") no-repeat 0 0; }
.cupid-labelPack .cupid-label3 { margin-left: 75px; background: url("../i/cupid-label3.png") no-repeat 0 0; _background: url("../i/cupid-label3.gif") no-repeat 0 0; } .cupid-heartPack { position: absolute; top: -32px; left: -431px; z-index:; width: 1590px; height: 778px; background: url("../i/cupid-heart.png") no-repeat 0 0; _background: url("../i/cupid-heart.gif") no-repeat 0 0; } .cupid-heart1 { position: absolute; top: 222px; left: -376px; z-index:; width: 91px; height: 82px; background: url("../i/cupid-heart1.gif") no-repeat 0 0; } .cupid-heart2 { position: absolute; top: 100px; right: -266px; z-index:; width: 114px; height: 103px; background: url("../i/cupid-heart2.gif") no-repeat 0 0; } .cupid-arrow { position: absolute; top: 540px; right: -84px; z-index:; width: 296px; height: 257px; } .cupid-arrowBtn { background: url("../i/cupid-arrow.png") no-repeat 0 0; -webkit-animation: arrowBtn 1.2s steps(2) infinite; -moz-animation: arrowBtn 1.2s steps(2) infinite; -ms-animation: arrowBtn 1.2s steps(2) infinite; -o-animation: arrowBtn 1.2s steps(2) infinite; animation: arrowBtn 1.2s steps(2) infinite; } .cupid-arrowDisabled { background: url("../i/cupid-arrowDisabled.png") no-repeat 0 0; cursor: default; } .cupid-countdown { padding-top: 76px; text-align: center; width: 143px; margin: 0 auto; font-size: 20px; line-height: 44px; color: #fff; } .cupid-info { text-align: center; padding-bottom: 34px; }
.cupid-info h2 { font-size: 24px; line-height: 58px; color: #7d5b00; }
.cupid-info p { font-size: 14px; line-height: 24px; color: #7d5b00; } /* 小版本 */
.min_content { background: #fdcd01 url("../i/body-bg-min.jpg") no-repeat center 23px; }
.min_content .cupid-main { width: 695px; height: 695px; padding: 0px 0 23px 0; margin-top: -58px; }
.min_content .cupid-turntable { background: url("../i/cupid-turntable-min.gif") no-repeat 0 0; }
.min_content .cupid-txt { position: absolute; top: 73px; left: 122px; z-index:; width: 436px; height: 146px; margin: 0 auto; background: url("../i/cupid-txt-min.png") no-repeat 0 0; _background: url("../i/cupid-txt-min.gif") no-repeat 0 0; }
.min_content .cupid-heartPack { position: absolute; top: -24px; left: -290px; z-index:; width: 1150px; height: 563px; background: url("../i/cupid-heart-min.png") no-repeat 0 0; _background: url("../i/cupid-heart-min.gif") no-repeat 0 0; }
.min_content .cupid-arrow { top: 368px; right: -130px; }
.min_content .cupid-arrows { position: absolute; bottom: 77px; left: 113px; z-index:; width: 208px; height: 176px; background: url("../i/arrow-min.png") no-repeat 0 0; _background: url("../i/arrow-min.gif") no-repeat 0 0; }
.min_content .cupid-labelPack { position: absolute; top: 405px; left: -88px; z-index:; width: 295px; height: 250px; overflow: hidden; }
.min_content .cupid-labelPack .cupid-label1, .min_content .cupid-labelPack .cupid-label2, .min_content .cupid-labelPack .cupid-label3 { width: 176px; height: 51px; margin-bottom: 30px; }
.min_content .cupid-labelPack .cupid-label1 { background: url("../i/cupid-label1-min.png") no-repeat 0 0; _background: url("../i/cupid-label1-min.gif") no-repeat 0 0; }
.min_content .cupid-labelPack .cupid-label2 { margin-left: 20px; background: url("../i/cupid-label2-min.png") no-repeat 0 0; _background: url("../i/cupid-label2-min.gif") no-repeat 0 0; }
.min_content .cupid-labelPack .cupid-label3 { margin-left: 75px; background: url("../i/cupid-label3-min.png") no-repeat 0 0; _background: url("../i/cupid-label3-min.gif") no-repeat 0 0; }
.min_content .cupid-heart1 { position: absolute; top: 222px; left: -230px; z-index:; width: 62px; height: 56px; background: url("../i/cupid-heart1-min.gif") no-repeat 0 0; }
.min_content .cupid-heart2 { position: absolute; top: 100px; right: -159px; z-index:; width: 83px; height: 75px; background: url("../i/cupid-heart2-min.gif") no-repeat 0 0; } /* 弹层 */
.cupid-boom { width: 288px; height: 247px; background: url("../i/cupid-boom.png") no-repeat 0 0; _background: #fdcd01 url("../i/cupid-boom.gif") no-repeat 0 0; }
.cupid-boom .cupid-boomInfo { padding-top: 76px; text-align: center; font-size: 18px; line-height: 30px; color: #fff; } /* 尾部 */
#jy_common_foot { width: auto !important; background-color: #fee167; } #jy_common_foot #common_footer { margin: 0 auto !important; } /*# sourceMappingURL=cupid.css.map */
后记：
之前学习sass的时候做了一个迷你版的工具库，这次做了一个比较完整的sass工具库;
这是我16年8月份写了一部分扔那 快到年底项目不忙又给续写完的
实战的的项目目前不多，还有一些坑没踩完
例子是我年前上线的最后一个专题
感谢：
XINRAN LIU ： https://xinranliu.me/2014-11-02-stylus-useful-mixins/ (学习\抄袭的分类)
大漠 ： https://github.com/W3cplus/SassMagic/tree/master/src (学习\抄袭 写法)