scss 基本的分页造型：分页造型

Posted 2021-05-18

body {
  background: #dfdfdf;
  color: #666;
  font: 14px/24px sans-serif;
}

#container {
  width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.btn {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  /*optional*/
  color: #aaa;
  font-size: .875em;
}

.pagination {
  background: #f2f2f2;
  padding: 20px;
  margin-bottom: 20px;
}

.page {
  display: inline-block;
  padding: 0px 9px;
  margin-right: 4px;
  border-radius: 3px;
  border: solid 1px #c0c0c0;
  background: #e9e9e9;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.8), 0px 1px 3px rgba(0, 0, 0, 0.1);
  font-size: .875em;
  font-weight: bold;
  text-decoration: none;
  color: #717171;
  text-shadow: 0px 1px 0px white;
}

.page:hover, .page.gradient:hover {
  background: #fefefe;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#f0f0f0));
  background: -moz-linear-gradient(0% 0% 270deg, #fefefe, #f0f0f0);
}

.page.active {
  border: none;
  background: #616161;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.8);
  color: #f0f0f0;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

.page.gradient {
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
  background: -moz-linear-gradient(0% 0% 270deg, #f8f8f8, #e9e9e9);
}

.pagination.dark {
  background: #414449;
  color: #feffff;
}

.page.dark {
  border: solid 1px #32373b;
  background: #3e4347;
  box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
  color: #feffff;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
}

.page.dark:hover, .page.dark.gradient:hover {
  background: #3d4f5d;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
  background: -moz-linear-gradient(0% 0% 270deg, #547085, #3d4f5d);
}

.page.dark.active {
  border: none;
  background: #2f3237;
  box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.1);
}

.page.dark.gradient {
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
  background: -moz-linear-gradient(0% 0% 270deg, #565b5f, #3e4347);
}

<div id="container">
	<div class="pagination">
		<p>without gradient</p>
		<a href="#" class="page">first</a><a href="#" class=
		"page">2</a><a href="#" class="page">3</a><span
		class="page active">4</span><a href="#" class=
		"page">5</a><a href="#" class="page">6</a><a href="#"
		class="page">last</a>
	</div>

	<div class="pagination">
		<p>with gradient</p>
		<a href="#" class="page gradient">first</a><a href=
		"#" class="page gradient">2</a><a href="#" class=
		"page gradient">3</a><span class=
		"page active">4</span><a href="#" class=
		"page gradient">5</a><a href="#" class=
		"page gradient">6</a><a href="#" class=
		"page gradient">last</a>
	</div>

	<div class="pagination dark">
		<p>dark without gradient</p>
		<a href="#" class="page dark">first</a><a href="#"
		class="page dark">2</a><a href="#" class=
		"page dark">3</a><span class=
		"page dark active">4</span><a href="#" class=
		"page dark">5</a><a href="#" class=
		"page dark">6</a><a href="#" class=
		"page dark">last</a>
	</div>

	<div class="pagination dark">
		<p>dark with gradient</p>
		<a href="#" class="page dark gradient">first</a><a
		href="#" class="page dark gradient">2</a><a href="#"
		class="page dark gradient">3</a><span class=
		"page dark active">4</span><a href="#" class=
		"page dark gradient">5</a><a href="#" class=
		"page dark gradient">6</a><a href="#" class=
		"page dark gradient">last</a>
	</div>
</div>

// ----
// Sass (v3.3.14)
// Compass (v1.0.0)
// ----

// http://cssdeck.com/labs/css-pagination-styles

body {
    background: #dfdfdf;
    color: #666;
    font: 14px/24px sans-serif;
}

$radius : 5px ;

#container {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.btn {
    display: inline-block;
    padding: 10px;
    border-radius: $radius ; /*optional*/
    color: #aaa;
    font-size: .875em;
}

.pagination {
    background: #f2f2f2;
    padding: 20px;
    margin-bottom: 20px;
}

.page {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover, .page.gradient:hover {
    background: #fefefe;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0));
    background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0);
}

.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

.page.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9));
    background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9);
}

.pagination.dark {
    background: #414449;
    color: #feffff;
}

.page.dark {
    border: solid 1px #32373b;
    background: #3e4347;
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .1), 0px 1px 3px rgba(0,0,0, .1);
    color: #feffff;
    text-shadow: 0px 1px 0px rgba(0,0,0, .5);
}

.page.dark:hover, .page.dark.gradient:hover {
    background: #3d4f5d;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#547085), to(#3d4f5d));
    background: -moz-linear-gradient(0% 0% 270deg,#547085, #3d4f5d);
}

.page.dark.active {
    border: none;
    background: #2f3237;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .1);
}

.page.dark.gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#565b5f), to(#3e4347));
    background: -moz-linear-gradient(0% 0% 270deg,#565b5f, #3e4347);
}