sass 工具库

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代码:

  1 @charset "UTF-8";
  2 @import "./base_mixins/_base_mixins.scss";
  3 /**
  4  *    丘比特专题
  5  *    @author tq
  6  *    @create 2017-01-04
  7  *    @update 2017-01-20
  8  */
  9 
 10 $BG_ULR :"../i/";//路径;
 11 @include base($content:1000);
 12 body{
 13     background:#fdcd01 url('#{$BG_ULR}body-bg.jpg') no-repeat center 23px;
 14 }
 15 
 16 /* 动画 */                                       
 17 @include keyframes(arrowBtn){
 18     100% {
 19         background-position:-600px 0;
 20     }
 21 } 
 22 /* 头部 */
 23 .cupid-head{  
 24     @include rel((z:20));
 25     .cupid-logo{
 26         @include fl;
 27         margin-top:20px;
 28     }
 29     .cupid-lan{
 30         @include fr;
 31         @include f(14);
 32         @include line(78px);
 33     }
 34     .cupid-lanName{
 35         color:#fff;
 36         margin-right:12px;
 37     }
 38 }
 39 /* 主体 */
 40 .cupid-main{
 41     @include rel;
 42     @include wh(833px);
 43     padding:52px 0 23px 0;
 44     margin:0 auto;
 45 }
 46 .cupid-turntable{
 47     @include wh(100%,100%);
 48     margin:0 auto;
 49     @include bg('#{$BG_ULR}cupid-turntable.gif');
 50 }
 51 .cupid-txt{
 52     @include abs((t:144px,l:147px,z:6,w:525px,h:175px));
 53     margin:0 auto;
 54     @include bg('#{$BG_ULR}cupid-txt.png');
 55     _background: url("../i/cupid-txt.gif") no-repeat 0 0;
 56 }
 57 .cupid-arrows{
 58     @include abs((b:63px,l:134px,z:3,w:264px,h:243px)); 
 59     @include bg('#{$BG_ULR}arrow.png');
 60         _background: url("../i/arrow.gif") no-repeat 0 0;
 61 }
 62 .cupid-labelPack{
 63     @include abs((t:545px,l:-75px,z:5,w:295px,h:250px)); 
 64     @include over;
 65     %cupid-label{
 66         @include wh(219px,64px);
 67         margin-bottom:30px;
 68     }
 69     .cupid-label1{
 70         @extend %cupid-label;
 71         @include bg('#{$BG_ULR}cupid-label1.png');
 72         _background: url("../i/cupid-label1.gif") no-repeat 0 0;
 73     }
 74     .cupid-label2{
 75         @extend %cupid-label;
 76         margin-left:20px;
 77         @include bg('#{$BG_ULR}cupid-label2.png');
 78         _background: url("../i/cupid-label2.gif") no-repeat 0 0;
 79     }
 80     .cupid-label3{
 81         @extend %cupid-label;
 82         margin-left:75px;
 83         @include bg('#{$BG_ULR}cupid-label3.png');
 84         _background: url("../i/cupid-label3.gif") no-repeat 0 0;
 85     }
 86 }
 87 .cupid-heartPack{
 88     @include abs((t:-32px,l:-431px,z:6,w:1590px,h:778px)); 
 89     @include bg('#{$BG_ULR}cupid-heart.png');
 90     _background: url("../i/cupid-heart.gif") no-repeat 0 0;
 91 }
 92 .cupid-heart1{
 93     @include abs((t:222px,l:-376px,z:6,w:91px,h:82px)); 
 94     @include bg('#{$BG_ULR}cupid-heart1.gif');
 95 }
 96 .cupid-heart2{
 97     @include abs((t:100px,r:-266px,z:6,w:114px,h:103px)); 
 98     @include bg('#{$BG_ULR}cupid-heart2.gif');
 99 }
