JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<nav>
			<ul>
				<li><a href="#">Header1</a></li>
				<li><a href="#">Header2</a></li>
				<li><a href="#">Header3</a></li>
			</ul>
		</nav>
	</header>

	<aside>
		<nav>
			<ul>
				<li><a href="#">Aside1</a></li>
				<li><a href="#">Aside2</a></li>
				<li><a href="#">Aside3</a></li>
			</ul>
		</nav>
	</aside>

	<article>
		<h1>SASS 샘플</h1>
	</article>

CSS

$default_color: #999;
$header_color: #009ac8;
$aside_color: #ff0000;
$header_back: #eee;
$aside_hover: #382494;

header {
	background-color: $header_back;
	display: block;
	height: 100px;

	nav {
		ul {
			list-style: none;
			float: right;

			li {
				display: inline-block;

				a {
					display: block;
					padding: 5px 3px;
					margin: 10px 20px;
					text-decoration: none;
					color: $default_color;

					&:hover {
						border-bottom: 1px dotted $header_color;
					}
				}
			}
		}
	}
}

aside {
	width: 250px;
	float: left;

	nav {
		ul {
			list-style: none;
			padding: 0;
			margin-top: 30px;

			li {
				a {
					display: block;
					padding:5px 10px;
					text-decoration: none;
					color: $default_color;
					width: 100px;

					&:hover {
						border: 1px solid $aside_hover;
						color: $aside_color;
					}
				}
			}
		}
	}
}