less
less-base.less文件展示：
//清除标签默认样式;
.label(){
html {margin:; padding:; border:;_background-image:url(n1othing.txt)}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:; padding:; border:; font-size: 100%; vertical-align: baseline; }
ol, ul, li { list-style: none; }
body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
table,tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline;}
caption, th, td { text-align: left; font-weight: normal; float: none !important; }
table, th, td, select, img, input,object{ vertical-align: middle;}
:focus { outline:;}
input,select{margin:;}
a { color: #005EA7; text-decoration: none; }
a:hover {color: #C7000B; text-decoration: none; }
p,a,td{word-wrap:break-word;word-break:break-all;}
img { border: none;vertical-align:top; }
textarea{ resize:none;border:1px solid #ccc;}
textarea:hover{border-color:#ccc;}
input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius:;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
input[type="text"]{border:solid 1px #ccc; border-radius:;}
dfn {font-style: normal;font-family: Arial;}
} .fl(){ float:left; } //左浮动;
.fr(){ float:right;} //右浮动;
//设置方向浮动;
.float( @dire : left ){
float:@dire;
}
//清除浮动;
.clear(){
*zoom:;
&:after{
content: "";
display: block;
height:;
clear: both;
visibility: hidden;
overflow: hidden;
}
}
//清右浮动;
.clr(){
clear: both;
display: block;
font-size:;
height:;
line-height:;
overflow: hidden;
} /**
* 循环初始字体大小:
* @end : 结束字体大小(数字),必须输;
* @begin : 开始字体大小(数字),可以省略;
* @un : 字体单位(字符串),可以省略;
* 例子 : .base-fonts(28);
*/
.base-fonts( @end,@begin:12,@un:px) when ( @begin =< @end ) {
.f-@{begin}{
font-size:unit(@begin, @un);
}
.base-fonts( @end,( @begin+2 ),@un );
} /**
* 循环初始默认样式:
* @name : 样式前缀名,必须输;
* @style : 设置样式,必须输;
* @end : 结束样式,必须输;
* @begin : 开始样式,可以省略;
* @mult : 循环累加倍数,可以省略;
* @un : 字体单位(字符串),可以省略;
* 例子 : .base-styles(mb,margin-bottom,30,5);
*/
.base-styles(@name:name,@style,@end,@begin:5,@mult:5,@un:px ) when ( @begin =< @end ) {
.@{name}-@{begin}{
@{style}:unit(@begin, @un);
}
.base-styles( @name,@style,@end,(@begin+@mult),@mult,@un );
} //一行显示。。。。
.ellipsis(){
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
/* 强制折行 */
.break-word(){
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word; /*支持IE，chrome，FF*/
} //设置字体;
.f(@size:12,@un:px){font-size:unit(@size, @un); }
//设置字体;
.fa(@family:'Microsoft Yahei'){ font-family:@family,'宋体','黑体';}
.tal(){ text-align: left; }
.tar(){ text-align: right; }
.tac(){ text-align: center; }
.text-align( @dir:left ){text-align: @dir;}
.over(){overflow:hidden; }
.ofv(){overflow:visible !important;}
.hide(){ display:none; }
.block(){ display:block; }
.abs(){ position: absolute; }
.rel(){ position: relative; }
.cur(){ cursor: pointer; }
.def(){ cursor:default;} //css3过渡;
.tran(@name:all,@time:2s){
-webkit-transition : @name @time; /* Safari 和 Chrome */
-moz-transition : @name @time; /* Firefox 4 */
-ms-transition : @name @time; /* IE */
-o-transition : @name @time; /* Opera */
transition : @name @time;
} //css3;
.css3( @style,@frames ){
-webkit-@{style} : @frames; /* Safari 和 Chrome */
-moz-@{style} : @frames; /* Firefox 4 */
-ms-@{style} : @frames; /* IE */
-o-@{style} : @frames; /* Opera */
@{style} : @frames;
} //透明;
.opa(@num:0.8){
opacity : @num;
filter : ~'alpha(opacity='@num*100~')';
} //css3圆角;
.border-radius(@radius: 5px) {
-webkit-border-radius : @radius; /* Safari 和 Chrome */
-moz-border-radius : @radius; /* Firefox 4 */
-ms-border-radius : @radius; /* IE */
-o-border-radius : @radius; /* Opera */
border-radius : @radius;
} /**
* css3动画,只能写在调用页面,配合.css3( @style,@frames )使用;
* 例子 :
* .keyframes(starts,{
0% {transform:rotate(0deg)}
100%{transform:rotate(360deg)}
});
.className{.css3(animation,starts 8s linear infinite .3s );}
*/
.keyframes(@name, @frames) {
@-webkit-keyframes @name { @frames(); } /* Safari 和 Chrome */
@-moz-keyframes @name { @frames(); } /* Firefox 4 */
@-ms-keyframes @name { @frames(); } /* IE */
@-o-keyframes @name { @frames(); } /* Opera */
@keyframes @name { @frames(); }
} //打包默认样式;
.base(@content:950,@unit:px,@orange:#f60,@yellow:#fff000,@blue:#5fb3d2,@red:#ff546a,@gray:#ccc,@disabled:#ccc,@bor_color:#ccc){
.label();
/* 默认浮动 */
.fl{
.fl();
}
.fr{
.fr();
}
.clear{
.clear();
}
/* 显示隐藏 */
.hide{
.hide();
}
.show{
.block();
}
/* 文本方向 */
.tal{
.tal();
}
.tar{
.tar();
}
.tac{
.tac();
}
/* 截取 */
.over{
.over();
}
.ofv{
.ofv();
}
/* 定位 */
.abs{
.abs();
}
.rel{
.rel();
}
/* 鼠标手势 */
.cursor{
.cur();
}
.def{
.def();
}
/* 。。。。 */
.ellipsis{
.ellipsis();
}
/* 强制折行 */
.break-word{
.break-word();
}
/* 默认颜色 */
.colr-red{color: @red;}
.colr-blue{color: @blue;}
.colr-gray{color: @gray;}
.colr-yellow{color: @yellow;}
.colr-org{color: @orange;}
/* 默认背景颜色 */
.bg-red{ background-color: @red;}
.bg-blue{background-color: @blue;}
.bg-gray{background-color: @gray;}
.bg-yellow{background-color: @yellow;}
.bg-org{background-color: @orange;}
/* 默认置灰 */
.disabled{ background-color:@disabled; }
/* 默认字体 */
.base-fonts(32,@un:@unit);
/* margin padding */
.mt0 { margin-top: 0 !important; }
.base-styles(mt,margin-top,30,5,@un:@unit);
.mb0 { margin-bottom: 0 !important; }
.base-styles(mb,margin-bottom,30,5,@un:@unit);
.ml0 { margin-left: 0 !important; }
.base-styles(ml,margin-left,30,5,@un:@unit);
.mr0 { margin-right: 0 !important; }
.base-styles(mr,margin-right,30,5,@un:@unit);
/* 高度 */
.base-styles(blk,height,50,5,@un:@unit);
/* 边框 */
.bor_t{ border-top:solid 1px @bor_color;}
.bor_l{ border-left:solid 1px @bor_color;}
.bor_r{ border-right:solid 1px @bor_color;}
.bor_b{ border-bottom:solid 1px @bor_color;}
.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 @bor_color;}
.bor_dot{ border:1px dotted @bor_color;}
.border{ border:1px solid @bor_color;}
/* box */
.content{ width: unit(@content,@unit); margin:0 auto; }
}
应用 index.less:
//引入底层库;
@import (reference) "less-base.less"; //默认初始化;
.base(@content:1000); /*方法*/
.f12{
.f(12);
} /*css3透明*/
.opa8{
.opa(0.8);
} /*css3圆角*/
.border-radius{
.border-radius(5px);
} /*css3过渡*/
.transitions{
.tran();
} /*css3旋转*/
.rotate60{
.css3(transform,rotate(60deg));
} /* keyframes 必须放在引用页面调用 */
.keyframes(@name, @frames) {
@-webkit-keyframes @name { @frames(); }
@-moz-keyframes @name { @frames(); }
@-ms-keyframes @name { @frames(); }
@-o-keyframes @name { @frames(); }
@keyframes @name { @frames(); }
} /*旋转keyframes*/
.keyframes(rotates,{
0% {transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}); /*引用旋转keyframes*/
.keyframes-rotates{ .css3(animation,starts 8s linear infinite .3s ); }
最后生成的css:
html {
margin:;
padding:;
border:;
_background-image: url(n1othing.txt);
}
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
margin:;
padding:;
border:;
font-size: 100%;
vertical-align: baseline;
}
ol,
ul,
li {
list-style: none;
}
body {
line-height: 1.5;
background: white;
font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}
table,
tr,
th,
td {
border-collapse: collapse;
margin:;
padding:;
font-size: 100%;
vertical-align: baseline;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
float: none !important;
}
table,
th,
td,
select,
img,
input,
object {
vertical-align: middle;
}
:focus {
outline:;
}
input,
select {
margin:;
}
a {
color: #005EA7;
text-decoration: none;
}
a:hover {
color: #C7000B;
text-decoration: none;
}
p,
a,
td {
word-wrap: break-word;
word-break: break-all;
}
img {
border: none;
vertical-align: top;
}
textarea {
resize: none;
border: 1px solid #ccc;
}
textarea:hover {
border-color: #ccc;
}
input[type="text"],
input[type="button"] {
-webkit-appearance: none;
border-radius:;
font-family: 'Microsoft Yahei', '黑体', Arial, Helvetica, sans-serif;
}
input[type="text"] {
border: solid 1px #ccc;
border-radius:;
}
dfn {
font-style: normal;
font-family: Arial;
}
/* 默认浮动 */
.fl {
float: left;
}
.fr {
float: right;
}
.clear {
*zoom:;
}
/* 显示隐藏 */
.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 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 强制折行 */
.break-word {
word-break: break-all;
word-wrap: break-word;
}
/* 默认颜色 */
.colr-red {
color: #ff546a;
}
.colr-blue {
color: #5fb3d2;
}
.colr-gray {
color: #cccccc;
}
.colr-yellow {
color: #fff000;
}
.colr-org {
color: #ff6600;
}
/* 默认背景颜色 */
.bg-red {
background-color: #ff546a;
}
.bg-blue {
background-color: #5fb3d2;
}
.bg-gray {
background-color: #cccccc;
}
.bg-yellow {
background-color: #fff000;
}
.bg-org {
background-color: #ff6600;
}
/* 默认置灰 */
.disabled {
background-color: #cccccc;
}
/* 默认字体 */
.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 #cccccc;
}
.bor_l {
border-left: solid 1px #cccccc;
}
.bor_r {
border-right: solid 1px #cccccc;
}
.bor_b {
border-bottom: solid 1px #cccccc;
}
.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 #cccccc;
}
.bor_dot {
border: 1px dotted #cccccc;
}
.border {
border: 1px solid #cccccc;
}
/* box */
.content {
width: 1000px;
margin: 0 auto;
}
/*方法*/
.f12 {
font-size: 12px;
}
/*css3透明*/
.opa8 {
opacity: 0.8;
filter: alpha(opacity= 80 );
}
/*css3圆角*/
.border-radius {
-webkit-border-radius: 5px;
/* Safari 和 Chrome */
-moz-border-radius: 5px;
/* Firefox 4 */
-ms-border-radius: 5px;
/* IE */
-o-border-radius: 5px;
/* Opera */
border-radius: 5px;
}
/*css3过渡*/
.transitions {
-webkit-transition: all 2s;
/* Safari 和 Chrome */
-moz-transition: all 2s;
/* Firefox 4 */
-ms-transition: all 2s;
/* IE */
-o-transition: all 2s;
/* Opera */
transition: all 2s;
}
/*css3旋转*/
.rotate60 {
-webkit-transform: rotate(60deg);
/* Safari 和 Chrome */
-moz-transform: rotate(60deg);
/* Firefox 4 */
-ms-transform: rotate(60deg);
/* IE */
-o-transform: rotate(60deg);
/* Opera */
transform: rotate(60deg);
}
/* keyframes 必须放在引用页面调用 */
/*旋转*/
/* Safari 和 Chrome */
/* Firefox 4 */
/* IE */
/* Opera */
@-webkit-keyframes rotates {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes rotates {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-ms-keyframes rotates {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-o-keyframes rotates {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotates {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.keyframes-rotates {
-webkit-animation: starts 8s linear infinite 0.3s;
/* Safari 和 Chrome */
-moz-animation: starts 8s linear infinite 0.3s;
/* Firefox 4 */
-ms-animation: starts 8s linear infinite 0.3s;
/* IE */
-o-animation: starts 8s linear infinite 0.3s;
/* Opera */
animation: starts 8s linear infinite 0.3s;
}
sass
sass-base.scss
@charset "utf-8";
//清楚标签默认样式;
@mixin label(){
/* 清楚标签默认样式 */
html {margin:; padding:; border:;_background-image:url(n1othing.txt)}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:; padding:; border:; font-size: 100%; vertical-align: baseline; }
ol, ul, li { list-style: none; }
body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333;}
table,tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline;}
caption, th, td { text-align: left; font-weight: normal; float: none !important; }
table, th, td, select, img, input,object{ vertical-align: middle;}
:focus { outline:;}
input,select{margin:;}
a { color: #005EA7; text-decoration: none; }
a:hover { text-decoration:underline; }
p,a,td{word-wrap:break-word;word-break:break-all;}
img { border: none;vertical-align:top; }
textarea{ resize:none;border:1px solid #ccc;}
textarea:hover{border-color:#ccc;}
input[type="text"],input[type="button"]{-webkit-appearance: none;border-radius:;font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif;}
input[type="text"]{border:solid 1px #ccc; border-radius:;}
dfn {font-style: normal;font-family: Arial;}
} //浮动;
@mixin fl{
float:left;
}
@mixin fr{
float:right;
}
@mixin float($dir:left){
float:$dir;
}
//清除浮动;
@mixin clear(){
*zoom:;
&:after{
content: "";
display: block;
height:;
clear: both;
visibility: hidden;
overflow: hidden;
}
}
//清除滚动条出现的闪动;
@mixin outer{
// margin-left: calc(100vw - 100%)!important;
}
///////////////////////////////////////////////
// 循环初始字体大小: //
// @end : 结束字体大小(数字),必须输; //
// @begin : 开始字体大小(数字),可以省略; //
// @un : 字体单位(字符串),可以省略; //
// 例子 : @include base-fonts(32); //
///////////////////////////////////////////////
@mixin base-fonts( $end:100,$begin:12,$un:px ){ @if( TestNum( $begin,$end ) ){
@for $i from $begin through $end {
@if( $i%2 == 0 ){
.f-#{$i}{ font-size:$i+$un; }
}
}
} } /////////////////////////////////////////////////////////////
// 循环初始默认样式: //
// @name : 样式前缀名,必须输; //
// @style : 设置样式,必须输; //
// @end : 结束样式,必须输; //
// @begin : 开始样式,可以省略; //
// @mult : 循环累加倍数,可以省略; //
// @un : 字体单位(字符串),可以省略; //
// 例子 : @include base-styles(mb,margin-bottom,30,5); //
/////////////////////////////////////////////////////////////
@mixin base-styles( $name,$style,$end:100,$begin:5,$mult:5,$un:px ){ @if( TestNum( $begin,$end ) ){
@for $i from $begin through $end {
@if( $i%$mult == 0 ){
.#{$name}-#{$i}{ #{$style}:$i+$un; }
} }
} } //判断是否为数字;
@function TestNum( $num1,$num2 ){ @if ( not unitless($num1) or not unitless($num2) ){
@debug "其中数值有单位";
@return false;
}
@if ( type-of($num1) == number and type-of($num1) == number ) {
@return true;
}@else{
@debug "其中有值不数字";
@return false;
}
} //一行显示。。。。;
@mixin ellipsis{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
// 强制折行;
@mixin break-word{
word-break:break-all; /*支持IE，chrome，FF不支持*/
word-wrap:break-word; /*支持IE，chrome，FF*/
}
//设置字体;
@mixin f($size:12,$un:px){font-size:$size+$un; }
//设置字体;
@mixin fa($family:'Microsoft Yahei'){ font-family:$family,'宋体','黑体';}
@mixin tal{ text-align: left; }
@mixin tar{ text-align: right; }
@mixin tac{ text-align: center; }
@mixin text-align( $dir:left ){text-align: $dir;}
@mixin over{overflow:hidden; }
@mixin ofv{overflow:visible !important;}
@mixin hide{ display:none; }
@mixin block{ display:block; }
@mixin abs{ position: absolute; }
@mixin rel{ position: relative; }
@mixin cur{ cursor: pointer; }
@mixin def{ cursor:default;} //css3过渡;
@mixin tran($name:all,$time:2s){
-webkit-transition : $name $time; /* Safari 和 Chrome */
-moz-transition : $name $time; /* Firefox 4 */
-ms-transition : $name $time; /* IE */
-o-transition : $name $time; /* Opera */
transition : $name $time;
} //css3;
@mixin css3( $style,$frames ){
-webkit-#{$style} : $frames; /* Safari 和 Chrome */
-moz-#{$style} : $frames; /* Firefox 4 */
-o-#{$style} : $frames; /* Opera */
#{$style} : $frames;
} //透明;
@mixin opa($num:0.8){
opacity : $num;
filter : alpha(opacity=$num*100);
} //css3圆角;
@mixin border-radius($radius: 5px) {
-webkit-border-radius : $radius; /* Safari 和 Chrome */
-moz-border-radius : $radius; /* Firefox 4 */
-ms-border-radius : $radius; /* IE */
-o-border-radius : $radius; /* Opera */
border-radius : $radius;
} //改变默认选中颜色
@mixin selection( $bg:#00F,$color:#fff,$obj:0 ){ @if( type-of($obj) == number ){ ::selection {
background:$bg;
color:$color;
}
::-moz-selection {
background:$bg;
color:$color;
}
::-webkit-selection {
background:$bg;
color:$color;
}
::-ms-selection {
background:$bg;
color:$color;
}
::-o-selection {
background:$bg;
color:$color;
} }@else{ .#{$obj}::selection {
background:$bg;
color:$color;
}
.#{$obj}::-moz-selection {
background:$bg;
color:$color;
}
.#{$obj}::-webkit-selection {
background:$bg;
color:$color;
}
.#{$obj}::-ms-selection {
background:$bg;
color:$color;
}
.#{$obj}::-o-selection {
background:$bg;
color:$color;
} }
} ///////////////////////////////////////////////////////////////////////////
// css3动画,只能写在调用页面,配合.css3( @style,@frames )使用; //
// 例子 : //
// @include keyframes(animation-name) { //
// 0% { //
// #{$browser}transform: translate3d(100%, 0, 0); //
// } //
// 100% { //
// #{$browser}transform: translate3d(0%, 0, 0); //
// } //
// } //
// .className{ @include css3(animation,animation-name 5s infinite); } //
///////////////////////////////////////////////////////////////////////////
$browser: null;
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
$browser: '-webkit-' !global;
@content;
}
@-moz-keyframes #{$animationName} {
$browser: '-moz-' !global;
@content;
}
@-ms-keyframes #{$animationName} {
$browser: '-ms-' !global;
@content;
}
@-o-keyframes #{$animationName} {
$browser: '-o-' !global;
@content;
}
@keyframes #{$animationName} {
$browser: '' !global;
@content;
}
} ///////////////////////////////////////////////////////////////////////////
// css3 滚动条; //
// 例子 : //
// @include scrollbar(scrollbar-track){ //
// #{$browser}box-shadow: inset 0 0 6px rgba(0,0,0,0.3); //
// background-color: #F5F5F5; //
// }; //
// @include scrollbar(scrollbar){ //
// width: 12px; //
// }; //
// @include scrollbar(scrollbar-thumb){ //
// #{$browser}border-radius: 10px; //
// #{$browser}box-shadow: inset 0 0 6px rgba(0,0,0,.3); //
// background-color: #fbd0c9; //
// }; //
///////////////////////////////////////////////////////////////////////////
@mixin scrollbar($style){
::-webkit-#{$style}{
$browser: '-webkit-' !global;
@content;
}
::-moz-#{$style}{
$browser: '-moz-' !global;
@content;
}
::-ms-#{$style}{
$browser: '-ms-' !global;
@content;
}
::-o-#{$style}{
$browser: '-o-' !global;
@content;
}
::#{$style}{
$browser: '' !global;
@content;
}
} //打包默认样式;
@mixin base($content:950,$unit:px,$orange:#f60,$yellow:#fff000,$blue:#5fb3d2,$red:#ff546a,$gray:#ccc,$disabled:#ccc,$bor_color:#ccc){
@include label();
/* 默认浮动 */
.fl{
@include fl;
}
.fr{
@include fr;
}
.clear{
@include clear;
}
/* 显示隐藏 */
.hide{
@include hide;
}
.show{
@include block;
}
/* 文本方向 */
.tal{
@include tal;
}
.tar{
@include tar;
}
.tac{
@include tac;
}
/* 截取 */
.over{
@include over;
}
.ofv{
@include ofv;
}
/* 定位 */
.abs{
@include abs;
}
.rel{
@include rel;
}
/* 鼠标手势 */
.cursor{
@include cur;
}
.def{
@include def;
}
/* 。。。。 */
.ellipsis{
@include ellipsis;
}
/* 强制折行 */
.break-word{
@include break-word;
}
/* 默认颜色 */
.colr-red{color: $red;}
.colr-blue{color: $blue;}
.colr-gray{color: $gray;}
.colr-yellow{color: $yellow;}
.colr-org{color: $orange;}
/* 默认背景颜色 */
.bg-red{ background-color: $red;}
.bg-blue{background-color: $blue;}
.bg-gray{background-color: $gray;}
.bg-yellow{background-color: $yellow;}
.bg-org{background-color: $orange;}
/* 默认置灰 */
.disabled{ background-color:$disabled; }
/* 默认字体 */
@include base-fonts(32,$un:$unit);
/* margin padding */
.mt0 { margin-top: 0 !important; }
@include base-styles(mt,margin-top,30,5,$un:$unit);
.mb0 { margin-bottom: 0 !important; }
@include base-styles(mb,margin-bottom,30,5,$un:$unit);
.ml0 { margin-left: 0 !important; }
@include base-styles(ml,margin-left,30,5,$un:$unit);
.mr0 { margin-right: 0 !important; }
@include base-styles(mr,margin-right,30,5,$un:$unit);
/* 高度 */
@include base-styles(blk,height,50,5,$un:$unit);
/* 边框 */
.bor_t{ border-top:solid 1px $bor_color;}
.bor_l{ border-left:solid 1px $bor_color;}
.bor_r{ border-right:solid 1px $bor_color;}
.bor_b{ border-bottom:solid 1px $bor_color;}
.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 $bor_color;}
.bor_dot{ border:1px dotted $bor_color;}
.border{ border:1px solid $bor_color;}
/* box */
.content{ width: $content+$unit; margin:0 auto; }
}
应用 index.scss:
@charset "UTF-8";//解决中文注释问题;
//引入底层库;
@import "sass-base.scss"; //默认初始化;
@include base($content:1000); /*方法*/
.f12{
@include f(12);
} /*css3圆角*/
.border-radius{
@include border-radius(5px);
} /*css3过渡*/
.transitions{
@include tran();
} /*css3旋转*/
.rotate60{
@include css3(transform,rotate(60deg));
} /*旋转keyframes*/
@include keyframes(rotates) {
0% {
#{$browser}transform:rotate(0deg);
}
100% {
#{$browser}transform:rotate(360deg);
}
} /*引用旋转keyframes*/
.keyframes-rotates{ @include css3(animation,starts 8s linear infinite .3s ); }
最后生成的css:
@charset "UTF-8";
/* 清楚标签默认样式 */
html { margin:; padding:; border:; _background-image: url(n1othing.txt); } body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:; padding:; border:; font-size: 100%; vertical-align: baseline; } ol, ul, li { list-style: none; } body { line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 12px; color: #333; } table, tr, th, td { border-collapse: collapse; margin:; padding:; font-size: 100%; vertical-align: baseline; } caption, th, td { text-align: left; font-weight: normal; float: none !important; } table, th, td, select, img, input, object { vertical-align: middle; } :focus { outline:; } input, select { margin:; } a { color: #005EA7; text-decoration: none; } a:hover { text-decoration: underline; } p, a, td { word-wrap: break-word; word-break: break-all; } img { border: none; vertical-align: top; } textarea { resize: none; border: 1px solid #ccc; } textarea:hover { border-color: #ccc; } input[type="text"], input[type="button"] { -webkit-appearance: none; border-radius:; font-family: 'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif; } input[type="text"] { border: solid 1px #ccc; border-radius:; } dfn { font-style: normal; font-family: Arial; } /* 默认浮动 */
.fl { float: left; } .fr { float: right; } .clear { *zoom:; }
.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 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* 强制折行 */
.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; } /*方法*/
.f12 { font-size: 12px; } /*css3圆角*/
.border-radius { -webkit-border-radius: 5px; /* Safari 和 Chrome */ -moz-border-radius: 5px; /* Firefox 4 */ -ms-border-radius: 5px; /* IE */ -o-border-radius: 5px; /* Opera */ border-radius: 5px; } /*css3过渡*/
.transitions { -webkit-transition: all 2s; /* Safari 和 Chrome */ -moz-transition: all 2s; /* Firefox 4 */ -ms-transition: all 2s; /* IE */ -o-transition: all 2s; /* Opera */ transition: all 2s; } /*css3旋转*/
.rotate60 { -webkit-transform: rotate(60deg); /* Safari 和 Chrome */ -moz-transform: rotate(60deg); /* Firefox 4 */ -o-transform: rotate(60deg); /* Opera */ transform: rotate(60deg); } /*旋转keyframes*/
@-webkit-keyframes rotates { 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes rotates { 0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); } }
@-ms-keyframes rotates { 0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); } }
@-o-keyframes rotates { 0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); } }
@keyframes rotates { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
/*引用旋转keyframes*/
.keyframes-rotates { -webkit-animation: starts 8s linear infinite 0.3s; /* Safari 和 Chrome */ -moz-animation: starts 8s linear infinite 0.3s; /* Firefox 4 */ -o-animation: starts 8s linear infinite 0.3s; /* Opera */ animation: starts 8s linear infinite 0.3s; }
后记:
工作大体总结的小小底层库，分了less,sass写的两个版本而已,当然sass本身就有compass这个库,个人愚见从实战使用上也没多大用,不如自己写写还能加深语法使用,还有就是我没把css3属性一个个的单独拆出来是因为我记性不好。。。。记那么多Mixins,本身也只是加个前缀而已写一个通用Mixins加上就可以了所以才有css3Mixins通用~;