restruct: updated sass version and rules

src/views/DriverView.vue

@@ -147,7 +147,7 @@ function copyStockToClipboard() {
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive';
+@use '../styles/responsive';
 
 $viewBgCol: #1a1a1a;
 
@@ -209,7 +209,7 @@ $viewBgCol: #1a1a1a;
   gap: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   span.hidable {
     display: none;
   }

src/views/JournalDispatchers.vue

@@ -332,5 +332,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>

src/views/JournalTimetables.vue

@@ -482,5 +482,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>

src/views/SceneryView.vue

@@ -13,7 +13,7 @@
           :station="stationInfo"
           :onlineScenery="onlineSceneryInfo"
         />
-        
+
         <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
       </div>
 
@@ -173,8 +173,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
-@import '../styles/variables.scss';
+@use '../styles/responsive';
 
 button.back-btn {
   img {
@@ -193,7 +192,7 @@ button.back-btn {
     text-align: center;
     padding: 2em 1em;
 
-    color: $warningCol;
+    color: var(--clr-warning);
 
     display: inline-block;
 
@@ -275,7 +274,7 @@ button.back-btn {
   .checkpoint_item {
     &.current {
       font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
     }
 
     &:not(:last-child)::after {
@@ -286,7 +285,7 @@ button.back-btn {
   }
 }
 
-@include midScreen {
+@include responsive.midScreen {
   .scenery-wrapper {
     grid-template-columns: 1fr;
     gap: 0;
@@ -304,7 +303,7 @@ button.back-btn {
   }
 }
 
-@include smallScreen {
+@include responsive.smallScreen{
   .scenery-left {
     max-height: 100vh;
   }

src/views/StationsView.vue

@@ -4,7 +4,7 @@
       <div class="stations-options">
         <StationFilterCard
           :showCard="filterCardOpen"
-          :exit="(filterCardOpen = false)"
+          :exit="filterCardOpen = false"
           ref="filterCardRef"
         />
 
@@ -78,8 +78,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/variables.scss';
-@import '../styles/responsive.scss';
+@use '../styles/responsive';
 
 .stations-view {
   position: relative;
@@ -115,7 +114,7 @@ button.btn-donation {
     background-color: lighten($btnColor, 5%);
   }
 
-  @include smallScreen {
+  @include responsive.smallScreen{
     span {
       display: none;
     }

src/views/TrainsView.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../styles/responsive.scss';
+@use '../styles/responsive';
 
 .trains-view {
   position: relative;
@@ -134,7 +134,7 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-@include smallScreen {
+@include responsive.smallScreen {
   .trains_topbar {
     justify-content: space-between;
   }