started editing styles files using sass synthax

src/styles/scss/_animations.scss

@@ -4,9 +4,8 @@
 	position: relative;
 	width: 80px;
 	height: 80px;
-}
 
-.lds-ring div {
+	div {
 		box-sizing: border-box;
 		display: block;
 		position: absolute;
@@ -17,19 +16,20 @@
 		border-radius: 50%;
 		animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 		border-color: #fff transparent transparent transparent;
-}
 
-.lds-ring div:nth-child(1) {
+		&:nth-child(1) {
 			animation-delay: -0.45s;
 		}
 
-.lds-ring div:nth-child(2) {
+		&:nth-child(2) {
 			animation-delay: -0.3s;
 		}
 
-.lds-ring div:nth-child(3) {
+		&:nth-child(3) {
 			animation-delay: -0.15s;
 		}
+	}
+}
 
 @keyframes lds-ring {
 	0% {

src/styles/scss/_middle-section.scss

@@ -25,22 +25,22 @@
 	overflow-y: scroll;
 	overflow-x: hidden;
 	padding-left: 10px;
-}
 
-#content::-webkit-scrollbar {
+	&::-webkit-scrollbar {
 		width: 10px;
 	}
 
-#content::-webkit-scrollbar-track {
+	&::-webkit-scrollbar-track {
 		background: var(--main-background);
 	}
 
-#content::-webkit-scrollbar-thumb {
+	&::-webkit-scrollbar-thumb {
 		background: var(--main-scroll);
 		border-radius: 4px;
 		width: 6px;
 		padding: 0px 2px;
 	}
+}
 
 #container {
 	margin: 0 auto;
@@ -72,11 +72,12 @@
 	position: relative;
 	top: 50%;
 	transform: translateY(-50%);
-}
-.smallmodal-content button {
+
+	& button {
 		width: 100%;
 		margin-bottom: 8px;
 	}
+}
 
 @media only screen and (min-width: 601px) {
 	#container,

src/styles/scss/_progressbar.scss

@@ -7,9 +7,8 @@
 	border-radius: 2px;
 	margin: 0.5rem 0 1rem 0;
 	overflow: hidden;
-}
 
-.progress .determinate {
+	.determinate {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -19,11 +18,10 @@
 		transition: width 0.3s linear;
 	}
 
-.progress .indeterminate {
+	.indeterminate {
 		background-color: var(--accent-color);
-}
 
-.progress .indeterminate:before {
+		&::before {
 			content: '';
 			position: absolute;
 			background-color: inherit;
@@ -35,7 +33,7 @@
 			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
 		}
 
-.progress .indeterminate:after {
+		&::after {
 			content: '';
 			position: absolute;
 			background-color: inherit;
@@ -48,6 +46,8 @@
 			-webkit-animation-delay: 1.15s;
 			animation-delay: 1.15s;
 		}
+	}
+}
 
 @-webkit-keyframes indeterminate {
 	0% {

src/styles/scss/_sidebar.scss

@@ -10,24 +10,29 @@
 	color: var(--panels-text);
 	transition: width 125ms ease-in-out 75ms;
 	z-index: 999;
-}
 
-#sidebar:hover {
+	&:hover {
 		width: 200px;
 	}
 
-#sidebar .main_tablinks:not(#theme_selector) {
+	.main_tablinks {
+		&.active .side_icon {
+			color: var(--accent-color);
+		}
+
+		&:not(#theme_selector) {
 			display: flex;
 			align-items: center;
 			margin-top: 5px;
 			cursor: pointer;
-}
 
-#sidebar .main_tablinks:not(#theme_selector):hover {
+			&:hover {
 				background-color: #3e3e3e;
 			}
+		}
+	}
 
-#sidebar .main_tablinks_text {
+	.main_tablinks_text {
 		display: none;
 		display: inline-block;
 		margin-left: 20px;
@@ -36,27 +41,31 @@
 		transition: all 50ms ease-in-out 200ms;
 	}
 
-#sidebar:hover .main_tablinks_text {
+	.side_icon {
+		font-size: 30px;
+		padding: 9px;
+
+		&.side_icon--theme {
+			cursor: default;
+		}
+
+		&::selection {
+			background: none;
+		}
+	}
+
+	&:hover {
+		#theme_togglers {
+			position: relative;
+			opacity: 1;
+			visibility: visible;
+		}
+		.main_tablinks_text {
 			display: inline-block;
 			opacity: 1;
 			visibility: visible;
 		}
-
-#sidebar .side_icon {
-	font-size: 30px;
-	padding: 9px;
 	}
-
-#sidebar .side_icon::selection {
-	background: none;
-}
-
-.side_icon--theme {
-	cursor: default;
-}
-
-#sidebar .main_tablinks.active .side_icon {
-	color: var(--accent-color);
 }
 
 /* Theme selector */