100 .cupid-arrow{
101     @include abs((t:540px,r:-84px,z:10,w:296px,h:257px)); 
102 }
103 .cupid-arrowBtn{
104     @include bg('#{$BG_ULR}cupid-arrow.png');
105     @include css3(animation,arrowBtn 1.2s steps(2) infinite );    
106 }
107 .cupid-arrowDisabled{
108     @include bg('#{$BG_ULR}cupid-arrowDisabled.png');
109     cursor: default;
110 }
111 .cupid-countdown{
112     padding-top:76px;
113     @include tac;
114     width:143px;
115     margin:0 auto;
116     @include flc(20px,44px,#fff);
117 }
118 .cupid-info{
119     @include tac;
120     padding-bottom:34px;
121     h2{
122         @include flc(24px,58px,#7d5b00);
123     }
124     p{
125         @include flc(14px,24px,#7d5b00);
126     }
127 }
128 /* 小版本 */
129 .min_content{
130     background:#fdcd01 url('#{$BG_ULR}body-bg-min.jpg') no-repeat center 23px;
131     .cupid-main {
132         @include wh(695px,695px);
133         padding: 0px 0 23px 0;
134         margin-top: -58px;
135     }
136     .cupid-turntable{
137         @include bg('#{$BG_ULR}cupid-turntable-min.gif');
138     }
139     .cupid-txt{
140         @include abs((t:73px,l:122px,z:6,w:436px,h:146px));
141         margin:0 auto;
142         @include bg('#{$BG_ULR}cupid-txt-min.png');
143         _background: url("../i/cupid-txt-min.gif") no-repeat 0 0;
144     }
145     .cupid-heartPack{
146         @include abs((t:-24px,l:-290px,z:6,w:1150px,h:563px)); 
147         @include bg('#{$BG_ULR}cupid-heart-min.png');
148         _background: url("../i/cupid-heart-min.gif") no-repeat 0 0;
149     }
150     .cupid-arrow{
151         top: 368px;
152         right: -130px;
153     }
154     .cupid-arrows{
155         @include abs((b:77px,l:113px,z:3,w:208px,h:176px)); 
156         @include bg('#{$BG_ULR}arrow-min.png');
157         _background: url("../i/arrow-min.gif") no-repeat 0 0;
158     }
159     .cupid-labelPack{
160             @include abs((t:405px,l:-88px,z:5,w:295px,h:250px)); 
161             @include over;
162             %cupid-label{
163                 @include wh(176px,51px);
164                 margin-bottom:30px;
165             }
166             .cupid-label1{
167                 @extend %cupid-label;
168                 @include bg('#{$BG_ULR}cupid-label1-min.png');
169                 _background: url("../i/cupid-label1-min.gif") no-repeat 0 0;
170             }
171             .cupid-label2{
172                 @extend %cupid-label;
173                 margin-left:20px;
174                 @include bg('#{$BG_ULR}cupid-label2-min.png');
175                 _background: url("../i/cupid-label2-min.gif") no-repeat 0 0;
176             }
177             .cupid-label3{
178                 @extend %cupid-label;
179                 margin-left:75px;
180                 @include bg('#{$BG_ULR}cupid-label3-min.png');
181                 _background: url("../i/cupid-label3-min.gif") no-repeat 0 0;
182             }
183     }
184     .cupid-heart1{
185         @include abs((t:222px,l:-230px,z:6,w:62px,h:56px)); 
186         @include bg('#{$BG_ULR}cupid-heart1-min.gif');
187     }
188     .cupid-heart2{
189         @include abs((t:100px,r:-159px,z:6,w:83px,h:75px)); 
190         @include bg('#{$BG_ULR}cupid-heart2-min.gif');
191     }
192 }
193 
194 /* 弹层 */
195 .cupid-boom{
196     @include wh(288px,247px);
197     @include bg('#{$BG_ULR}cupid-boom.png');
198     _background: #fdcd01 url('#{$BG_ULR}cupid-boom.gif') no-repeat 0 0;
199     .cupid-boomInfo{
200         padding-top:76px;
201         @include tac;
202         @include flc(18px,30px,#fff);
203     }
204     
205 }
206 
207 /* 尾部 */
208 #jy_common_foot{
209     width:auto !important;
210     @include bgc(#fee167);
211 }
212 #jy_common_foot #common_footer{
213     margin:0 auto!important;
214 }

View Code

用Koala编辑出的css

  1 @charset "UTF-8";
  2 /**     丘比特专题     @author tq     @create 2017-01-04     @update 2017-01-20 */
  3 html { font-family: 'microsoft yahei', Arial, Helvetica, sans-serif; font-size: 12px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
  4 
  5 html, body { -webkit-user-select: none; user-select: none; }
  6 
  7 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: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
  8 
  9 h1, h2, h3, h4, h5, h6, p { font-weight: normal; }
 10 
 11 a { text-decoration: none; -webkit-touch-callout: none; background-color: transparent; }
 12 
 13 li { list-style: none; }
 14 
 15 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
 16 
 17 audio, canvas, progress, video { display: inline-block; }
 18 
 19 audio:not([controls]) { display: none; height: 0; }
 20 
 21 [hidden], template { display: none; }
 22 
 23 a:active, a:hover { outline: 0; }
 24 
 25 abbr[title] { border-bottom: 1px dotted; }
 26 
 27 b, strong { font-weight: bold; }
 28 
 29 dfn { font-style: italic; }
 30 
 31 h1 { font-size: 2em; margin: .67em 0; }
 32 
 33 small { font-size: 80%; }
 34 
 35 sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
 36 
 37 sup { top: -0.5em; }
 38 
 39 sub { bottom: -0.25em; }
 40 
 41 img { border: 0; -webkit-touch-callout: none; vertical-align: top; }
 42 
 43 svg:not(:root) { overflow: hidden; }
 44 
 45 figure { margin: 1em 40px; }
 46 
 47 hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
 48 
 49 pre { overflow: auto; }
 50 
 51 code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; }
 52 
 53 a, button, input, optgroup, select, textarea { -webkit-tap-highlight-color: transparent; }
 54 
 55 button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; -webkit-appearance: none; outline: none; line-height: normal; }
 56 
 57 button { overflow: visible; }
 58 
 59 button, select { text-transform: none; }
 60 
 61 button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
 62 
 63 button[disabled], html input[disabled] { cursor: default; }
 64 
 65 button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
 66 
 67 input { line-height: normal; }
 68 
 69 input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
 70 
 71 input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
 72 
 73 input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
 74 
 75 input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
 76 
 77 fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; }
 78 
 79 legend { border: 0; padding: 0; }
 80 
 81 textarea { overflow: auto; }
 82 
 83 optgroup { font-weight: bold; }
 84 
 85 table { border-collapse: collapse; border-spacing: 0; }
 86 
 87 td, th { padding: 0; }
 88 
 89 /* 默认浮动 */
 90 .fl { float: left; }
 91 
 92 .fr { float: right; }
 93 
 94 .fn-clear { *zoom: 1; }
 95 .fn-clear:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }
 96 
 97 /* 显示隐藏 */
 98 .hide { display: none; }
 99 
