YIS工具片段

yis/components/util.css 里封装了一些常用的代码片段，公开发者解决常见问题， 如需使用请开发者单独使用 @apply 引入。

--util-iconfont iconfont 设置

.xxx{
	@apply --util-iconfont;
}

.xxx{
	@apply --util-iconfont;
}

片段名称 --util-iconfont

.xxx{
	@apply --util-iconfont;
}

--util-fullParentContent 获得和父容器同等大小的元素

绝对定位方式获得和非静态定位的父级元素同大小的样式。

--util-fullscreen 全屏

通过 fix 定位方式获得等同屏幕大小的元素样式。

--util-border 1px border 解决方案

使用伪类方案解决在不同设备分辨率情况下解决一像素 border 的问题。 简言之就是将对元素 border 的要求， 写在伪元素上。

使用实例：

/** yis-demo/src/pages/line/main.css **/
.fack_border{
    @apply --self-rect-item;
    @apply --util-border;
    &::after{
        border: 1px solid var(--self-border-color);
    }
// 如果定义圆角需要为不同分辨率的设备分别设置
    @media (--low-resolution) {
        &:after {
            border-radius: 10px;
        }
    }
    @media (--mid-resolution) {
        &:after {
            border-radius: 20px;
        }
    }
    @media (--high-resolution) {
        &:after {
            border-radius: 30px;
        }
    }
}

自定义工具片段

处于避免明明冲突，如开发者需要自定义工具代码时，请使用 --self-util 作为前缀。

/** yis-demo/src/pages/line/main.css **/
@import '@qnpm/yis/components/reset.css';
@import '@qnpm/yis/components/util.css';

:root {
    --self-border-color: #00b1ff;
    --self-line-item: {
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-top: 15px;
    }
    --self-rect-item: {
        width: 90vw;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 20px;
    }
}