Fix/#2727 remove sass import

examples/basic-angular/src/app/app.component.scss

@@ -1,5 +1,5 @@
 
-@import '../style/abstracts/_variables';
+@use '../style/abstracts/variables' as *;
 
 
 .toolbar {
@@ -133,4 +133,4 @@
 
 .clickPoint__outerCircle {
     background-color: $color-grey-light;   
-  }
+  }

examples/basic-angular/src/app/history/history.component.scss

@@ -1,4 +1,4 @@
-@import '../../style/abstracts/_variables';
+@use '../../style/abstracts/variables' as *;
 
 .message-container {
     display: flex; 
@@ -58,4 +58,4 @@
 
         font-size: 1rem;
     }
-}
+}

examples/basic-angular/src/app/status/status.component.scss

@@ -1,4 +1,4 @@
-@import '../../style/abstracts/_variables';
+@use '../../style/abstracts/variables' as *;
 
 :host {
     position: absolute;

examples/basic-angular/src/style/base/_base.scss

@@ -1,3 +1,5 @@
+@use '../abstracts/variables' as *;
+
 /* reset browser-styles by using the universal selector */
 *,
 *::after,
@@ -25,4 +27,4 @@ body {
     line-height: 1.7;
     color: $color-grey-dark; 
     margin: 0;
-}
+}

examples/basic-angular/src/styles.scss

@@ -1,4 +1,3 @@
-@import 'style/abstracts/_variables';
-@import 'style/base/typography';
-@import 'style/base/base';
-
+@use 'style/abstracts/variables';
+@use 'style/base/typography';
+@use 'style/base/base';

tools/emulator/src/app/canvas/canvas.component.sass

@@ -1,4 +1,4 @@
-@import '../../styles'
+@use '../../styles' as *
 
 .canvas
   // background: $grey-darker
@@ -15,4 +15,3 @@
   opacity: 0.75
   z-index: -1
   background-color: #fff
-

tools/emulator/src/app/sidebar/sidebar.component.sass

@@ -1,4 +1,4 @@
-@import '../../styles'
+@use '../../styles' as *
 
 .connection-indicator 
   position: absolute
@@ -145,7 +145,7 @@
   &__tooltip
     color: $grey
 
-@include media-breakpoint-down(sm) 
+@media (max-width: 767.98px)
 
   .sidebar
     &__container
@@ -170,4 +170,3 @@
 
 
 
-

tools/emulator/src/app/timeline/timeline-canvas/timeline-canvas.component.sass

@@ -1,4 +1,4 @@
-@import '../../../styles'
+@use '../../../styles' as *
 
 :host
     height: calc(100% - #{$margin-default})
@@ -9,4 +9,4 @@
     box-sizing: border-box
 
     &::-webkit-scrollbar
-      display: none
+      display: none

tools/emulator/src/app/timeline/timeline.component.sass

@@ -1,4 +1,4 @@
-@import '../../styles'
+@use '../../styles' as *
 
 .timeline
     &__container
@@ -21,4 +21,4 @@
         text-align: center
         line-height: 1
 
-
+

tools/emulator/src/styles.sass

@@ -1,14 +1,5 @@
-@import 'bootstrap/dist/css/bootstrap.min.css'
-@import '@fortawesome/fontawesome-free/css/all.min.css'
-
-@import "bootstrap/scss/functions"
-@import "bootstrap/scss/variables"
-@import "bootstrap/scss/mixins/breakpoints"
-
-@include media-breakpoint-down(xs)
-@include media-breakpoint-down(sm)
-@include media-breakpoint-down(md)
-@include media-breakpoint-down(lg)
+@use 'bootstrap/dist/css/bootstrap.min.css'
+@use '@fortawesome/fontawesome-free/css/all.min.css'
 
 $white: #ffffff
 $grey-lightest: #f7f7f7

tools/gestenrecorder/src/styles.scss

@@ -1,14 +1,20 @@
 @use 'reflex' as reflex;
-
-@import 'bootstrap/dist/css/bootstrap.min.css';
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import 'bootstrap/scss/mixins/breakpoints';
-
-@include media-breakpoint-down(xs);
-@include media-breakpoint-down(sm);
-@include media-breakpoint-down(md);
-@include media-breakpoint-down(lg);
+@use 'bootstrap/dist/css/bootstrap.min.css';
+@use 'bootstrap/scss/mixins/breakpoints' as bootstrap-breakpoints;
+
+$bootstrap-grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@include bootstrap-breakpoints.media-breakpoint-down(xs, $bootstrap-grid-breakpoints);
+@include bootstrap-breakpoints.media-breakpoint-down(sm, $bootstrap-grid-breakpoints);
+@include bootstrap-breakpoints.media-breakpoint-down(md, $bootstrap-grid-breakpoints);
+@include bootstrap-breakpoints.media-breakpoint-down(lg, $bootstrap-grid-breakpoints);
 
 $white: #ffffff;
 $grey-lightest: #f7f7f7;