CSS分页组件

<!--
stylify-variables
	color: '#099773',
	borderColor: '#ddd'
/stylify-variables
-->

<nav class="
	display:flex
	[a]{border-color:$borderColor;border-style:solid;transition:.3s;will-change:background;display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:12px;white-space:nowrap;font-weight:700;letter-spacing:0.1px;outline:none;font-size:16px;color:#222;user-select:none;text-decoration:none;transition:background_0.3s}
	[a:not(:first-of-type)]{border-width:1px_1px_1px_0}
	[a:first-of-type]{border-width:1px;border-radius:8px_0px_0px_8px}
	[a:last-of-type]{border-radius:0_8px_8px_0}
	[a.s-disabled]{color:#888;cursor:default}
	[a.s-active]{background:$color;color:#fff;border-color:$color;cursor:default}
	[a:not(.s-active):not(.s-disabled)]{hover:background:$borderColor}
">
	<a href="#" class="s-disabled">Prev</a>
	<a href="#">1</a>
	<a href="#" class="s-active">2</a>
	<a href="#">3</a>
	<a href="#">Next</a>
</nav>

<br>

<nav class="
	display:flex gap:8px
	[a]{border-color:$borderColor;border-style:solid;transition:.3s;will-change:background;display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:12px;white-space:nowrap;font-weight:700;letter-spacing:0.1px;outline:none;font-size:16px;color:#222;user-select:none;text-decoration:none;transition:background_0.3s}
	[a]{border-width:1px;border-radius:8px}

	[a.s-disabled]{color:#888;cursor:default}
	[a.s-active]{background:$color;color:#fff;border-color:$color;cursor:default}
	[a:not(.s-active):not(.s-disabled)]{hover:background:$borderColor}
">
	<a href="#" class="s-disabled">Prev</a>
	<a href="#">1</a>
	<a href="#" class="s-disabled">...</a>
	<a href="#" class="s-active">10</a>
	<a href="#">11</a>
	<a href="#">Next</a>
</nav>

<br>

<nav class="
	[a]{transition:.3s}
	[a]{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:12px;white-space:nowrap;font-weight:700;letter-spacing:0.1px;outline:none;font-size:16px;color:#222;user-select:none;text-decoration:none;transition:background_0.3s}
	[a]{border-radius:8px}

	[a.s-disabled]{color:#888;cursor:default}
	[a.s-active]{color:$color;cursor:default}
	[a:not(.s-active):not(.s-disabled)]{hover:background:$borderColor}
">
	<a href="#" class="s-disabled">Prev</a>
	<a href="#">1</a>
	<a href="#" class="s-active">2</a>
	<a href="#">3</a>
	<a href="#">Next</a>
</nav>

<!--
stylify-variables
	color: '#099773',
	borderColor: '#ddd'
/stylify-variables

stylify-components
	pagination: `
		display:flex
		a { transition:.3s line-height:1 border-radius:8px border-style:solid border-color:rgba(0,0,0,0) display:inline-flex align-items:center justify-content:center min-width:46px padding:12px white-space:nowrap font-weight:700 letter-spacing:0.1px outline:none font-size:16px color:#222 user-select:none text-decoration:none }
		a.s-disabled { color:#888 cursor:default }
		a.s-active { color:$color }
		a:not(.s-active):not(.s-disabled){ hover:background:$borderColor }

		&--with-border.pagination {
			gap:8px
			a { border-width:1px border-color:$borderColor  }
			a.s-active { background:$color color:#fff border-color:$color }
			a:not(.s-active):not(.s-disabled) { hover:background:$borderColor }
		}

		&--without-gap.pagination {
			gap:0
			a { border-radius:0 }
			a:not(:first-of-type):not(:last-of-type) { border-left:none border-right:none }
			a:first-of-type { border-width:1px border-radius:8px_0px_0px_8px }
			a:last-of-type { border-radius:0_8px_8px_0 }
		}
	`
/stylify-components
-->

<nav class="pagination pagination--with-border pagination--without-gap">
	<a href="#" class="s-disabled">Prev</a>
	<a href="#">1</a>
	<a href="#" class="s-active">2</a>
	<a href="#">3</a>
	<a href="#">Next</a>
</nav>

<br>

<nav class="pagination pagination--with-border">
	<a href="#" class="s-disabled">Prev</a>
	<a href="#">1</a>
	<a href="#" class="s-active">2</a>
	<a href="#">3</a>
	<a href="#">Next</a>
</nav>

<br>

<nav class="pagination">
	<a href="#" class="s-disabled">Prev</a>
	<a href="#">1</a>
	<a href="#" class="s-active">2</a>
	<a href="#">3</a>
	<a href="#">Next</a>
</nav>