harmonization of scss

angular.json

@@ -26,7 +26,8 @@
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "./node_modules/bootstrap/scss"
+                "./src/sass",
+                "./node_modules/bootstrap/scss"                
               ]
             },
             "scripts": [

src/app/components/left-side-bar/left-side-bar.component.html

@@ -1,6 +1,6 @@
-<div id="mam-left-bar">
-    <div id="mam-create-toot">
-        <a href title="write toot!" (click)="createNewToot()">Toot!</a>
+<div class="left-bar" >
+    <div id="create-toot">
+        <a class="create-toot__link left-bar-link" href title="write toot!" (click)="createNewToot()">Toot!</a>
     </div>
 
     <div *ngFor="let account of accounts">
@@ -10,14 +10,7 @@
         <!-- <a href title="{{ account.username }}" (click)="toogleAccount(account.id)"><img src="{{ account.avatar }}" /></a> -->
     </div>
 
-
-
-    <div id="mam-account-add">
-        <a href title="add new account" [routerLink]="['/register']">+</a>
+    <div class="add-account">
+        <a class="add-account__link  left-bar-link" href title="add new account" [routerLink]="['/register']">+</a>
     </div>
-
-
-
-
-
 </div>

src/app/components/left-side-bar/left-side-bar.component.scss

@@ -1,55 +1,34 @@
-#mam-left-bar {
-  width: 50px;
-  height: calc(100%);
-  background: green;
-  background: #090b10;
-
-  /*outline: 1px dotted red;*/
+@import "variables";
+.left-bar {
+    width: 50px;
+    height: calc(100%);
+    background: $color-secondary;
 }
 
-#mam-create-toot {
-  width: 50px;
-
-  /* background-color: black; */
+.create-toot {
+    width: 50px;
+    &__link {
+        font-size: 0.8em;
+        margin: 0 0 0 10px;
+    }
 }
 
-  #mam-create-toot a {
-    font-size: 0.8em;
-    /* color: white; */
+.add-account {
+    width: 50px;
+    height: 30px;
+    padding-top: 7px;
+    &__link {
+        font-size: 2em;
+        height: 10px;
+        margin: 0 15px;
+        line-height: 0;
+    }
+}
+
+.left-bar-link {
+    color: $font-link-primary;
     text-decoration: none;
-    margin: 0 0 0 10px;
-  }
-
-
-.mam-account-selector {
-  width: 50px;
-  padding-top: 4px;
-}
-
-  .mam-account-selector a {
-    margin-left: 4px;
-    /*margin-top: 4px;*/
-  }
-
-  .mam-account-selector img {
-    width: 40px;
-    border-radius: 50%;
-  }
-
-#mam-account-add {
-  width: 50px;
-  /*height: 50px;*/
-
-  /* background-color: black; */
-}
-
-a {
-  font-size: 2em;
-  color: #595c67;
-  text-decoration: none;
-  margin: 10px 0 0 15px;
-}
-
-a:hover {
-  color: #8f93a2;
-}
+    &:hover {
+        color: $font-link-primary-hover;
+    }
+}

src/sass/_variables.scss

@@ -1,5 +1,9 @@
 $font-color-primary: #e8eaf3;
 
+$font-link-primary: #595c67;
+$font-link-primary-hover: #8f93a2;
+
 $color-primary: #141824;
+$color-secondary: #090b10;
 
 $default-font-size: 15px;