@dsaco/dscss v1.2.5

安装

npm i -S @dsaco/dscss

tooltip.scss

<span class="ds-tooltip" aria-label="瑞秋·麦克亚当斯">默认设置</span>

自定义配置

$ds-tooltip-size: 8px;
$ds-tooltip-bg: black;
$ds-tooltip-color: white;
$ds-tooltip-attr: data-title;
@import '@dsaco/dscss/tooltip';

<span class="ds-tooltip" data-title="瑞秋·麦克亚当斯">上方(默认)</span>
<span class="ds-tooltip--bottom" data-title="瑞秋·麦克亚当斯">下边</span>
<span class="ds-tooltip--left" data-title="瑞秋·麦克亚当斯">左边</span>
<span class="ds-tooltip--right" data-title="瑞秋·麦克亚当斯">右边</span>

spacing.scss

// 默认值 1rem;
$ds-spacer: 16px;
@import "@dsaco/dscss/spacing";

<span class="p-0"></span>
<span class="px-1"></span>
<span class="py-2"></span>
<span class="ml-3"></span>
<span class="my-4"></span>
<span class="m-5"></span>

多行省略css版本

.ds-clamp {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

渐变文字

.ds-linear-text {
	background: linear-gradient(
		92.05deg,
		#bca1f7 12.09%,
		#e577b4 42.58%,
		#ff7170 84.96%
	);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
}