Move to sass @use

5 files changed, 44 insertions, 43 deletions

diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
index ab2038dde..31c145319 100644
--- a/client/src/sass/include/_actor.scss
+++ b/client/src/sass/include/_actor.scss
@@ -1,4 +1,4 @@
-@import '_variables';
+@use '_variables';
 
 @mixin section-label-responsive {
   color: pvar(--mainColor);
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index d9e5efc02..4f4f48e58 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -1,40 +1,40 @@
-@import './_bootstrap-variables';
+@use './_bootstrap-variables';
 
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@use '~bootstrap/scss/functions';
+@use '~bootstrap/scss/variables';
 
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/root';
-@import '~bootstrap/scss/reboot';
-@import '~bootstrap/scss/type';
-//@import '~bootstrap/scss/images';
-//@import '~bootstrap/scss/code';
-@import '~bootstrap/scss/grid';
-@import '~bootstrap/scss/tables';
-@import '~bootstrap/scss/forms';
-@import '~bootstrap/scss/buttons';
-//@import '~bootstrap/scss/transitions';
-@import '~bootstrap/scss/dropdown';
-@import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
-//@import '~bootstrap/scss/custom-forms';
-@import '~bootstrap/scss/nav';
-//@import '~bootstrap/scss/navbar';
-@import '~bootstrap/scss/card';
-//@import '~bootstrap/scss/breadcrumb';
-//@import '~bootstrap/scss/pagination';
-@import '~bootstrap/scss/badge';
-//@import '~bootstrap/scss/jumbotron';
-@import '~bootstrap/scss/alert';
-//@import '~bootstrap/scss/progress';
-//@import '~bootstrap/scss/media';
-//@import '~bootstrap/scss/list-group';
-@import '~bootstrap/scss/close';
-@import '~bootstrap/scss/modal';
-@import '~bootstrap/scss/tooltip';
-@import '~bootstrap/scss/popover';
-//@import '~bootstrap/scss/carousel';
-@import '~bootstrap/scss/utilities';
-//@import '~bootstrap/scss/print';
+@use '~bootstrap/scss/mixins';
+@use '~bootstrap/scss/root';
+@use '~bootstrap/scss/reboot';
+@use '~bootstrap/scss/type';
+//@use '~bootstrap/scss/images';
+//@use '~bootstrap/scss/code';
+@use '~bootstrap/scss/grid';
+@use '~bootstrap/scss/tables';
+@use '~bootstrap/scss/forms';
+@use '~bootstrap/scss/buttons';
+//@use '~bootstrap/scss/transitions';
+@use '~bootstrap/scss/dropdown';
+@use '~bootstrap/scss/button-group';
+@use '~bootstrap/scss/input-group';
+//@use '~bootstrap/scss/custom-forms';
+@use '~bootstrap/scss/nav';
+//@use '~bootstrap/scss/navbar';
+@use '~bootstrap/scss/card';
+//@use '~bootstrap/scss/breadcrumb';
+//@use '~bootstrap/scss/pagination';
+@use '~bootstrap/scss/badge';
+//@use '~bootstrap/scss/jumbotron';
+@use '~bootstrap/scss/alert';
+//@use '~bootstrap/scss/progress';
+//@use '~bootstrap/scss/media';
+//@use '~bootstrap/scss/list-group';
+@use '~bootstrap/scss/close';
+@use '~bootstrap/scss/modal';
+@use '~bootstrap/scss/tooltip';
+@use '~bootstrap/scss/popover';
+//@use '~bootstrap/scss/carousel';
+@use '~bootstrap/scss/utilities';
+//@use '~bootstrap/scss/print';
 
-@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
+@use '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 0d3f2b6e0..fb12da49e 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 @mixin miniature-name {
   @include ellipsis-multiline(1.1em, 2);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 62e1ca163..bf7504d91 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1,4 +1,4 @@
-@import '_variables';
+@use '_variables';
 
 @mixin disable-default-a-behaviour {
   &:hover,
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index d54563df6..b9c82ea77 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,5 @@
-@import '_bootstrap-variables';
+@use 'sass:math';
+@use '_bootstrap-variables';
 
 $small-view: 800px;
 $mobile-view: 500px;
@@ -53,7 +54,7 @@ $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
 
-$banner-inverted-ratio: 1/6;
+$banner-inverted-ratio: #{math.div(1, 6)};
 
 $max-channels-width: 1200px;