100 .show { display: block; }
101 
102 /* 文本方向 */
103 .tal { text-align: left; }
104 
105 .tar { text-align: right; }
106 
107 .tac { text-align: center; }
108 
109 /* 截取 */
110 .over { overflow: hidden; }
111 
112 .ofv { overflow: visible !important; }
113 
114 /* 定位 */
115 .abs { position: absolute; }
116 
117 .rel { position: relative; }
118 
119 /* 鼠标手势 */
120 .cursor { cursor: pointer; }
121 
122 .def { cursor: default; }
123 
124 /* 。。。。 */
125 .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
126 
127 /* 强制折行 */
128 .break-word { word-break: break-all; /*支持IE，chrome，FF不支持*/ 　word-wrap: break-word; /*支持IE，chrome，FF*/ }
129 
130 /* 默认颜色 */
131 .colr-red { color: #ff546a; }
132 
133 .colr-blue { color: #5fb3d2; }
134 
135 .colr-gray { color: #ccc; }
136 
137 .colr-yellow { color: #fff000; }
138 
139 .colr-org { color: #f60; }
140 
141 /* 默认背景颜色 */
142 .bg-red { background-color: #ff546a; }
143 
144 .bg-blue { background-color: #5fb3d2; }
145 
146 .bg-gray { background-color: #ccc; }
147 
148 .bg-yellow { background-color: #fff000; }
149 
150 .bg-org { background-color: #f60; }
151 
152 /* 默认置灰 */
153 .disabled { background-color: #ccc; }
154 
155 /* 默认字体 */
156 .f-12 { font-size: 12px; }
157 
158 .f-14 { font-size: 14px; }
159 
160 .f-16 { font-size: 16px; }
161 
162 .f-18 { font-size: 18px; }
163 
164 .f-20 { font-size: 20px; }
165 
166 .f-22 { font-size: 22px; }
167 
168 .f-24 { font-size: 24px; }
169 
170 .f-26 { font-size: 26px; }
171 
172 .f-28 { font-size: 28px; }
173 
174 .f-30 { font-size: 30px; }
175 
176 .f-32 { font-size: 32px; }
177 
178 /* margin  padding */
179 .mt0 { margin-top: 0 !important; }
180 
181 .mt-5 { margin-top: 5px; }
182 
183 .mt-10 { margin-top: 10px; }
184 
185 .mt-15 { margin-top: 15px; }
186 
187 .mt-20 { margin-top: 20px; }
188 
189 .mt-25 { margin-top: 25px; }
190 
191 .mt-30 { margin-top: 30px; }
192 
193 .mb0 { margin-bottom: 0 !important; }
194 
195 .mb-5 { margin-bottom: 5px; }
196 
197 .mb-10 { margin-bottom: 10px; }
198 
199 .mb-15 { margin-bottom: 15px; }
200 
201 .mb-20 { margin-bottom: 20px; }
202 
203 .mb-25 { margin-bottom: 25px; }
204 
205 .mb-30 { margin-bottom: 30px; }
206 
207 .ml0 { margin-left: 0 !important; }
208 
209 .ml-5 { margin-left: 5px; }
210 
211 .ml-10 { margin-left: 10px; }
212 
213 .ml-15 { margin-left: 15px; }
214 
215 .ml-20 { margin-left: 20px; }
216 
217 .ml-25 { margin-left: 25px; }
218 
219 .ml-30 { margin-left: 30px; }
220 
221 .mr0 { margin-right: 0 !important; }
222 
223 .mr-5 { margin-right: 5px; }
224 
225 .mr-10 { margin-right: 10px; }
226 
227 .mr-15 { margin-right: 15px; }
228 
229 .mr-20 { margin-right: 20px; }
230 
231 .mr-25 { margin-right: 25px; }
232 
233 .mr-30 { margin-right: 30px; }
234 
235 /* 高度 */
236 .blk-5 { height: 5px; }
237 
238 .blk-10 { height: 10px; }
239 
240 .blk-15 { height: 15px; }
241 
242 .blk-20 { height: 20px; }
243 
244 .blk-25 { height: 25px; }
245 
246 .blk-30 { height: 30px; }
247 
248 .blk-35 { height: 35px; }
249 
250 .blk-40 { height: 40px; }
251 
252 .blk-45 { height: 45px; }
253 
254 .blk-50 { height: 50px; }
255 
256 /* 边框 */
257 .bor-t { border-top: solid 1px #ccc; }
258 
259 .bor-l { border-left: solid 1px #ccc; }
260 
261 .bor-r { border-right: solid 1px #ccc; }
262 
263 .bor-b { border-bottom: solid 1px #ccc; }
264 
265 .bor-t0 { border-top: none !important; }
266 
267 .bor-l0 { border-left: none !important; }
268 
269 .bor-r0 { border-right: none !important; }
270 
271 .bor-b0 { border-bottom: none !important; }
272 
273 .bor-das { border: 1px dashed #ccc; }
274 
275 .bor-dot { border: 1px dotted #ccc; }
276 
277 .border { border: 1px solid #ccc; }
278 
279 /* box */
280 .content { width: 1000px; margin: 0 auto; }
281 
282 body { background: #fdcd01 url("../i/body-bg.jpg") no-repeat center 23px; }
283 
284 /* 动画 */
285 @-webkit-keyframes arrowBtn { 100% { background-position: -600px 0; } }
286 @-moz-keyframes arrowBtn { 100% { background-position: -600px 0; } }
287 @-ms-keyframes arrowBtn { 100% { background-position: -600px 0; } }
288 @-o-keyframes arrowBtn { 100% { background-position: -600px 0; } }
289 @keyframes arrowBtn { 100% { background-position: -600px 0; } }
290 /* 头部 */
291 .cupid-head { position: relative; z-index: 20; }
292 .cupid-head .cupid-logo { float: left; margin-top: 20px; }
293 .cupid-head .cupid-lan { float: right; font-size: 14px; line-height: 78px; }
294 .cupid-head .cupid-lanName { color: #fff; margin-right: 12px; }
295 
296 /* 主体 */
297 .cupid-main { position: relative; width: 833px; height: 833px; padding: 52px 0 23px 0; margin: 0 auto; }
298 
299 .cupid-turntable { width: 100%; height: 100%; margin: 0 auto; background: url("../i/cupid-turntable.gif") no-repeat 0 0; }
300 
301 .cupid-txt { position: absolute; top: 144px; left: 147px; z-index: 6; 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; }
302 
303 .cupid-arrows { position: absolute; bottom: 63px; left: 134px; z-index: 3; width: 264px; height: 243px; background: url("../i/arrow.png") no-repeat 0 0; _background: url("../i/arrow.gif") no-repeat 0 0; }
304 
305 .cupid-labelPack { position: absolute; top: 545px; left: -75px; z-index: 5; width: 295px; height: 250px; overflow: hidden; }
306 .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; }
307 .cupid-labelPack .cupid-label1 { background: url("../i/cupid-label1.png") no-repeat 0 0; _background: url("../i/cupid-label1.gif") no-repeat 0 0; }
308 .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; }
309 .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; }
310 
311 .cupid-heartPack { position: absolute; top: -32px; left: -431px; z-index: 6; width: 1590px; height: 778px; background: url("../i/cupid-heart.png") no-repeat 0 0; _background: url("../i/cupid-heart.gif") no-repeat 0 0; }
312 
313 .cupid-heart1 { position: absolute; top: 222px; left: -376px; z-index: 6; width: 91px; height: 82px; background: url("../i/cupid-heart1.gif") no-repeat 0 0; }
314 
315 .cupid-heart2 { position: absolute; top: 100px; right: -266px; z-index: 6; width: 114px; height: 103px; background: url("../i/cupid-heart2.gif") no-repeat 0 0; }
316 
317 .cupid-arrow { position: absolute; top: 540px; right: -84px; z-index: 10; width: 296px; height: 257px; }
318 
319 .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; }
320 
321 .cupid-arrowDisabled { background: url("../i/cupid-arrowDisabled.png") no-repeat 0 0; cursor: default; }
322 
323 .cupid-countdown { padding-top: 76px; text-align: center; width: 143px; margin: 0 auto; font-size: 20px; line-height: 44px; color: #fff; }
324 
325 .cupid-info { text-align: center; padding-bottom: 34px; }
326 .cupid-info h2 { font-size: 24px; line-height: 58px; color: #7d5b00; }
327 .cupid-info p { font-size: 14px; line-height: 24px; color: #7d5b00; }
328 
329 /* 小版本 */
330 .min_content { background: #fdcd01 url("../i/body-bg-min.jpg") no-repeat center 23px; }
331 .min_content .cupid-main { width: 695px; height: 695px; padding: 0px 0 23px 0; margin-top: -58px; }
332 .min_content .cupid-turntable { background: url("../i/cupid-turntable-min.gif") no-repeat 0 0; }
333 .min_content .cupid-txt { position: absolute; top: 73px; left: 122px; z-index: 6; 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; }
334 .min_content .cupid-heartPack { position: absolute; top: -24px; left: -290px; z-index: 6; 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; }
335 .min_content .cupid-arrow { top: 368px; right: -130px; }
336 .min_content .cupid-arrows { position: absolute; bottom: 77px; left: 113px; z-index: 3; width: 208px; height: 176px; background: url("../i/arrow-min.png") no-repeat 0 0; _background: url("../i/arrow-min.gif") no-repeat 0 0; }
337 .min_content .cupid-labelPack { position: absolute; top: 405px; left: -88px; z-index: 5; width: 295px; height: 250px; overflow: hidden; }
338 .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; }
339 .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; }
340 .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; }
341 .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; }
342 .min_content .cupid-heart1 { position: absolute; top: 222px; left: -230px; z-index: 6; width: 62px; height: 56px; background: url("../i/cupid-heart1-min.gif") no-repeat 0 0; }
343 .min_content .cupid-heart2 { position: absolute; top: 100px; right: -159px; z-index: 6; width: 83px; height: 75px; background: url("../i/cupid-heart2-min.gif") no-repeat 0 0; }
344 
345 /* 弹层 */
346 .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; }
347 .cupid-boom .cupid-boomInfo { padding-top: 76px; text-align: center; font-size: 18px; line-height: 30px; color: #fff; }
348 
349 /* 尾部 */
350 #jy_common_foot { width: auto !important; background-color: #fee167; }
351 
352 #jy_common_foot #common_footer { margin: 0 auto !important; }
353 
354 /*# sourceMappingURL=cupid.css.map */

View Code

后记：

之前学习sass的时候做了一个迷你版的工具库，这次做了一个比较完整的sass工具库;

这是我16年8月份写了一部分扔那快到年底项目不忙又给续写完的

实战的的项目目前不多，还有一些坑没踩完

例子是我年前上线的最后一个专题

感谢：

　　XINRAN LIU ： https://xinranliu.me/2014-11-02-stylus-useful-mixins/ (学习\抄袭的分类)

大漠： https://github.com/W3cplus/SassMagic/tree/master/src (学习\抄袭写法)

posted @ 2016-11-28 17:23 uustoboy 阅读(2202) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sass 工具库

公告