css之stylus混合函数方法

最新推荐文章于 2022-11-24 09:06:38 发布
则丸
最新推荐文章于 2022-11-24 09:06:38 发布
阅读量3k
点赞数 1
分类专栏： css样式
本文链接：https://blog.csdn.net/yuwq123/article/details/83503798
版权
css样式专栏收录该内容
11 篇文章 0 订阅
订阅专栏
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)