npm下载量：

欢迎使用c-common-scss

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=23183
npm install c-common-scss

使用方法

在App.vue文件引入

<style lang="scss">
	// 插件市场引入
	@import "uni_modules/c-common-scss";
	// npm引入
	@import "c-common-scss";
</style>

在页面中使用

<template>
	<view class="bg-white">
		<view class="w-100 h-100 bg-theme">
			123
		</view>
		<view class="p-20-40">
			<view class=" h-200 double-center color-white">
				666
			</view>
		</view>
	</view>
</template>

样式基础值

在c-common-scss/index.scss文件中可修改相对应样式

$themeColor: #09b4f1;	// 主题色
$borderColor: #f2f2f2; 	// border的颜色
$maxVal: 200;		// 循环最大数值
$maxShowText: 3;	// 文本溢出省略最大能省略几行
$baseMultiple: 2;	// 默认倍数，2的正整数倍，例如只能设置p-2，设置p-1不生效
$baseValue: 1rpx;	// 默认一个单位

宽度、高度、圆角、字体大小、行高、top、left、right、bottom；

|类名|具体样式| |--|--| |w-2|width: 2rpx;| |h-2|height: 2rpx;| |rounded-2|border-radius: 2rpx;| |font-size-2|font-size: 2rpx;| |line-height-2|line-height: 2rpx;| |top-2|top: 2rpx;| |left-2|left: 2rpx;| |right-2|right: 2rpx;| |bottom-2|bottom: 2rpx;|

display

|类名|具体样式| |--|--| |block|display: block;| |inline-block|display: inline-block;| |flex|display: flex;| |inline-flex|display: inline-flex;| |none|display: none;|

padding和margin，以下为padding示例，margin类似，把“p-”换成“m-”

|类名|具体样式| |--|--| |p-2|padding: 2rpx;| |p-2-4|padding: 2rpx 4rpx;| |p-x-2|padding: 0 2rpx;| |p-y-2|padding: 2rpx 0;| |p-t-2|padding-top: 2rpx;| |p-l-2|padding-left: 2rpx;| |p-r-2|padding-right: 2rpx;| |p-b-2|padding-bottom: 2rpx;|

border

|类名|具体样式| |--|--| |border|border: 1px solid $borderColor;| |border-theme|border: 1px solid $themeColor;| |border-top|border-top: 1px solid $borderColor;| |border-left|border-left: 1px solid $borderColor;| |border-right|border-right: 1px solid $borderColor;| |border-bottom|border-bottom: 1px solid $borderColor;|

flex相关属性

|类名|具体样式| |--|--| |flex-1|flex: 1;| |flex-shrink-0|flex-shrink: 0;| |上面样式默认不加display: flex;|下面样式默认加display: flex;| |flex-wrap|flex-wrap: wrap;| |flex-nowrap|flex-wrap: nowrap;| |flex-wrap-reverse|flex-wrap: wrap-reverse;| |flex-row|flex-direction: row;| |flex-row-reverse|flex-direction: row-reverse;| |flex-column|flex-direction: column;| |flex-column-reverse|flex-direction: column-reverse;| |j-c-start|justify-content: flex-start;| |j-c-end|justify-content: flex-end;| |j-c-center|justify-content: center;| |j-c-between|justify-content: space-between;| |a-i-start|align-items: flex-start;| |a-i-end|align-items: flex-end;| |a-i-center|align-items: center;| |a-i-between|align-items: space-between;| |double-center|align-items: center;justify-content: center;|

文本

|类名|具体样式| |--|--| |nowrap|white-space: nowrap;| |break-all|word-break: break-all;| |bold|font-weight: bold;| |text-left|text-align: left;| |text-right|text-align: right;| |text-center|text-align: center;| |text-overflow-1|文本溢出省略，最多3行，配置$maxShowText可更改上限|

颜色

|类名|具体样式| |--|--| |bg-white|background-color: #fff;| |bg-theme|background-color: $themeColor;| |color-white|color: #fff;| |color-theme|color: $themeColor;| |color-placeholder|color: #c0c4cc;| |color-999|color: #999;| |color-666|color: #666;| |color-333|color: #333;|

定位

|类名|具体样式| |--|--| |static|position: static;| |fixed|position: fixed;| |absolute|position: absolute;| |relative|position: relative;| |sticky|position: sticky;有做top、z-index处理，不需要可以去掉;还有做h5环境兼容标题栏（导航栏），不需要可以去掉|

其他

|类名|具体样式| |--|--| |full-width|width: 100%;| |full-height|height: 100%;| |box-shadow|box-shadow: 0 0 10rpx 2rpx rgba(#000, 0.04);| |rounded-999|border-radius: 999rpx;| |rounded-circle|border-radius: 50%;| |hidden|overflow: hidden;| |scroll|overflow: scroll;| |scroll-x|overflow-x: scroll;| |scroll-y|overflow-y: scroll;| |nomore|列表加载底部文字样式| |card|卡片样式| |border-box|box-sizing: border-box;|