Yaml Css Preprocess

css.css

.head {
    height: 32px;
    font-size: 16px;
    line-height: 32px
}
.head ul {
    margin: 0
}
.head ul li {
    list-style-type: none;
    border-top: 2px solid #424242;
    display: inline-block
}
.head ul li a {
    padding: 0 5px;
    color: inherit;
    text-decoration: none
}
.head ul li.active {
    border-top: 2px solid #ff5252
}
.head ul li:hover {
    background-color: #bdbdbd;
    border-top: 2px solid #bdbdbd;
    color: #424242
}
.head ul li.active:hover {
    border-top: 2px solid #ff1744
}
footer.footer>*>* a {
    color: #039be5;
}
footer.footer>*>* a:hover {
    color: black;
}

css.yml

.head:
	- height: 32px
	- font-size: 16px
	- line-height: 32px
	
	ul:
		- margin: 0px
		
		li:
			- list-style-type: none
			- border-top: 2px solid #424242
			- display: inline-block
			
			a:
				- padding: 0px 5px
				- color: inherit
				- border-top: 2px solid #424242
				- display: inline-block
			&.active:
				- border-top: 2px solid #ff5252
			&:hover:
				- background-color: #bdbdbd
				- border-top: 2px solid #bdbdbd
				- color: #424242
			&.active:hover:
				- border-top: 2px solid #ff1744

footer.footer:
	> *:
		> *:
			a:
				- color: #039be5
				
				&:hover:
					- color: black