chore: separate mixins from definitions

src/scss/_definitions.scss

@@ -36,108 +36,3 @@ $fontweight_hyper: 800;
 
 $basefont: Open Sans, sans-serif;
 $titlefont: Amatic SC, sans-serif;
-
-
-// MIXINS RESPONSIVES
-
-// Small tablets and large smartphones (landscape view)
-$screen-sm-min: 576px;
-
-// Small tablets (portrait view)
-$screen-md-min: 768px;
-
-// Tablets and small desktops
-$screen-lg-min: 992px;
-
-// Large tablets and desktops
-$screen-xl-min: 1200px;
-
-// Very large desktops
-$screen-xxl-min: 1600px;
-
-
-// Small devices
-@mixin sm {
-   @media (min-width: #{$screen-sm-min}) {
-       @content;
-   }
-}
-
-// Medium devices
-@mixin md {
-   @media (min-width: #{$screen-md-min}) {
-       @content;
-   }
-}
-
-// Large devices
-@mixin lg {
-   @media (min-width: #{$screen-lg-min}) {
-       @content;
-   }
-}
-
-// Extra large devices
-@mixin xl {
-   @media (min-width: #{$screen-xl-min}) {
-       @content;
-   }
-}
-
-// Extra large desktops
-@mixin xxl {
-   @media (min-width: #{$screen-xxl-min}) {
-       @content;
-   }
-}
-
-// Custom devices
-@mixin rwd($screen) {
-   @media (min-width: $screen+'px' ) {
-      @content;
-   }
-}
-
-// MIXINS AUTRES
-
-@mixin borders() {
-  border: $border-size solid rgba(0, 0, 0, 0.3)
-}
-
-@mixin prefer-no-borders() {
-  &:not(:hover) {
-    border-color:transparent;
-  }
-}
-
-@mixin border-radius($border-radius) {
-  border-radius: $border-radius $border-radius $border-radius $border-radius;
-}
-
-@mixin shape-style($size) {
-    @include borders();
-    @include border-radius($btn-radius);
-
-    background-color:transparent;
-
-    // Biseau
-    position: relative;
-    z-index:1;
-    overflow: visible;
-    &:before {
-        content: " ";
-        position: absolute;
-        top:0;
-        left:-$size/2;
-        right:-$size/2;
-        bottom:0;
-        z-index:-1;
-        transform: skewX(-15deg);
-    }
-}
-
-@mixin colorize-shape($background-color) {
-    &:before {
-        background-color: $background-color;
-    }
-}

src/scss/_mixins.scss

@@ -0,0 +1,7 @@
+// MIXINS
+// Include every mixins files
+
+@import 'mixins/colors';
+@import 'mixins/responsive';
+@import 'mixins/borders';
+@import 'mixins/shape';

src/scss/_palette.scss

@@ -46,6 +46,14 @@ $semantics: (
   "success":"green",
   "muted":"grey");
 
+@function get-color($name) {
+    @if map-has-key($semantics, $name) {
+        @return map-get($palette, map-get($semantics, $name));
+    } @else {
+        @return map-get($palette, $name);
+    }
+}
+
 // **Couleurs du theme**
 // Ne pas retirer ces couleurs, qui
 // sont essentielle pour que le framework functionne.

src/scss/mixins/_borders.scss

@@ -0,0 +1,15 @@
+// BORDERS AND BORDERS RADIUS MIXINS
+
+@mixin borders() {
+  border: $border-size solid rgba(0, 0, 0, 0.3)
+}
+
+@mixin prefer-no-borders() {
+  &:not(:hover) {
+    border-color:transparent;
+  }
+}
+
+@mixin border-radius($border-radius) {
+  border-radius: $border-radius $border-radius $border-radius $border-radius;
+}

src/scss/mixins/_colors.css

@@ -6,14 +6,6 @@
  */
 
  // FUNCTIONS TO GET MORE EASILY COLORS
- @function get-color($name) {
-     @if map-has-key($semantics, $name) {
-         @return map-get($palette, map-get($semantics, $name));
-     } @else {
-         @return map-get($palette, $name);
-     }
- }
-
  @function list-colors() {
      $newmap: map-merge($palette, $semantics);
      @return $newmap;

src/scss/mixins/_responsive.scss

@@ -0,0 +1,59 @@
+// MIXINS RESPONSIVES
+
+// Small tablets and large smartphones (landscape view)
+$screen-sm-min: 576px;
+
+// Small tablets (portrait view)
+$screen-md-min: 768px;
+
+// Tablets and small desktops
+$screen-lg-min: 992px;
+
+// Large tablets and desktops
+$screen-xl-min: 1200px;
+
+// Very large desktops
+$screen-xxl-min: 1600px;
+
+
+// Small devices
+@mixin sm {
+   @media (min-width: #{$screen-sm-min}) {
+       @content;
+   }
+}
+
+// Medium devices
+@mixin md {
+   @media (min-width: #{$screen-md-min}) {
+       @content;
+   }
+}
+
+// Large devices
+@mixin lg {
+   @media (min-width: #{$screen-lg-min}) {
+       @content;
+   }
+}
+
+// Extra large devices
+@mixin xl {
+   @media (min-width: #{$screen-xl-min}) {
+       @content;
+   }
+}
+
+// Extra large desktops
+@mixin xxl {
+   @media (min-width: #{$screen-xxl-min}) {
+       @content;
+   }
+}
+
+// Custom devices
+@mixin rwd($screen) {
+   @media (min-width: $screen+'px' ) {
+      @content;
+   }
+}

src/scss/mixins/_shape.scss

@@ -0,0 +1,27 @@
+@mixin shape-style($size) {
+    @include borders();
+    @include border-radius($btn-radius);
+
+    background-color:transparent;
+
+    // Biseau
+    position: relative;
+    z-index:1;
+    overflow: visible;
+    &:before {
+        content: " ";
+        position: absolute;
+        top:0;
+        left:-$size/2;
+        right:-$size/2;
+        bottom:0;
+        z-index:-1;
+        transform: skewX(-15deg);
+    }
+}
+
+@mixin colorize-shape($background-color) {
+    &:before {
+        background-color: $background-color;
+    }
+}

src/scss/style.scss

@@ -21,10 +21,10 @@
 
 @import 'palette';
 
-@import 'colors';
-
 @import 'definitions';
 
+@import 'mixins';
+
 @import 'typography';
 
 @import 'global';