reusable css 1

1.scss

//generic color variables

$color : #595959; // Text Color
$background : #fff; // Page abckground
$border-color : #cecece; // Border color
$text-focus : #404040; // Alternate text color for spans etc
$font : helvetica, arial, verdana, sans-serif; // Font Stack

body {
    color: $color;
    font-family: $font;
    font-size: 1em;
}

hr {
    height: 0px;
    border: 0px;
    border-bottom: 1px solid $border-color;
    margin: 20px 0px;
}

2.html

<nav>
	<ul class="main-menu">
		<li>
			<a href="#">Item 1</a>
		</li>
		<li>
			<a href="#">Item 2</a>
			
			<ul>
				<li>
					<a href="#">Dropdown Item 1</a>
				</li>
				<li>
					<a href="#">Dropdown Item 2</a>
				</li>
			</ul>
			
		</li>
		<li>
			<a href="#">Item 3</a>
		</li>
		<li>
			<a href="#">Item 4</a>
		</li>
	</ul>
</nav>

3.scss

.navigation {
	display: block;
	list-style: none;
	padding: 0px;
	margin: 0px;
	
	li {
		display: inline;
		
		a {
			text-decoration: none;
		}
		
		ul {
			display: none;
		}
	}
}


.main-menu {
	@extend .navigation;
}