base_mixins
v1.10.0
Published
基于sass开发的简写、组合速写混合宏
Downloads
13
Readme
base_mixins
基于sass开发的简写、组合速写的混合宏
npm安装base_mixins
$ npm install -D base_mixinsvue-cli 3.0 生成的项目中全局引用 创建vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "./node_modules/base_mixins/_base_mixins.scss";`
}
}
}
}简单代码提示插件:
VS Code 简单代码提示插件 mixins-snippets 也可以直接在VS Code 插件库里搜索 mixins-snippets (主力维护的提示插件!VS Code大法好!)
Sublime Text 简单代码提示插件 MixinsSnippets
全局设置参数:
$global-for-ie : true(默认)/false; ( 兼容老版ie ) $vendors : webkit moz ms o; ( 设置css3前缀 ) $prefixWebkit : true!default(默认)/false ( 开启谷歌前缀:webkit前缀 ) $prefixMozilla : true !default(默认)/false; ( 开启火狐前缀:moz前缀 ) $prefixMicrosoft : true!default(默认)/false; ( 开启IE前缀:ms前缀 ) $prefixOpera : true!default(默认)/false; ( 开启opera前缀:o前缀 ) $prefixNo : true/false!default(默认); ( 默认前缀关闭 ) $global-unit : px; ( 全局默认补全单位,如果设置默认单位为'rem'/'rpx'/'vw'且不需要加'!important'可直接传值 全部值会自动转换) $designWidth : 640; ( 移动转rem默认尺寸大小 ) $wxDesignWidth : 750; ( 微信小程序转rpx默认尺寸大小 ) $vmDesignWidth : 750; ( 移动端转vw默认尺寸 ) $vmDesignHeight : 750; ( 移动端转vh默认尺寸 ) $vmFontSize : 75; ( 移动端转vw设置的字体 ) $remFormula : null; ( 移动端rem自定义转化 )
动画的混合宏(_animation.scss):
keyframes ( 设置@keyframes 规则 )
例子 :
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); }ani ( 设置animation )
例子 :
.className{ @include ani(keyframes 5s infinite); }ani-name ( 设置animation-name )
例子 :
.className{ @include ani-name(keyframes-name); }ani-dur ( 设置animation-duration )
例子 :
不传参数默认'0.2s';
.className{ @include ani-dur(); }
或
.className{ @include ani-dur(0.5s); }ani-time ( 设置animation-timing-function )
例子 :
不传参数默认'linear';
.className{ @include ani-time(); }
或
.className{ @include ani-time(linear); }ani-itc ( 设置animation-iteration-count )
例子 :
不传参数默认'1';
.className{ @include ani-itc(); }
或
.className{ @include ani-itc(infinite); }ani-dir ( 设置animation-direction )
例子 :
不传参数默认’alternate';
.className{ @include ani-dir(); }
或
.className{ @include ani-dir(normal); }ani-play ( 设置animation-play-state )
例子 :
不传参数默认'running';
.className{ @include ani-play(); }
或
.className{ @include ani-play(paused); }ani-del ( 设置animation-delay )
例子 :
不传参数默认'0.2s';
.className{ @include ani-del(); }
或
.className{ @include ani-del(0.5s); }ani-fill ( 设置animation-fill-mode )
例子 :
不传参数默认'forwards';
.className{ @include ani-fill(); }
或
.className{ @include ani-fill(backwards); }背景的混合宏(_background.scss):
bg ( 设置background )
例子 :
参数1 $color : 颜色值（没有默认颜色）;
参数2 $img : 图片路径;
参数3 $repeat : 'no-repeat'(默认) 设置background-repeat;
参数4 $position : '0 0'(默认) 设置background-position;
参数5 $ie6 : false(默认) 是否兼容png在ie6下添加gif;
.className{ @include bg(#fff,'../i/a.jpg'); }
或
.className{ @include bg(#fff); }no-bg ( 取消背景background:none )
例子 :
参数 $agr : true(默认) 是否添加!important
.className{ @include no-bg; }bgi ( 设置background-image )
例子 :
参数1 $img : 图片路径;
参数2 $repeat : 'no-repeat'(默认) 设置background-repeat;
参数3 $position : '0 0'(默认) 设置background-position;
参数4 $ie6 : false(默认) 是否兼容png在ie6下添加gif;
.className{ @include bgi('../i/new-close.gif',$position:center center); }bgr ( 设置background-repeat )
例子 :
参数 $arg : no-repeat(默认) 图片平铺;
.className{ @include bgr; }bgz ( 设置background-size )
例子 :
不传参数默认'cover';
.className{ @include bgz(); }
或
.className{ @include bgz(contain); }bgiz ( 设置background-image && background-size )
例子 :
参数1 $img : 图片路径;
参数2 $repeat : 'no-repeat'(默认) 设置background-repeat;
参数3 $position : '0 0'(默认) 设置background-position;
参数4 $size : cover(默认) 设置background-size;
.className{ @include bgiz('../i/new-close.gif',$position:center center); }bg-clip ( 设置background-clip )
例子 :
不传参数默认'content-box';
.className{ @include bg-clip(); }
或
.className{ @include bg-clip(padding-box); }bgo ( 设置background-origin )
例子 :
不传参数默认'content-box';
.className{ @include bgo(); }
或
.className{ @include bgo(border-box); }bgp ( 设置background-position )
例子 :
不传参数默认'center cente';
.className{ @include bgp(); }
或
.className{ @include bgp(center center); }bgc ( 设置背景颜色 )
例子 :
参数1 $color : 为颜色;
参数2 $support-for-ie : true/false(默认为) 如果$global-for-ie:false 又想当前className的rgba兼容ie则传true;
.className{ @include bgc(#fff); }
或
.className{ @include bgc(rgba(0,0,0,0.25)); }
或
$global-for-ie:false;
.className{ @include bgc(rgba(0,0,0,0.25),true); }max-img ( 用max-width来防止图片撑破容器 )
例子 :
.className{ @include max-img; }bg-image ( 设置@2x/@3x 背景图片 )
例子 :
参数1 $url : 图片路径;
参数2 $repeat : 'no-repeat' (默认) 设置background-repeat;
参数3 $position : '0 0' (默认) 设置background-position;
.className{ @include bg-image('../i/i/img.png'); }fullscreen-bg ( 设置全屏大图背景 )
例子 :
参数1 $url : 图片路径;
参数3 $position : '50% 50%'(默认) 设置background-position;
.className{ @include fullscreen-bg('../i/i/img.png'); }bg-sp ( css sprite:只能X轴、Y轴(默认Y轴) )
例子 :
参数1 $name : '.sprite-ico'(默认图标名) 设置class名;
参数2 $number : 10 (默认值10) 循环图标个数;
参数3 $mult : 2 (默认值2) 间隔距离;
参数4 $startX : 0 (默认值0) x轴开始像素点;
参数5 $startY : 0 (默认值0) y轴开始像素点;
参数6 $dir : y (默认y轴) y 方向:X轴、Y轴、XY轴(x,y,xy);
参数7 $bgz : false (默认false) 设置background-size;
参数8 $url : false (默认false) 图片路径;
参数9 $ie6 : false (默认false) 是否兼容png在ie6下添加gif;
.sprite-ico{
@include wh(163);
@include bgi('../i/1.jpg');
}
@include bg-sp('.sprite-ico',5,163){ @include fl; };
或者
@include bg-sp('.sprite-ico',5,163,$dir:x);bg-sp2 ( css sprite:矩阵图形(默认X轴开始) )
例子 :
参数1 $name : '.sprite-ico'(默认图标名) 设置class名;
参数2 $y : 0 (默认值0) Y轴个数(行数);
参数3 $x : 0 (默认值0) X轴个数(列数);
参数4 $multY : 2 (默认值2) y轴间隔距离;
参数5 $multX : 2 (默认值2) x轴间隔距离;
参数6 $startX : 0(默认值0) x轴开始像素点;
参数7 $startY : 0(默认值0) y轴开始像素点;
参数8 $dir : y(默认y轴) y 方向:X轴、Y轴、XY轴(x,y,xy);
参数9 $bgz : false(默认false) 设置background-size;
参数10 $url : false(默认false) 图片路径;
参数11 $ie6 : false(默认false) 是否兼容png在ie6下添加gif;
.sprite-ico{
@include wh(163);
@include bgi('../i/1.jpg');
}
@include bg-sp('.sprite-ico',2,3,163){ @include fl; };
或者
@include bg-sp('.sprite-ico',2,3,163,$dir:x);bgList-sp ( css sprite:只能X轴、Y轴(默认Y轴) )
例子 :
参数1 $list : () (默认空) 设置多个class名;
参数2 $mult : 2 (默认值2) 间隔距离;
参数3 $startX : 0 (默认值0) x轴开始像素点;
参数4 $startY : 0 (默认值0) y轴开始像素点;
参数5 $dir : y (默认y轴) y 方向:X轴、Y轴、XY轴(x,y,xy);
参数6 $bgz : false (默认false) 设置background-size;
参数7 $url : false (默认false) 图片路径;
参数8 $ie6 : false (默认false) 是否兼容png在ie6下添加gif;
.sprite-ico{
@include wh(163);
@include bgi('../i/1.jpg');
}
@include bgList-sp( ('.sprite-name',
'.sprite-sex',
'.sprite-age'),163){ @include fl; };
或者
@include bgList-sp( ('.sprite-name',
'.sprite-sex',
'.sprite-age'),163,$dir:x);bgList-sp2 ( css sprite:矩阵图形(默认X轴开始) )
例子 :
参数1 $list : () (默认空) 设置多个class名;
参数2 $y : 0 (默认值0) Y轴个数(行数);
参数3 $x : 0 (默认值0) X轴个数(列数);
参数4 $multY : 2 (默认值2) y轴间隔距离;
参数5 $multX : 2 (默认值2) x轴间隔距离;
参数6 $startX : 0(默认值0) x轴开始像素点;
参数7 $startY : 0(默认值0) y轴开始像素点;
参数8 $dir : y(默认y轴) y 方向:X轴、Y轴、XY轴(x,y,xy);
参数9 $bgz : false(默认false) 设置background-size;
参数10 $url : false(默认false) 图片路径;
参数11 $ie6 : false(默认false) 是否兼容png在ie6下添加gif;
.sprite-ico{
@include wh(163);
@include bgi('../i/1.jpg');
}
@include bgList-sp2( ('.sprite-name',
'.sprite-age',
'.sprite-sex',
'.sprite-native',
'.sprite-education',
'.sprite-married',),2,3,163){ @include fl; };
或者
@include bgList-sp2( ('.sprite-name',
'.sprite-age',
'.sprite-sex',
'.sprite-native',
'.sprite-education',
'.sprite-married',),2,3,163,$dir:y);块的混合宏(_block.scss):
block ( 设置display:block )
例子 :
参数: $args:false(默认)/true 是否加!important;
.className{ @include block; }
或
.className{ @include block(true); }inline ( 设置display:inline )
例子 :
.className{ @include inline; }inblock ( 设置inline-block )
例子 :
.className{ @include inblock; }box ( 设置display:box )
例子 :
.className{ @include box; }table ( 设置display:table )
例子 :
.className{ @include table; }none ( 设置display:none )
例子 :
参数: $args:false(默认)/true 是否加!important;
.className{ @include none; }
或者
.className{ @include none(true); }show ( 设置display:block )
例子 :
.className{ @include show; }hide ( 设置display:none )
例子 :
.className{ @include hide; }box-sz ( 设置box-sizing )
例子 :
不传参数默认'border-box';
.className{ @include box-sz(); }
或
.className{ @include box-sz(content-box); }box-fx ( 设置box-flex:1 )
例子 :
不传参数默认'1';
.className{ @include box-fx(1); }
或
.className{ @include box-fx(3); }box-o ( 设置box-orient:block-axis )
例子 :
不传参数默认'horizontal';
.className{ @include box-o(); }
或
.className{ @include box-o(block-axis); }horizontal ( box-orient:horizontal )
例子 :
.className{ @include horizontal; }vertical ( box-orient:vertical )
例子 :
.className{ @include vertical; }reverse ( box-direction:reverse )
例子 :
.className{ @include reverse; }box-dir ( 设置box-direction )
例子 :
不传参数默认'reverse';
.className{ @include box-dir(); }
或
.className{ @include box-dir( inherit ); }no-box-dir ( 默认方向方向排列box-direction:normal )
例子 :
.className{ @include no-box-dir; }box-a ( 设置box-align )
例子 :
不传参数默认'center';
.className{ @include box-a(); }
或
.className{ @include box-a( baseline ); }flex ( display:flex )
例子 :
.className{ @include flex; }flexbox ( display:flexbox )
例子 :
.className{ @include flexbox; }inflex ( display:inline-flex )
例子 :
.className{ @include inflex; }fx ( 设置flex )
例子 :
不传参数默认'1';
.className{ @include fx(); }
或
.className{ @include fx(2); }fx-dir ( 设置flex-direction )
例子 :
不传参数默认'row';
.className{ @include fx-dir(); }
或
.className{ @include fx-dir( column ); }fx-row ( flex-direction:row )
例子 :
.className{ @include fx-row(); }fx-w ( 设置flex-wrap )
例子 :
不传参数默认'wrap';
.className{ @include fx-w(); }
或
.className{ @include fx-w( wrap-reverse ); }fx-f ( 设置flex-flow )
例子 :
不传参数默认'row wrap';
.className{ @include fx-f(); }
或
.className{ @include fx-f( row wrap-reverse ); }jc ( 设置justify-content )
例子 :
不传参数默认'flex-start';
.className{ @include jc(); }
或
.className{ @include jc( flex-end ); }ai ( 设置align-items )
例子 :
不传参数默认'flex-start';
.className{ @include ai(); }
或
.className{ @include ai( flex-end ); }ac ( 设置align-content )
例子 :
不传参数默认'flex-start';
.className{ @include ac(); }
或
.className{ @include ac( flex-end ); }as ( 设置align-self )
例子 :
不传参数默认'1px';
.className{ @include as(); }
或
.className{ @include as( 2 ); }fx-start ( 设置flex-start )
例子 :
不传参数默认'jc';
.className{ @include fx-start(); }
或
.className{ @include fx-start( ai ); }
或
.className{ @include fx-start( ac ); }
或
.className{ @include fx-start( as ); }fx-end ( 设置flex-end )
例子 :
不传参数默认'jc';
.className{ @include fx-end(); }
或
.className{ @include fx-end( ai ); }
或
.className{ @include fx-end( ac ); }
或
.className{ @include fx-end( as ); }fx-center ( 设置flex-end )
例子 :
不传参数默认'jc';
.className{ @include fx-center(); }
或
.className{ @include fx-center( ai ); }
或
.className{ @include fx-center( ac ); }
或
.className{ @include fx-center( as ); }fx-between ( 设置space-between )
例子 :
不传参数默认'jc';
.className{ @include fx-between(); }
或
.className{ @include fx-between( ai ); }
或
.className{ @include fx-between( ac ); }
或
.className{ @include fx-between( as ); }fx-around ( 设置space-between )
例子 :
不传参数默认'jc';
.className{ @include fx-around(); }
或
.className{ @include fx-around( ai ); }
或
.className{ @include fx-around( ac ); }
或
.className{ @include fx-around( as ); }fx-baseline ( align-items:baseline )
例子 :
.className{ @include fx-baseline; }fx-stretch ( 设置stretch )
例子 :
不传参数默认'ac';
.className{ @include fx-stretch(); }
或
.className{ @include fx-stretch( ai ); }odr ( 设置order )
例子 :
不传参数默认'1';
.className{ @include odr(); }
或
.className{ @include odr( 2 ); }fx-g ( 设置flex-grow )
例子 :
不传参数默认'1';
.className{ @include fx-g(); }
或
.className{ @include fx-g( 2 ); }fx-s ( 设置flex-shrink )
例子 :
不传参数默认'1';
.className{ @include fx-s(); }
或
.className{ @include fx-s( 2 ); }fx-b ( 设置flex-basis )
例子 :
不传参数默认'1';
.className{ @include fx-b(); }
或
.className{ @include fx-b( 2 ); }gd ( 设置display:grid )
例子 :
.className{ @include gd; }gd-t-cols ( 设置grid-template-columns )
例子 :
.className{ @include gd-t-cols( 150px 1fr ); }gd-t-rows ( 设置grid-template-rows )
例子 :
.className{ @include gd-t-rows( 50px 1fr 30px ); }gd-row-gap ( 设置grid-row-gap )
例子 :
.className{ @include gd-row-gap( 20px ); }gd-column-gap ( 设置grid-column-gap )
例子 :
.className{ @include gd-column-gap( 20px ); }gd-gap ( 设置grid-gap )
例子 :
.className{ @include gd-gap( 20px ); }gd-col-start ( 设置grid-column-start )
例子 :
.className{ @include gd-col-start( 1 ); }gd-col-end ( 设置grid-column-end )
例子 :
.className{ @include gd-col-end( auto ); }gd-col ( 设置grid-column )
例子 :
.className{ @include gd-col( 50% 200px ); }gd-row-start ( 设置grid-row-start )
例子 :
.className{ @include gd-row-start( 2 ); }gd-row-end ( 设置grid-row-end )
例子 :
.className{ @include gd-row-end( 2 ); }gd-row ( 设置grid-row )
例子 :
.className{ @include gd-row( 100px (30px 60px) ); }gd-auto-rows ( 设置grid-auto-rows )
例子 :
.className{ @include gd-auto-rows( 1fr ); }gd-t-areas ( 设置grid-template-areas )
例子 :
.className{ @include gd-t-areas( none ); }ji ( 设置justify-items )
例子 :
.className{ @include ji( center ); }js ( 设置justify-self )
例子 :
.className{ @include js( flex-start ); }浮动混合宏(_clear.scss):
fl ( 设置float:left )
例子 :
.className{ @include fl; }fr ( 设置float:left )
例子 :
.className{ @include fr; }clear ( 设置清浮动clear )
例子 :
.className{ @include clear; }css3的混合宏(_css3.scss):
css3 ( 设置css3前缀 )
例子 :
css3前缀:
$style : css属性;
$frames : css属性内容;
$prefix : true(默认)/false 是否添加样式前缀,默认开启;
$suffix : true/false(默认) 是否添加样式后缀,默认关闭;
.className{ @include css3(display,box); }
或
.className{ @include css3(display,box,false,true); }cnt ( 设置content )
例子 :
不传参数默认'';
.className{ @include cnt(); }
或
.className{ @include cnt('123'); }trs ( 设置transition )
例子 :
可不传参数默认‘all 0.3s ease’;
.className{ @include trs(); }
或
.className{ @include trs(all 0.7s ease); }trs-p ( 设置transition-property )
例子 :
.className{ @include trs-p(width); }trs-dur ( 设置transition-property )
例子 :
.className{ @include trs-dur(0.2s); }trs-tf ( 设置transition-timing-function )
例子 :
.className{ @include trs-tf(linear); }trs-del ( 设置transition-delay )
例子 :
.className{ @include trs-del(0.2s); }bdrs ( 设置border-radius )
例子 :
不传参数默认5px;
.className{ @include bdrs(); }
或
.className{ @include bdrs(50); }box-s ( 设置box-shadow )
例子 :
不传参数默认'0 0 4px rgba(0,0,0,.3)';
.className{ @include box-s(); }
或
.className{ @include box-s(10px 10px 4px rgba(0,0,0,.3)); }设置text-s ( 设置text-shadow )
例子 :
不传参数默认'0 0 4px rgba(0,0,0,.3)';
.className{ @include text-s(); }
或
.className{ @include t-sh(10px 10px 4px rgba(0,0,0,.3)); }no-box-s ( 设置box-shadow:none )
例子 :
.className{ @include no-box-s; }no-text-s ( 设置text-shadow:none )
例子 :
.className{ @include no-text-s; }usr-s ( 设置user-select )
例子 :
不传参数默认'text';
.className{ @include usr-s(); }
或
.className{ @include usr-s(); }user-s-ban ( 设置禁止文本被选择 )
例子 :
不传参数默认'text';
.className{ @include user-s-ban(); }trf ( 设置transform )
例子 :
.className{ @include trf(rotate(7deg)); }trf-o ( 设置transform-origin )
例子 :
.className{ @include trf-o(20% 40%); }trf-s ( 设置transform-style; )
例子 :
不传参数默认'preserve-3d';
.className{ @include trf-s(); }
或
.className{ @include trf-s(flat); }bv ( 设置backface-visibility )
例子 :
不传参数默认'hidden';
.className{ @include bv(); }
或
.className{ @include bv(visible); }pec ( 设置perspective )
例子 :
不传参数默认'none';
.className{ @include pec(); }
或
.className{ @include pec(500); }pec-o ( 设置perspective-origin )
例子 :
不传参数默认'50% 50%';
.className{ @include pec-o(); }
或
.className{ @include pec-o(30% 60%); }pec-ox ( 设置perspective-origin-x )
例子 :
不传参数默认'50%';
.className{ @include pec-ox(); }
或
.className{ @include pec-ox(30%); }pec-oy ( 设置perspective-origin-y )
例子 :
不传参数默认'50%';
.className{ @include pec-oy(); }
或
.className{ @include pec-oy(30%); }rotate ( 设置transform:rotate )
例子 :
.className{ @include rotate(50deg); }pe ( 设置pointer-events )
例子 :
参数 $arg : none (默认none) 设置pointer-events;
.className{ @include pe; }filter ( 设置filter )
例子 :
.className{ @include filter( grayscale(100%) ); }blur ( 设置模糊 )
例子 :
参数 $blur : 10px (默认10px) 设置模糊像素;
.className{ @include blur(); }grayscale ( 设置图片灰色 )
例子 :
参数 $args : 100% (默认100%) 设置grayscale;
.className{ @include grayscale(); }beauty-placeholder ( 设置placeholder )
例子 :
参数1 $fz : 12 (默认12px) 设置font-size;
参数2 $color : #999 (默认#999) 设置color;
参数3 $align : left (默认left) 设置text-align;
.className{ @include beauty-placeholder(12,red,left); }beauty-placeholder2 ( 自定义placeholder )
例子 :
@include beauty-placeholder2{
color:red;
font-size:12px;
}beauty-select ( 设置选中文本 )
例子 :
参数1 $fz : 12 (默认12px) 设置font-size;
参数2 $color : #999 (默认#999) 设置color;
参数3 $align : left (默认left) 设置text-align;
@include beauty-placeholder2{
color:red;
font-size:12px;
}scrollbar ( 设置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;
};文本的混合宏(_text.scss):
tofl ( 超出一行.... )
例子 :
.className{ @include tofl; }erow ( 多行显示... )
例子 :
不传参数默认2行;
.className{ @include erow(); }
或
.className{ @include erow(3); }ws ( 强制一行 )
例子 :
参数 $arg : nowrap (默认) 设置white-space;
.className{ @include ws(); }wm ( 文字排列方式 )
例子 :
参数 $arg : normal (默认) 设置writing-mode;
.className{ @include ws(); }bword ( 强制折行 )
例子 :
.className{ @include bword; }wdw ( 断行 )
例子 :
.className{ @include wdw; }hide-text ( 隐藏文字 )
例子 :
.className{ @include hide-text(); }ti ( 设置text-indent )
例子 :
不传参数默认'2em';
.className{ @include ti(); }
或
.className{ @include ti(4px); }replace-text ( 设置text-indent )
例子 :
参数1 $image: 图片路径;
参数2 $position: 50% 50%(默认) 图片x y轴;
参数3 $ie6: false(默认) 是否兼容ie6的png;
.className{ @include replace-text('../i/a.jpg',10px,220px); }tal ( text-align:left )
例子 :
.className{ @include tal; }tar ( text-align:right )
例子 :
.className{ @include tar; }tac ( text-align:center )
例子 :
.className{ @include tac; }ta ( 设置text-align )
例子 :
不传参数默认'left';
.className{ @include ta()};
或
.className{ @include ta(right); }tj ( 设置text-justify )
例子 :
参数 $arg : auto(默认) 设置text-justify;
.className{ @include tj(); }td ( 设置text-decoration )
例子 :
不传参数默认'line-through';
.className{ @include td()};
或
.className{ @include td(overline); }line-over ( text-decoration:overline )
例子 :
.className{ @include line-over; }line-del ( text-decoration:line-through )
例子 :
.className{ @include line-del; }line-underline ( text-decoration:underline )
例子 :
.className{ @include line-underline; }line-blink ( text-decoration:blink )
例子 :
.className{ @include line-blink; }no-line ( text-decoration:none !important )
例子 :
.className{ @include no-line; }宽高的混合宏(_size.scss):
w ( 设置width )
例子 :
.className{ @include w(12); }h ( 设置height )
例子 :
.className{ @include h(12); }mah ( 设置max-height )
例子 :
.className{ @include mah(12); }maw ( 设置max-width )
例子 :
.className{ @include maw(12); }mih ( 设置min-height )
例子 :
.className{ @include mih(12); }miw ( 设置min-width )
例子 :
.className{ @include miw(12); }size ( 设置width/height )
例子 :
参数1 $width
参数2 $height (可不写,width等于height值)
.className{ @include wh(12,30); }
或者
.className{ @include wh(12); }px转rem的混合宏(_rem.scss);
px2rem ( px转rem )
例子 :
需要页面引入'hotcss.js';
参数1 $px : 转换数字,px单位可不写
参数2 $important : true/false(默认) 是否加!important
$designWidth : 640;
.className{ @include w(px2rem(100)); }
或
.className{ @include w(px2rem(100,true)); }gpx2rem ( 简单rem多值转行 )
例子 :
.className{ @include pal(12,12,12,12); }px2rpx ( 微信小程序rpx单位函数 )
例子 :
参数1 $px : 转换数字,px单位可不写
参数2 $important : true/false(默认) 是否加!important
$designWidth : 640;
.className{ width : px2rem(100); }
或
.className{ @include w(px2rpx(100,true)); }gpx2rpx ( 简单rpx多值转行 )
例子 :
.className{ @include pal(gpx2rpx(10,10,10,10)); }
或
.className{ margin:gpx2rpx(10,10,10,10); }定位的混合宏(_position.scss);
pos ( 设置position )
例子 :
参数1 $position : position的属性;
参数2 $args : json 可传(t:0,l:0,b:0,r:0,w:10,h:10,z:10)7个值
.className{ @include pos(absolute,(t:10px,l:0px,z:5)); }abs ( 设置position: absolute )
例子 :
参数 $args : json 可传(t:0,l:0,b:0,r:0,w:10,h:10,z:10)几个值
.className{ @include abs((t:10px,l:0px,z:5)); }rel ( 设置position: relative )
例子 :
参数 $args : json 可传(t:0,l:0,b:0,r:0,w:10,h:10,z:10)几个值
.className{ @include rel((t:10px,l:0px,z:5)); }fixed ( 设置position: fixed )
例子 :
参数 $args : json 可传(t:0,l:0,b:0,r:0,w:10,h:10,z:10)几个值
.className{ @include fixed((t:10px,l:0px,z:5)); }static ( 设置position: static )
例子 :
参数 $args : json 可传(t:0,l:0,b:0,r:0,w:10,h:10,z:10)几个值
.className{ @include static((t:10px,l:0px,z:5)); }t ( 设置top值 )
例子 :
.className{ @include t(10); }l ( 设置left值 )
例子 :
.className{ @include l(10); }b ( 设置bottom值 )
例子 :
.className{ @include b(10); }r ( 设置right值 )
例子 :
.className{ @include r(10); }tl ( 设置top & left值 )
例子 :
参数1 $top : top值;
参数2 $left : left值;
参数3 $zindex : z-index值;
.className{ @include tl(10,10); }
或
.className{ @include tl(10,10,10); }rl ( 设置right & left值 )
例子 :
参数1 $right : right值;
参数2 $left : left值;
参数3 $zindex : z-index值;
.className{ @include rl(10,10); }
或
.className{ @include rl(10,10,10); }bl ( 设置bottom & left值 )
例子 :
参数1 $bottom : bottom值;
参数2 $left : left值;
参数3 $zindex : z-index值;
.className{ @include bl(10,10); }
或
.className{ @include bl(10,10,10); }br ( 设置bottom & right值 )
例子 :
参数1 $bottom : bottom值;
参数2 $right : left值;
参数3 $zindex : z-index值;
.className{ @include br(10,10,10); }
或
.className{ @include br(10,10,10); }trbl ( 设置top & left & bottom & right值 )
例子 :
参数1 $top : top值;
参数2 $right : right值;
参数3 $bottom : bottom值;
参数4 $left : left值;
参数5 $zindex : z-index值;
.className{ @include br(10,10,10,10); }
或
.className{ @include br(10,10,10,10,10); }z ( 设置z-index )
例子 :
.className{ @include z(10); }z1 ( z-index:10 )
例子 :
.className{ @include z1; }z2 ( z-index:20 )
例子 :
.className{ @include z2; }z3 ( z-index:30 )
例子 :
.className{ @include z3; }z4 ( z-index:40 )
例子 :
.className{ @include z4; }z5 ( z-index:50 )
例子 :
.className{ @include z5; }z6 ( z-index:60 )
例子 :
.className{ @include z6; }z-max ( z-index:9999 )
例子 :
.className{ @include z-max; }字体的混合宏(_fonts.scss);
f ( 设置font || font-size )
例子 :
默认为 font 如果参数为一个数值则设置 font-size;
.className{ @include f(italic bold 12px/20px arial,sans-serif); }
或
.className{ @include f(10); }fz ( 设置font-size )
例子 :
.className{ @include fz(10); }fa ( 设置font-family )
例子 :
默认参数为'Microsoft Yahei';
.className{ @include fa(); }c ( 设置color )
例子 :
参数1 $color : #000 (默认#000) 设置color;
参数2 $hovercolor : false (默认false) 是否设置hover颜色;
.className{ @include c(#fff); }
或
.className{ @include c(#fff,#999); }fs ( 设置font-style )
例子 :
.className{ @include fs(bold); }fb ( 设置font-weight )
例子 :
.className{ @include fb(); }no-b ( font-weight: normal )
例子 :
.className{ @include no-b; }ita ( font-style:italic )
例子 :
.className{ @include ita; }no-fs ( font-style:normal )
例子 :
.className{ @include no-fs; }lh ( 设置line-height )
例子 :
.className{ @include lh(10); }normal-font ( 设置正常字体样式 )
例子 :
.className{ @include normal-font; }assist-font ( 设置辅助性文字(灰色) )
例子 :
参数1 $color : #b0b0b0 (默认) 设置color;
参数2 $$fz : 14(默认14px) 设置font-size;
.className{ @include assist-font(#ccc,14); }transparent-text ( 设置文字透明 )
例子 :
.className{ @include transparent-text; }ls ( 设置letter-spacing )
例子 :
.className{ @include ls(10); }边框的混合宏(_border.scss);
bd ( 设置border )
例子 :
.className{ @include bd(1px solid #fff); }bdt ( 设置border-top )
例子 :
.className{ @include bdt(1px solid #fff); }bdr ( 设置border-right )
例子 :
.className{ @include bdr(1px solid #fff); }bdb ( 设置border-bottom )
例子 :
.className{ @include bdb(1px solid #fff); }bdl ( 设置border-left )
例子 :
.className{ @include bdl(1px solid #fff); }bdtb ( 设置border-top & border-bottom )
例子 :
参数1 $args1 : 设置border-top;
参数2 $args2 : 设置border-bottom(可不写,border-bottom == border-top);
.className{ @include bdtb(1px solid #fff); }
或
.className{ @include bdtb(1px solid #fff,1px solid #000); }bdrl ( 设置border-right & border-left )
例子 :
参数1 $args1 : 设置border-right;
参数2 $args2 : 设置border-left(可不写,border-left == border-right);
.className{ @include bdrl(1px solid #fff); }
或
.className{ @include bdrl(1px solid #fff,1px solid #000); }bdc ( 设置border-color )
例子 :
.className{ @include bdc(#000); }bdi ( 设置border-image )
例子 :
.className{ @include bdi(url(border.png) 30 30 round); }no-bd ( 取消边框border:none )
例子 :
.className{ @include no-bd; }no-bdt ( 取消上边框border-top:none )
例子 :
.className{ @include no-bdt; }no-bdr ( 取消右边框border-right:none )
例子 :
.className{ @include no-bdr; }no-bdb ( 取消下边框border-bottom:none )
例子 :
.className{ @include no-bdb; }no-bdl ( 取消左边框border-left:none )
例子 :
.className{ @include no-bdl; }no-bdtb ( 取消上边框 & 下边框 border-top:none & border-bottom:none )
例子 :
.className{ @include no-bdtb; }no-bdrl ( 取消右边框 & 左边框 border-right:none & border-left:none )
例子 :
.className{ @include no-bdrl; }oln ( 设置outline )
例子 :
.className{ @include oln(#00FF00 dotted thick); }oln-c ( 设置outline-color )
例子 :
.className{ @include oln-c(#00FF00); }oln-r ( 设置outline-radius )
例子 :
.className{ @include oln-r(30); }oln-s ( 设置outline-style )
例子 :
.className{ @include oln-s(solid); }oln-w ( 设置outline-width )
例子 :
.className{ @include oln-w(30); }oln-o ( 设置outline-offset )
例子 :
.className{ @include oln-o(30); }cut-line ( 分割线 | )
例子 :
参数1 $mar : 0 10px (默认) 设置margin;
参数2 $color : #999 (默认#999) 设置color;
参数3 $fz : 14 (默认14px) 设置font-size;
.className{ @include cut-line(0 10,#999,14); }cut-line2 ( 分割线 / (面包屑导航) )
例子 :
参数1 $pad : 0 10px (默认) 设置;
参数2 $color : #ccc (默认#ccc) 设置color;
参数3 $fz : 14 (默认14px) 设置font-size;
.className{ @include cut-line2(0 10,#999,14); }边距的混合宏(_box.scss);
mar ( 设置margin )
例子 :
.className{ @include mar(30); }
或
多值情况:
.className{ @include mar(30 10 50 30); }pad ( 设置padding )
例子 :
.className{ @include pad(30); }
或
多值情况:
.className{ @include pad(30 10 5030); }mt ( 设置margin-top )
例子 :
.className{ @include mt(30); }mr ( 设置margin-right )
例子 :
.className{ @include mr(30); }mb ( 设置margin-bottom )
例子 :
.className{ @include mb(30); }ml ( 设置margin-left )
例子 :
.className{ @include ml(30); }pt ( 设置padding-top )
例子 :
.className{ @include pt(30); }pr ( 设置padding-right )
例子 :
.className{ @include pr(30); }pb ( 设置padding-bottom )
例子 :
.className{ @include pb(30); }pl ( 设置padding-left )
例子 :
.className{ @include pl(30); }mtb ( 设置margin-top && margin-bottom )
例子 :
参数1 $size1 : number 设置margin-top;
参数2 $size2 : number(默认margin-bottom = margin-top) 设置margin-bottom;
.className{ @include mtb(30); }
或
.className{ @include mtb(30 10); }mlr ( 设置margin-left && margin-right )
例子 :
参数1 $size1 : number 设置margin-left;
参数2 $size2 : number(默认margin-right = margin-left) 设置margin-right;
.className{ @include mlr(30); }
或
.className{ @include mlr(30 10); }ptb ( 设置padding-top && padding-bottom )
例子 :
参数1 $size1 : number 设置padding-top;
参数2 $size2 : number(默认padding-bottom = padding-top) 设置padding-bottom;
.className{ @include ptb(30); }
或
.className{ @include ptb(30,10); }plr ( 设置padding-left && padding-right )
例子 :
参数1 $size1 : number 设置padding-left;
参数2 $size2 : number(默认padding-right = padding-left) 设置padding-right;
.className{ @include plr(30); }
或
.className{ @include plr(30 10); }reset打包的混合宏(_resetpack.scss);
base ( 设置项目初始化 )
例子 :
参数1 $content:number 设置 .content 的宽度;
参数2 $unit : px 设置默认单位;
参数3 $orange : #f60 设置默认橙色文字颜色、默认背景颜色;
参数4 $yellow : $fff000 设置默认黄色文字颜色、默认背景颜色;
参数5 $blue : #5fb3d2 设置默认蓝色文字颜色、默认背景颜色;
参数6 $red : #ff546a 设置默认红色文字颜色、默认背景颜色;
参数7 $gray : #ccc 设置默认灰色文字颜色、默认背景颜色;
参数8 $disabled : #ccc 设置默认禁止颜色;
参数9 $bor_color : #ccc 设置默认边框颜色;
参数10 $format : - 设置默认连接-;
@include base(1000);min-base ( 设置项目迷你初始化 )
例子 :
参数1 $content:1000(默认值) 设置 .content 的宽度;
参数2 $label:false(默认值) 设置pc/app标签初始化;
@include min-base(1000);清除标签的混合宏(_normalize.scss);
label ( 清除标签默认属性 )
例子 :
@include label;pc-label ( 清除pc标签默认属性 )
例子 :
@include pc-label;mobile-label ( 清除mobile标签默认属性 )
例子 :
@include mobile-label;混合缩写的混合宏(_group.scss);
whl ( 设置width & height & line-height )
例子 :
.className{ @include whl(10,10,10); }whfl ( 设置width & height & font-size & line-height )
例子 :
.className{ @include whfl(10,10,10,10); }whflc ( 设置width & height & font-size & line-height & color )
例子 :
.className{ @include whflc(10,10,10,10,#fff); }whflcb ( 设置width & height & font-size & line-height & color & font-weight )
例子 :
最后一个 font-weight 可不传参数默认'bold';
.className{ @include whflcb(10,10,10,10,#fff); }hl ( 设置height & line-height )
例子 :
参数1 $height : 设置height
参数2 $line-height 设置line-height(可不写,line-height == height)
.className{ @include hl(10); }
或
.className{ @include hl(10,10); }hflc ( 设置height & font-size & line-height & color )
例子 :
.className{ @include hflc(10,10,10,#fff); }hflcb ( 设置height & font-size & line-height & color && font-weight )
例子 :
.className{ @include hflc(10,10,10,#fff); }wl ( 设置width & line-height )
例子 :
.className{ @include wl(10,10); }flh ( 设置font-szie & line-height )
例子 :
.className{ @include flh(10,10); }fc ( 设置font-size & color )
例子 :
.className{ @include flh(10,#fff); }flc ( 设置font-size & line-height & color )
例子 :
.className{ @include flc(10,10,#fff); }fcb ( 设置font-size & color & font-weight )
例子 :
.className{ @include fcb(10,#fff); }flcb ( 设置font-size & line-height & color & font-weight )
例子 :
.className{ @include flcb(10,10,#fff); }faflc ( 设置family & font-size & line-height & color & font )
例子 :
.className{ @include flc('宋体',10,10,#fff); }mawh ( 设置max-width & max-height )
例子 :
.className{ @include mawh(100%,100%); }miwh ( 设置min-width & min-height )
例子 :
.className{ @include miwh(100%,100%); }mmw ( 设置min-width & max-width)
例子 :
.className{ @include mmw(100%,100%); }其他的混合宏(_other.scss);
vit ( vertical-align:top )
例子 :
.className{ @include vit; }vic ( vertical-align:middle )
例子 :
.className{ @include vic; }vib ( vertical-align:bottom )
例子 :
.className{ @include vib; }vertical-align ( 设置vertical-align )
例子 :
.className{ @include vertical-align(top); }over ( overflow:hidden; )
例子 :
.className{ @include over; }ofv ( overflow:visible !important; )
例子 :
.className{ @include ofv; }over-x ( x轴截断 )
例子 :
.className{ @include over-x; }over-y ( y轴截断 )
例子 :
.className{ @include over-y; }cur ( 鼠标手 )
例子 :
.className{ @include cur; }def ( 鼠标默认 )
例子 :
.className{ @include def; }cursor ( 设置鼠标手 )
例子 :
.className{ @include cursor(pointer); }opa ( 设置opacity )
例子 :
参数1 $opacity : 0.8(默认值) 0~1透明度;
参数2 $support-for-ie : true/false(默认) 如果$global-for-ie:false 又想当前className的opacity兼容ie则传true;
.className{ @include opa(0.8); }
或
$global-for-ie:false;
.className{ @include opa(0.8,true); }rz( 设置resize 默认值none )
例子 :
.className{ @include rz; }no-rz( 禁止textarea拖动大小resize: none )
例子 :
.className{ @include no-rz; }first-letter ( 首字下沉 )
例子 :
参数 $fz : 6em (默认6em) 设置font-szie;
.className{ @include first-letter(2em); }first-line ( 特殊标记段落第一行 )
例子 :
参数 $color : red (默认红色) 设置color;
.className{ @include first-line(#333); }hack ( 设置IE7、IE6的CSS Hack )
例子 :
参数 $property 设置hack属性;
参数 $value 设置hack属性值;
参数 $hack : 6 (默认IE6) 设置6为IE6 hack、这是7为IE7 hack;
.className{ @include first-line(#333); }圆形的混合宏(_round.scss);
round ( 设置圆形 )
例子 :
.className{ @include round(30); }roundc ( 设置圆形 & 背景色 )
例子 :
.className{ @include roundc(30,#000); }三角形的混合宏(_triangle.scss);
triangle-up ( 上三角圆形 )
例子 :
参数1 $w : 宽度;
参数2 $h : 高度;
参数3 $color : 颜色;
.className{ @include triangle-up( 10,10,#000 ); }triangle-right ( 右三角圆形 )
例子 :
参数1 $w : 宽度;
参数2 $h : 高度;
参数3 $color : 颜色;
.className{ @include triangle-right( 10,10,#000 ); }triangle-bottom ( 下三角圆形 )
例子 :
参数1 $w : 宽度;
参数2 $h : 高度;
参数3 $color : 颜色;
.className{ @include triangle-bottom( 10,10,#000 ); }triangle-left ( 左三角圆形 )
例子 :
参数1 $w : 宽度;
参数2 $h : 高度;
参数3 $color : 颜色;
.className{ @include triangle-left( 10,10,#000 ); }triangle-topleft ( 左上三角圆形 )
例子 :
参数1 $size : 边框线;
参数2 $color : 颜色;
.className{ @include triangle-topleft( 10,#000 ); }triangle-topright ( 右上三角圆形 )
例子 :
参数1 $size : 边框线;
参数2 $color : 颜色;
.className{ @include triangle-topright( 10,#000 ); }triangle-bottomleft ( 左下三角圆形 )
例子 :
参数1 $size : 边框线;
参数2 $color : 颜色;
.className{ @include triangle-bottomleft( 10,#000 ); }triangle-bottomright ( 右下三角圆形 )
例子 :
参数1 $size : 边框线;
参数2 $color : 颜色;
.className{ @include triangle-bottomright( 10,#000 ); }完整例子展示:
@charset "UTF-8";
@import "./base_mixins/_base_mixins.scss";
$BG_ULR :"../i/";//路径;
/*
* 谁看过弹层
* Author tq
* Date:20170616
*/
@include base();
.seeMe-main{
@include wh(820,482);
@include bgc(#fff);
}
.seeMe-head{
@include rel;
@include h(52);
@include flc(20,52,#fff);
@include ti(30);
@include bdb(1px solid #e9e9e9);
@include bgi('#{$BG_ULR}new-head-bg.jpg');
}
.seeMe-close{
@include abs((t:5,r:5,w:20,h:20));
@include over;
@include bgi('#{$BG_ULR}new-close.gif',$position:center center);
}
.seeMe-body{
@include pad(19,0,0,29);
@include h(410);
}
.seeMe-left{
@include fl;
@include w(311);
}
.seeMe-right{
@include fl;
@include w(450);
}
.seeMe-one{
@include flc(18,30,#333);
@include fb;
}
.seeMe-two{
@include h(39);
@include flc(16,32,#333)
}
.seeMe-three{
@include f(0);
@include mb(12);
}
.seeMe-four{
@include flc(14,35,#666);
.color_ff546a{
@include fb;
}
}
.seeMe-five{
@include flc(16,35,#333);
@include fb;
}
.seeMe-a{
@include fc(14,#2c84dd);
@include ml(25);
@include no-b;
@include line-underline;
&:hover{
@include no-line;
}
}
.seeMe-per{
@include f(20);
@include fb;
@include vic;
@include c(#ff546a);
}
%txt{
@include inblock;
@include wh(66,22);
@include ti(11);
@include flc(14,22,#666);
@include mr(6);
@include over;
}
.seeMe-shut{
@extend %txt;
@include bgi('#{$BG_ULR}new-shut-bg.jpg');
}
.seeMe-open{
@extend %txt;
@include c(#ff546a);
@include bgi('#{$BG_ULR}new-open-bg.jpg');
}
.seeMe-2code{
@include wh(346-156,208-20);
@include pad(20,0,0,156);
@include mt(6);
@include ml(32);
@include bgi('#{$BG_ULR}new-people.jpg');
}
.seeMe-2codeImg{
@include wh(170);
}
.seeMe-picMain{
@include pt(11);
@include bgi('#{$BG_ULR}new-use-bg.jpg');
}
.seeMe-pics{
@include rel;
@include mar(0,0,0,11);
@include wh(260);
@include over;
}
.seeMe-ul{
@include pad(36,0,0,0);
li{
@include fl;
@include wh(62);
@include mr(8);
@include over;
@include bd(1px solid #e6e6e6);
@include cur;
}
}
.seeMe-praise{
@include abs((t:0,r:0,w:80,h:32,z:10));
@include tac;
@include bdrs(5);
@include bgc(#ff5470);
@include cur;
.praise-txt{
@include inblock;
@include h(32);
@include flc(18,32,#fff);
@include pl(30);
@include bgi('#{$BG_ULR}new-heart-ico.png',$position:0 center);
}
}
.praise-like{
.praise-txt{
@include f(14);
}
.a{
@include bgc(rgba(0,0,0,0.2));
}
}更新记录
感谢
- SassMagic -- 感谢 W3cplus
- mylus -- 感谢 liuxinran
- postcss-crip -- 感谢 Johnie Hjelm
- hotcss -- 感谢 墨尘
- CSS常用Mixin封装 -- 感谢 白小明
- QMUI_Web -- 感谢 Kayo
- mixins -- 感谢 bukas