Apresentação de CSS Stylesheet

Usando tag <code> e listas de definição

by Alex

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<pre class="language-css">
	<code class="language-css">
		<ul>
			<li class="language-css--declaracao">
				<span class="language-css--seletor">#seletor</span>
				<dl>
					<dt class="language-css--propriedade">margin-bottom</dt>
					<dd class="language-css--valor">10px</dd>
					<dt class="language-css--propriedade">background-color</dt>
					<dd class="language-css--valor">red</dd>
				</dl>
			</li>
			<li class="language-css--declaracao">
				<span class="language-css--seletor">#seletor</span>
				<dl>
					<dt class="language-css--propriedade">margin-bottom</dt>
					<dd class="language-css--valor">10px</dd>
					<dt class="language-css--propriedade">background-color</dt>
					<dd class="language-css--valor">red</dd>
				</dl>
				<ul>
					<li class="language-css--declaracao">
						<span class="language-css--seletor">.seletor</span>
						<dl>
							<dt class="language-css--propriedade">margin-bottom</dt>
							<dd class="language-css--valor">10px</dd>
							<dt class="language-css--propriedade">background-color</dt>
							<dd class="language-css--valor">red</dd>
						</dl>
					</li>
				</ul>
			</li>
		</ul>
	</code>
</pre>

SCSS

$um-caratere : 9px;
$color-comentario: #f8f8f2;
$color-declaracao: #f8f8f2;
$color-seletor: #9abe52;
$color-valor: #f8f8f2;
$color-propriedade: #d8477b;

.border-box{
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

pre{
	width: 100%;
    height: 100%;
    display: table;
	background: #292f39;
	padding: 20px;
	.border-box;
}

.language-css{
	ul, li, dl, dt, dd {
			float: left;
			display: table;
	}
	dl{
		margin-left: $um-caratere*2;
	}
	&--declaracao{
		width: 100%;
		&:after {
			content: "}";
			display: inline-block;
			float: left;
			color: $color-declaracao;
			clear: left;
		}
		ul{
			clear: left;
			margin-left: $um-caratere*2;
		}
	}
	&--comentario{
		display: block;
		color: #9abe52;
	}
	&--seletor{
		display: block;
		color: $color-seletor;
		&:after{
			content: "{";
			display: inline-block;
			color: #f8f8f2;
		}
	}
	&--valor{
		color: $color-valor;
		&:after {
			content: ";";
			display: inline-block;
			color: #f8f8f2;
			position: relative;
		}
	}
	&--propriedade{
	    clear: both;
	    margin-right: $um-caratere;
	    color: $color-propriedade;
		&:after {
			content: ":";
			display: inline-block;
			color: #f8f8f2;
			position: relative;
		}
	}
}