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

$font_stack: Helvetica, sans-serif;
$primary_color: #009ac8;
$hover_color : #999;
nav {
	ul {
		list-style-type: none;

		li {
			display: inline-block;

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

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