Sass practice

@extend

by Susan Delgado

HTML

<div class="box">Mauris <em>faucibus</em> massa euismod, pellentesque dui eget, <span class="funny">interdum</span> turpis.</div>

		<div class="important">Mauris <em>faucibus</em> massa euismod, pellentesque dui eget, <span class="funny">interdum</span> turpis.</div>
		<div class="success">Mauris <em>faucibus</em> massa euismod, pellentesque dui eget, <span class="funny">interdum</span> turpis.</div>

SCSS

.box{
	margin: 0 auto 25px;
	border: 1px solid;
	padding:15px;
	border-radius:6px;
	em{
		text-decoration:underline;
	}
}
.important{
	@extend .box;
	background-color:#ffe5e5;
	border-color:red;
}
.success{
	@extend .box;
	background-color:#e6ffe6;
	border-color:green;
}