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