SCSS

by Dedi Wibisono

HTML

<ul class="box-wrapper">
  <li class="box">Frontend</li>
  <li class="box">is</li>
  <li class="box">awesome</li>
</ul>

SASS

.wrapper 
	width: 500px 
	height: 300px 
	color: #333

	.big
		width: 800px 
		height: 300px 
		color: #333

		a
			color: red 
			font-size: 24px 
			font-family: ’Arial’
			&:active
				font-family: ’Arial’;

	.tall
		width: 500px 
		height: 900px 
		color: #666

		a
			color: green 
			font-size: 15px
			font-family: ’Arial’
			&:active
				color: green
				font-size: 24px
			

	a
		font-family: ’Arial’ 
		color: red
		font-size: 15px
		&:active
				font-family: ’Arial’
				font-weight: bold
				color: red