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)
