更新记录

1.2.8（2024-04-19）

• 修复样式问题

1.2.7（2024-04-14）

增加默认样式

1.2.6（2024-04-13）

• 修复已知问题

平台兼容性

yxh-scss

yxh-scss 是 yxh开发者，为了开发便捷省去不必要的定义和麻烦，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。

搜索微信小程序 yxhui 或者 右侧 扫码 查看全部变量类和其他组件信息
小程序目前在稳定更新中... 该组件基于 vue3 编写
该组件以微信小程序为基准开发，理论上兼容其他平台，但是本人没有测试，如果有bug或者适配的问题，可以在下面留言。 或者 联系开发者

使用须知（必看）

该插件引入项目后，必须在 app.vue 页面中的 style 样式标签行内使用 lang="scss" , 并且 需要在 style 标签中的第一行中引入 以下代码：
所有定义涉及到的单位 一律使用 rpx
app.vue

<style lang="scss">
    /*每个页面公共css */
    @import '@/uni_modules/yxh-scss/index.scss';
</style>

定义类的导航 点击类标签 跳转相关类的具体详情

color 类
width&height 类
font 类
background-color 类
border-radius 类
box-shadow 类
dispaly 类
flex 类
line-height 类
margin 类
padding 类
text 类
position 类
transform 类
联系开发者

每个类 更新顺序为 时间轴 倒序 最新更新的说明会写在最前面

直接在 标签的 class 类 上直接使用即可

color 类

在页面中如何使用（必看）

<view class="">
    <span class="coma2">主要色调2</span>
    <span class="coma4">主要色调4</span>
    <span class="coma6">主要色调6</span>
    <span class="coma8">主要色调8</span>
    <span class="coma">主要色调</span>
</view>

$yxh-ma-co: #2a82e4;                                          // 主要色调      类名： ma
一共10个等级，也就是10个 类名： .coma  .coma2 ... .coma8
$yxh-su-co: #a3a3a3;                                          // 辅助色调      类名： su
其他同上，  .cosu .cosu2 ... .cosu8 以此类推...
$yxh-pass-co: #43CF7C;                                        // 成功色调      类名： pa
$yxh-error-co: #f50000;                                       // 错误色调      类名： er
$yxh-warning-co: #f0a33e;                                     // 警告色调      类名： wa
$yxh-bl-co: #000000;                                          // 纯黑          类名： bl
$yxh-wh-co: #ffffff;                                          // 纯白          类名： wh

备注： 如果你想使用错误色调 例： .coer ~ .coer8 中选择你需要的 其他以此类推

width&height 类

<!-- 如果你想让 父盒子 宽 300rpx 高 200rpx 那就在 class 类上面加 w300  h200 -->
<view class="w300 h200 bgcma">
    <!-- 使用 百分比 % 单位 w0 + % or h0 + %  例：高需要10% 那么 对应的高 就是 h010 -->
    <!-- 如果你还想让里面的 子盒子 宽高都是父盒子的一半 也就是 50% 那就在 class 类上面加 w050  h050 -->
    <view class="h050 w050 bgcsu"></view>
</view>

备注：
h1 代表 高 100% w1 代表 宽 100% 使用 百分比 宽高范围 w002 ~ w098 & h002 ~ h098 width: 取值范围 是 2~750rpx height: 取值范围 2~1600rpx
minh: min-height maxh: max-height 最小值为 2rpx 最大值 1600rpx
minw: min-width maxw: max-width 最小值为 2rpx 最大值 750rpx
数值只有 双数 没有单数

font 类

<view class="">
    <p class="fs20">将字体大小设置为 20 rpx 像素</p>
    <p class="fs22">将字体大小设置为 22 rpx 像素</p>
    ......
    <p class="fs30">将字体大小设置为 30 rpx 像素</p>
    ......
    <p class="fs40">将字体大小设置为 40 rpx 像素</p>
    ......
    <p class="fs50">将字体大小设置为 50 rpx 像素</p>
    <p class="fsno">font-style:normal：显示一个标准的字体</p>
    <p class="fsit">font-style:italic：显示一个斜体的字体</p>
    <p class="fsob">font-style:oblique：显示一个倾斜的字体</p>
    <p class="fsin">font-style:inherit：从父元素继承字体样式</p>
    <p class="fw1">font-weight: 100;</p>
    <p class="fw2">font-weight: 200;</p>
    ......
    <p class="fw5">font-weight: 500;</p>
    <p class="fw7">font-weight: 700;</p>
    <p class="fwno">font-weight: normal; 默认值，标准字体</p>
    <p class="fwli">font-weight: lighter; 更细的字体</p>
    <p class="fwbo">font-weight: bold; 粗体字体</p>
    <p class="fwbor">font-weight: bolder; 更粗字体</p>
    <p class="fvno">font-variant: normal; This is a paragraph</p>
    <p class="fvsc">font-variant: small-caps; This is a paragraph</p>
</view>

备注：
font-size 的取值范围是 10rpx ~ 70rpx 如果 你需要一个 36rpx 大小的字体 那么 你就可以在 class 加上 .fs36 这个类名就可以 font-weight 也是一样

background-color 类

<view class="difl">
    <view class="w100 h100 bgcma2"></view>
    <view class="w100 h100 bgcma4"></view>
    <view class="w100 h100 bgcma6"></view>
    <view class="w100 h100 bgcma8"></view>
    <view class="w100 h100 bgcma"></view>
</view>
<view class="difl">
    <view class="w100 h100 bgcsu2"></view>
    <view class="w100 h100 bgcsu4"></view>
    <view class="w100 h100 bgcsu6"></view>
    <view class="w100 h100 bgcsu8"></view>
    <view class="w100 h100 bgcsu"></view>
</view>

备注：
在 color 定义的颜色在这里面都是能使用的 例： 想使用 错误色调的背景色 则 .bgcer ~ .bgcer8 中选择，其他以此类推

更多样式请前往 微信小程序 搜索 yxhui 或者 扫码 查看 里面有详细的教程

联系开发者

如果你有好的想法，或者好的建议可以联系开发者
如果你长期使用的话，想在插件中 添加自己的专属颜色，也可以联系开发者 YinXuehai 本人会在后续的开发中添加上
联系方式：QQ1170709203 or wx：Yin-Xuehai