@@ -77,12 +86,6 @@
 	transition: all 50ms ease-in-out 200ms;
 }
 
-#sidebar:hover #theme_togglers {
-	position: relative;
-	opacity: 1;
-	visibility: visible;
-}
-
 .theme_toggler {
 	width: 25px;
 	height: 25px;
@@ -90,20 +93,20 @@
 	border: 1px solid var(--separator);
 	cursor: pointer;
 	transition: border 200ms ease-in-out;
-}
 
-.theme_toggler--active {
+	&--active {
 		border-width: 3px;
 	}
 
-.theme_toggler[data-theme-variant='light'] {
+	&[data-theme-variant='light'] {
 		background: white;
 	}
 
-.theme_toggler[data-theme-variant='dark'] {
+	&[data-theme-variant='dark'] {
 		background: #141414;
 	}
 
-.theme_toggler[data-theme-variant='purple'] {
+	&[data-theme-variant='purple'] {
 		background: #460ead;
 	}
+}

src/styles/scss/_stackedTabs.scss

@@ -1,17 +1,18 @@
-.image_header header {
+.image_header {
+	header {
 		background-position: 0% 35%;
 		background-size: cover;
 		padding: 220px 24px 8px;
 		border-radius: 8px 8px 0px 0px;
-}
 
-.image_header header h1,
-.image_header header h2 {
+		h1,
+		h2 {
 			margin: 0px;
 		}
 
-.image_header header h2 {
-	margin: 0px;
+		h2 {
 			font-size: 18px;
 			margin-bottom: 12px;
 		}
+	}
+}

src/styles/scss/_track-preview.scss

@@ -10,6 +10,7 @@
 	border-radius: 5px;
 	top: 0;
 	right: 0;
+	transition: opacity 200ms ease-in-out;
 }
 
 .preview_playlist_controls {

src/styles/scss/base/_base.scss

@@ -1,10 +1,3 @@
-// @import './normalize.css';
-// @import './typography.css';
-
-/* * {
-	transition: background-color 500ms ease-in-out;
-} */
-
 html {
 	height: 100vh;
 

src/styles/scss/globals/_globals.scss

@@ -64,7 +64,6 @@ button {
 	position: relative;
 	background-color: var(--accent-color);
 	border: 1px solid transparent;
-	/* border: none; */
 	border-radius: 4px;
 	font-family: inherit;
 	font-weight: 600;
@@ -187,7 +186,8 @@ span.tag {
 	padding: 3px 6px;
 }
 
-a, a:visited {
+a,
+a:visited {
 	color: dodgerblue;
 }
 

src/styles/scss/globals/_tables.scss

@@ -4,126 +4,135 @@
 	-webkit-border-vertical-spacing: 0px;
 
 	--vertical-separator: 7px;
+
+	tbody {
+		tr:not(.table__row-no-highlight):hover {
+			background: var(--table-highlight);
+		}
 	}
 
-.table tr {
+	tr {
 		background: var(--table-bg);
 		transition: background-color 175ms ease-in-out;
-}
 
-.table tr:nth-child(even) {
+		&:nth-child(even) {
 			background: var(--table-zebra);
 			transition: background-color 175ms ease-in-out;
 		}
 
-.table tr:not(:last-child) {
+		&:not(:last-child) {
 			border-bottom: 1px solid var(--table-highlight);
 		}
-
-.table tbody tr:not(.table__row-no-highlight):hover {
-	background: var(--table-highlight);
 	}
 
-.table td,
-.table th {
+	td,
+	th {
 		vertical-align: middle;
 	}
 
-th.sortable {
+	th {
+		.sortable {
 			-webkit-user-select: none;
 			user-select: none;
 		}
 
-th.sort-asc:after {
+		.sort-asc,
+		.sort-desc {
+			&::after {
+				font-size: 0.7em;
+				padding-left: 3px;
+				line-height: 0.7em;
+			}
+		}
+
+		.sort-asc::after {
 			content: '\25b2';
-	font-size: 0.7em;
-	padding-left: 3px;
-	line-height: 0.7em;
 		}
 
-th.sort-desc:after {
+		.sort-desc::after {
 			content: '\25bc';
-	font-size: 0.7em;
-	padding-left: 3px;
-	line-height: 0.7em;
+		}
 	}
 
-.table td {
+	td {
 		padding: var(--vertical-separator) 10px;
-}
 
-.table td:first-child {
+		&:first-child {
 			padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
 		}
 
-.table td:last-child {
+		&:last-child {
 			padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
 		}
 
-.table td img {
+		img {
 			vertical-align: middle;
 		}
-
-.table .table__icon {
-	box-sizing: content-box;
-	width: 32px;
 	}
 
-.table__icon.table__icon--big {
+	.table__icon {
+		box-sizing: content-box;
+		width: 32px;
+
+		&--big {
 			width: 48px;
 			text-align: center;
 		}
+	}
 
-/* .table .table__cell {} */
-
-.table__cell--x-small {
+	.table__cell {
+		&--x-small {
 			width: 0.32%;
 		}
 
-.table__cell--small {
+		&--small {
 			width: 3.2%;
 		}
 
-.table__cell--medium {
+		&--medium {
 			width: 28.7%;
 		}
 
-.table__cell--large {
+		&--large {
 			width: 50%;
 		}
 
-.table__cell--left {
+		&--left {
 			text-align: left;
 		}
 
-.table__cell--center {
+		&--center {
 			text-align: center;
 		}
 
-.table__cell--right {
+		&--right {
 			text-align: right;
 		}
 
-/* .table__cell-content {} */
-
-.table__cell-content.table__cell-content--vertical-center {
-	/*  Wrap cell content in this to center vertically cells
-	with material icons or both material icons and text */
-	display: flex;
-	align-items: center;
-}
-
-.table__cell--download {
+		&--download {
 			cursor: pointer;
-}
 
-.table__cell--download i.material-icons {
+			i.material-icons {
 				transition: color 175ms ease-in-out;
 			}
 
-.table__cell--download:hover i.material-icons {
+			&:hover {
+				i.material-icons {
 					color: var(--table-bg);
 				}
+			}
+		}
+	}
+
+	.table__cell-content {
+		&.table__cell-content--vertical-center {
+			// Wrap cell content in this to center vertically cells
+			// with material icons or both material icons and text
+			display: flex;
+			align-items: center;
+		}
+	}
+}
 
 .track_row > td > img {
 	width: 32px;

src/styles/scss/style.scss

@@ -1,9 +1,9 @@
 @import './base/base';
 @import './base/normalize';
-@import './base/typography';
 
 @import './globals/globals';
 @import './globals/tables';
+@import './globals/typography';
 
 @import './tabs/about-tab';
 @import './tabs/charts-tab';