css之stylus混合函数方法
//变量前缀为$ ,方法前缀为_
//---颜色变量
//黑色
$c_black = #313536
$c_black02 = $c_black + 1 * 8% + 1 * .5deg
$c_black03 = $c_black + 2 * 8% + 2 * .5deg
$c_black04 = $c_black + 3 * 8% + 3 * .5deg
$c_black05 = $c_black + 4 * 8% + 4 * .5deg
//蓝色
$c_blue = #2e98e2
$c_blue02 = $c_blue + 1 * 8% + 1 * .5deg
$c_blue03 = $c_blue + 2 * 8% + 2 * .5deg
$c_blue04 = $c_blue + 3 * 8% + 3 * .5deg
$c_blue05 = $c_blue + 4 * 8% + 4 * .5deg
//灰色
$c_gray = #d4d4d4
$c_gray02 = $c_gray + -(1 * 8)% + -(1 * .3)deg
$c_gray03 = $c_gray + -(2 * 8)% + -(2 * .3)deg
$c_gray04 = $c_gray + -(3 * 8)% + -(3 * .3)deg
$c_gray05 = $c_gray + -(4 * 8)% + -(4 * .3)deg
//绿色
$c_green = #03BD00
$c_green02 = $c_green + 1 * 8% + 1 * .5deg
$c_green03 = $c_green + 2 * 8% + 2 * .5deg
$c_green04 = $c_green + 3 * 8% + 3 * .5deg
$c_green05 = $c_green + 4 * 8% + 4 * .5deg
//青色
$c_cyan = #29B475
$c_cyan02 = $c_cyan + 1 * 8% + 1 * .5deg
$c_cyan03 = $c_cyan + 2 * 8% + 2 * .5deg
$c_cyan04 = $c_cyan + 3 * 8% + 3 * .5deg
$c_cyan05 = $c_cyan + 4 * 8% + 4 * .5deg
//橘黄
$c_orange = #ff9100
$c_orange02 = $c_orange + 1 * 8% + 1 * .5deg
$c_orange03 = $c_orange + 2 * 8% + 2 * .5deg
$c_orange04 = $c_orange + 3 * 8% + 3 * .5deg
$c_orange05 = $c_orange + 4 * 8% + 4 * .5deg
//金色
$c_yellow = #FFCB10
$c_yellow02 = $c_yellow + 1 * 8% + 1 * .5deg
$c_yellow03 = $c_yellow + 2 * 8% + 2 * .5deg
$c_yellow04 = $c_yellow + 3 * 8% + 3 * .5deg
$c_yellow05 = $c_yellow + 4 * 8% + 4 * .5deg
//红色
$c_red = #ec2a00
$c_red02 = $c_red + 1 * 8% + 1 * .5deg
$c_red03 = $c_red + 2 * 8% + 2 * .5deg
$c_red04 = $c_red + 3 * 8% + 3 * .5deg
$c_red05 = $c_red + 4 * 8% + 4 * .5deg
//粉色
$c_pink = #F02387
$c_pink02 = $c_pink + 1 * 8% + 1 * .5deg
$c_pink03 = $c_pink + 2 * 8% + 2 * .5deg
$c_pink04 = $c_pink + 3 * 8% + 3 * .5deg
$c_pink05 = $c_pink + 4 * 8% + 4 * .5deg
//白色
$c_white = #fff
$c_white02 = $c_white + -(1 * 2.5)%
$c_white03 = $c_white + -(2 * 2.5)%
$c_white04 = $c_white + -(3 * 2.5)%
$c_white05 = $c_white + -(4 * 2.5)%
//---字体大小变量
$f_small = 12px
$f_normal = 13px
$f_iptxt = 14px
$f_medium = 15px
$f_large = 22px
$f_super = 30px
//---字体风格
$f_family = "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "微软雅黑", "Segoe UI", "Tahoma", "宋体", "SimSun", "sans-serif"
$f_family_yh = "Microsoft Yahei UI", "Microsoft Yahei", "微软雅黑", "Segoe UI", "Tahoma", "SimSun", "sans-serif"
$mgItem = 10 15 20 25 30 35 40 45 50
//---颜色类输出
_colorFn(name,$color,fn=1,count=5)
.txt-{name}01
color $color
for i in 2..count
.txt-{name}0{i}
if fn == 1
color $color + (i - 1) * 8% + (i - 1) * .5deg
else if fn == 2
color $color + -((i - 1) * 8)% + -((i - 1) * .5)deg
else if fn == 3
color $color + -((i - 1) * 2.5)%
.bg-{name}01
background-color $color
for i in 2..count
.bg-{name}0{i}
if fn == 1
background-color $color + (i - 1) * 8% + (i - 1) * .5deg
else if fn == 2
background-color $color + -((i - 1) * 8)% + -((i - 1) * .5)deg
else if fn == 3
background-color $color + -((i - 1) * 2.5)%
//---颜色样式输出
_color(color)
color color
//---背景颜色样式输出
_bgColor(bg=$c_white)
background-color bg
//---文字渐变技巧
_gradientText(){
background-color: #DA4AF3;
background-image: linear-gradient(116deg, #FF9800 0%, #ff2a6b 33%, #fb2bf6 58%, #9e3dff 78%, #5f3df7 90%, #2b83ff 100%);
-webkit-text-fill-color: transparent;/* 将字体设置成透明色 */
-webkit-background-clip: text;/* 裁剪背景图,使文字作为裁剪区域向外裁剪 */
-webkit-background-size: 300% 100%;
// -webkit-animation: masked-animation 5s linear infinite alternate;
-webkit-animation: masked-animation 5s linear infinite;
}
//---显示方式
_display(arg=block)
display arg
//---隐藏
_box__hide()
display none
//---显示
_box__show()
display block
//---边框线
_borderAll(color=$c_white03,pixel=1px,bstyle=solid)
border pixel bstyle color
_borderCustom()
border arguments
_border(direction,color=$c_white03,pixel=1px,bstyle=solid)
border-{direction} pixel bstyle color
//---严格盒模型
_boxSizing(fn=1)
if fn == 1
-webkit-box-sizing border-box
box-sizing border-box
else if fn == 2
-webkit-box-sizing content-box
box-sizing content-box
//---垂直居中布局
_verticalLayout(left=auto,right=auto,top=0,bottom=0,$position=absolute)
position $position
top top
bottom bottom
margin auto
left left
right right
//---完全居中布局
_completeCenter(left=0,right=0,top=0,bottom=0,$position=absolute)
position $position
top top
right right
bottom bottom
left left
margin auto
//---垂直文本对齐
// baseline 默认。元素放置在父元素的基线上。
// sub 垂直对齐文本的下标。
// super 垂直对齐文本的上标
// top 把元素的顶端与行中最高元素的顶端对齐
// text-top 把元素的顶端与父元素字体的顶端对齐
// middle 把此元素放置在父元素的中部。
// bottom 把元素的顶端与行中最低的元素的顶端对齐。
// text-bottom 把元素的底端与父元素字体的底端对齐。
// length
// % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
// inherit 规定应该从父元素继承 vertical-align 属性的值。
_verticalTextAlign($direction=middle)
vertical-align $direction
//---多行文本默认样式
_textareaStyle()
font-size: 13px;
border: 1px solid #d4d4d4;
border-radius: 4px;
background-color: #F7F9FA;
resize: none;
display: inline-block;
vertical-align: top;
outline-style: none;
//---文本垂直居中/利用行高垂直居中
_textLineHeigth(pixel)
height pixel
line-height pixel
//---图片大小控制(被容器填充)
_imgwrap(x=100%,y=100%)
& img
width x
height y
//---盒子溢出处理
_overflow(method=hidden)
overflow method
//---字体间隔
_spacing(pixel=1px)
letter-spacing pixel
//---字体间隔升级版
_spacingPlus(pixel=1px)
letter-spacing pixel
text-indent pixel
//---文本修饰
// none 默认。定义标准的文本。
// underline 定义文本下的一条线。
// overline 定义文本上的一条线。
// line-through 定义穿过文本下的一条线。
// blink 定义闪烁的文本。
// inherit 规定应该从父元素继承 text-decoration 属性的值。
_textDec(args = underline)
text-decoration args
//---删除间隙
_rmGap(spacing=-4px)
_spacing(spacing)
font-size 0
//---单行/多行文字溢出省略
_ellipsis(line=1)
if line == 1
overflow hidden
text-overflow ellipsis
white-space nowrap
else if line > 1
display -webkit-box !important
overflow hidden
text-overflow ellipsis
word-break break-all
-webkit-box-orient vertical
-webkit-line-clamp line
//显示模式,默认为溢出隐藏
_overflow(mode=hidden)
overflow mode
//---圆角,方向先垂直方向后左右
_borderRadius(pixel=50%,direction=null)
if direction == null
-webkit-border-radius pixel
border-radius pixel
else
-webkit-border-{direction}-radius pixel
border-{direction}-radius pixel
//---圆角(全方向)
_borderRadiusAll(pixel)
-webkit-border-radius pixel
border-radius pixel
//---圆角(补充)
_borderRadiusCustom()
-webkit-border-radius arguments
border-radius arguments
//---指定盒模型,默认为怪异盒模型
_boxSizing(args=border-box)
-webkit-box-sizing args
box-sizing args
//---禁止用户对该区域进入选中
_unUserSelect()
-webkit-user-select none
-moz-user-select none
-o-user-select none
user-select none
//---启用硬件加速
_willAccelerate()
/*提醒浏览器提前准备硬件加速,兼容性不行*/
will-change transform
/*触发硬件加速 CPU 转 GPU*/
-webkit-transform translate3d(0,0,0)
-moz-transform translate3d(0,0,0)
-o-transform translate3d(0,0,0)
transform translate3d(0,0,0)
//---线性渐变
_gradient(bColor,eColor,direction=null)
if direction == null
background -webkit-linear-gradient(left top, bColor, eColor)
background -o-linear-gradient(bottom right, bColor, eColor)
background -moz-linear-gradient(bottom right, bColor, eColor)
background linear-gradient(to bottom right, bColor, eColor)
else if direction == top
background: -moz-linear-gradient(top, bColor, eColor);
background: -o-linear-gradient(top,bColor, eColor);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(bColor), to(eColor));
else if direction == left
background: -moz-linear-gradient(left, bColor, eColor);
background: -o-linear-gradient(left,bColor, eColor);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(bColor), to(eColor));
//---过滤
/**
* 高斯模糊 blur(px) 0
* 亮度 brightness(%) 1
* 对比度 contrast(%) 1
* 阴影 drop-shadow(h-shadow v-shadow blur spread color)
* 灰度强化 grayscale(%) 0
* 色相旋转 hue-rotate(deg) 0
* 图像反转 invert(%) 0
* 透明度 opacity(%) 1
* 饱和度 saturate(%) 1
* 褐色强化 sepia(%) 0
*/
_boxFilterDemo()
-webkit-filter blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%)
filter blur(0px) brightness(100%) contrast(100%) drop-shadow(0px 0px 0px 0px #000) grayscale(0%) hue-rotate(0deg) invert(0) opacity(1) saturate(100%) sepia(0%)
//--自定义过滤
_filterCustom()
-webkit-filter arguments
filter arguments
//---按钮颜色
_btnColor(bgColor,txtColor,h_bgColor,h_txtColor)
background bgColor
color txtColor
&.actived,&:active
background h_bgColor
color h_txtColor
//---盒子阴影颜色
_boxShadow(range=10px,color=$c_black,x=0,y=0,ins=false)
if ins != true
-webkit-box-shadow x y range color
-moz-box-shadow x y range color
box-shadow x y range color
else
-webkit-box-shadow inset x y range color
-moz-box-shadow inset x y range color
box-shadow inset x y range color
//---盒子阴影颜色(自定义文本)
_boxShadowByText(insetShadow,shadow)
-webkit-box-shadow insetShadow , shadow
-moz-box-shadow insetShadow , shadow
box-shadow insetShadow , shadow
//---透明度写法
support-for-ie ?= true
_opacity(n)
opacity n
if support-for-ie
filter unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=' + round(n * 100) + ')')
//---元素的显示隐藏
// visible 默认值。元素是可见的。
// hidden 元素是不可见的。
// collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
_visibility(value=visible){
visibility visible
}
//---颜色透明
_colorOpacity(attr,color,opacity)
// 插值
{attr} color - rgba(0,0,0,1 - opacity)
//---旋转
_rotate(angle=0)
-webkit-transform: rotate(angle);
-moz-transform: rotate(angle);
-o-transform: rotate(angle);
transform: rotate(angle);
//---旋转自定义
_rotateCustom()
-webkit-transform: arguments
transform: arguments
//---缩放
_scale(zoom=0.8)
-webkit-transform: scale(zoom);
-moz-transform: scale(zoom);
-o-transform: scale(zoom);
transform: scale(zoom);
_scaleX(zoom=0.8)
-webkit-transform: scaleX(zoom)
-moz-transform: scaleX(zoom)
-o-transform: scaleX(zoom)
transform: scaleX(zoom)
_scaleY(zoom=0.8)
-webkit-transform: scaleY(zoom)
-moz-transform: scaleY(zoom)
-o-transform: scaleY(zoom)
transform: scaleY(zoom)
//---变形中心
_origin2d(x=0%,y=0%)
-webkit-transform-origin: x y
-moz-transform-origin: x y
-o-transform-origin: x y
transform-origin: x y
_origin3d(x=0%,y=0%,z=0%)
-webkit-transform-origin: x y z
-moz-transform-origin: x y z
-o-transform-origin: x y z
transform-origin: x y z
//---偏移
_translate3d(x=0,y=0,z=0)
-webkit-transform: translate3d(x,y,z);
-moz-transform: translate3d(x,y,z);
-o-transform: translate3d(x,y,z);
transform: translate3d(x,y,z);
//---过渡
_transitionAll(duration=.3s,timingFn=linear,delay=0s)
-webkit-transition all duration delay timingFn
-moz-transition all duration delay timingFn
-o-transition all duration delay timingFn
transition all duration delay timingFn
//---过渡(补充)
_transitionCustom()
-webkit-transition arguments
-moz-transition arguments
-o-transition arguments
transition arguments
//---变形(自行补充)
_transform()
-webkit-transform arguments
transform arguments
//---动画
_animationSingle(name,duration,timingFn=linear,delay=0s,count=infinite)
-webkit-animation name duration delay timingFn count
-moz-animation name duration delay timingFn count
-o-animation name duration delay timingFn count
animation name duration delay timingFn count
//---变形中心
_transformOrigin(x=50%, y=50% , z=0)
-webkit-transform-origin x y z
-moz-transform-origin x y z
-o-transform-origin x y z
transform-origin x y z
//---3D转换
_transformStyle($theStyle=preserve-3d)
-webkit-transform-style $theStyle
transform-style $theStyle
//---文本提示样式
_placeholder(color=#97a8be,pixel=null,lh=1.4)
&::-webkit-input-placeholder
color color
&:-moz-placeholder
color color
&::-moz-placeholder
color color
&:-ms-input-placeholder
color color
if pixel != null
font-size pixel
line-height lh
/* 颜色辅助类 */
//黑色
_colorFn('black',$c_black,1,5)
//蓝色
_colorFn('blue',$c_blue,1,5)
//灰色
_colorFn('gray',$c_gray,2,5)
//绿色
_colorFn('green',$c_green,1,5)
//橘黄
_colorFn('orange',$c_orange,1,5)
//金黄
_colorFn('yellow',$c_yellow,1,5)
//青色
_colorFn('cyan',$c_cyan,1,5)
//红色
_colorFn('red',$c_red,1,5)
//粉色
_colorFn('pink',$c_pink,1,5)
//白色
_colorFn('white',$c_white,3,5)