[REF] *: convert less content to scss content

Convert content so that the assets compile on app installation. The
style is still broken after this as the variables/mixins/... are not
defined in the right order (as it did not matter in LESS but does in
SCSS).

This commit basically changes:
- Variables: @​var_hello -> $var-hello
- Mixins: .mixin_world() {} -> @​mixin mixin-world {}
- Classes used as mixin: .my_class() -> @​extend .my_class
    - Here there were no other solution than to convert the use of
      a mixin call by the use of an extend as a first approximation
- LESS functions -> SCSS functions (e.g. fade -> rgba)
- Move first variable definition before the variable is used
    - Still need to make sure last variable definition is at the
      right place

10 files changed, 362 insertions, 356 deletions

diff --git a/addons/mail/static/src/scss/chat_window.scss b/addons/mail/static/src/scss/chat_window.scss
index cf21202863b..8d43b2b9013 100644
--- a/addons/mail/static/src/scss/chat_window.scss
+++ b/addons/mail/static/src/scss/chat_window.scss
@@ -1,25 +1,25 @@
-@o-chat-window-bg: #FAFAFA;
-@o-chat-window-width: 325px;
-@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
+$o-chat-window-bg: #FAFAFA;
+$o-chat-window-width: 325px;
+$o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
                            // backend and other assets (livechat)
-@o-chat-header-height: 46px;
-@o-chat-window-zindex: @zindex-modal + 1;
+$o-chat-header-height: 46px;
+$o-chat-window-zindex: $zindex-modal + 1;
 
 .o_chat_window {
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     position: fixed;
-    width: @o-chat-window-width;
+    width: $o-chat-window-width;
     max-width: 100%;
     height: 400px;
     max-height: 100%;
     font-size: 12px;
-    background-color: @o-chat-window-bg;
+    background-color: $o-chat-window-bg;
     border-radius: 6px 6px 0 0;
-    z-index: @o-chat-window-zindex;
-    box-shadow: -5px -5px 10px fade(black, 18%);
+    z-index: $o-chat-window-zindex;
+    box-shadow: -5px -5px 10px rgba(black, 0.18);
 
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
         width: 100%;
         height: 100%!important;
         box-shadow: none;
@@ -33,17 +33,17 @@
     }
 
     .o_chat_header {
-        .o-flex-display();
-        .o-flex(0, 0, auto);
+        @include o-flex-display;
+        @include o-flex(0, 0, auto);
         color: white;
-        padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
+        padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
         border-radius: 3px 3px 0 0;
-        border-bottom: 1px solid @gray-lighter-dark;
-        background-color: @odoo-brand-primary;
+        border-bottom: 1px solid $gray-lighter-dark;
+        background-color: $odoo-brand-primary;
         padding: 8px;
 
-        @media (max-width: @screen-xs-max) {
-            height: @o-chat-header-height;
+        @media (max-width: $screen-xs-max) {
+            height: $o-chat-header-height;
             padding-top: 12px;
             border-radius: 0px;
             .o_chat_title {
@@ -59,30 +59,30 @@
 
         .o_chat_title {
             cursor: pointer;
-            .o-flex(1, 1, auto);
-            .o-text-overflow();
+            @include o-flex(1, 1, auto);
+            @include o-text-overflow;
         }
 
         .o_chat_window_buttons {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
             .o_chat_window_close, .o_chat_window_expand {
                 color: white;
                 padding: 3px;
                 margin-left: 5px;
-                .o-hover-opacity(0.7, 1);
+                @include o-hover-opacity(0.7, 1);
             }
         }
 
     }
 
     .o_mail_thread {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         overflow: auto;
         -webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
         .o_thread_date_separator {
             margin: 0px 0px 15px 0px;
             .o_thread_date {
-                background-color: @o-chat-window-bg;
+                background-color: $o-chat-window-bg;
             }
         }
         .o_thread_message {
@@ -102,11 +102,11 @@
     width: auto;
     height: 28px;
     color: white;
-    background-color: @gray-dark;
+    background-color: $gray-dark;
     cursor: pointer;
     box-shadow: none;
 
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
         display: none;
     }
 
@@ -118,8 +118,8 @@
         padding: 5px;
 
         .o_total_unread_counter {
-            .o-position-absolute(-10px, 0, auto, auto);
-            background-color: @odoo-brand-optional;
+            @include o-position-absolute(-10px, 0, auto, auto);
+            background-color: $odoo-brand-optional;
             padding: 0 2px;
             font-size: smaller;
         }
@@ -129,7 +129,7 @@
     }
 
     > ul {
-        max-width: @o-chat-window-width;
+        max-width: $o-chat-window-width;
         padding: 0;
 
         > li.o_chat_header {
@@ -139,7 +139,7 @@
                 border-top: 1px solid white;
             }
             &:hover {
-                background-color: darken(@odoo-brand-primary, 10%);
+                background-color: darken($odoo-brand-primary, 10%);
             }
         }
     }
diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss
index 4618cbc73cf..ba863a5c664 100644
--- a/addons/mail/static/src/scss/chatter.scss
+++ b/addons/mail/static/src/scss/chatter.scss
@@ -10,34 +10,34 @@
     }
 
     .o_chatter_topbar {
-        height: @odoo-statusbar-height;
+        height: $odoo-statusbar-height;
         position: relative;
-        margin: @grid-gutter-width*0.5 0 0;
+        margin: $grid-gutter-width*0.5 0 0;
         padding: 0;
-        .o-flex-display();
+        @include o-flex-display;
 
         > .btn {
-            height: @odoo-statusbar-height + 1;
+            height: $odoo-statusbar-height + 1;
             border: 1px solid transparent;
         }
 
         > .o_followers {
-            height: @odoo-statusbar-height + 1;
+            height: $odoo-statusbar-height + 1;
             border-bottom: 1px solid transparent;
-            .o-flex(1,1,auto);
+            @include o-flex(1,1,auto);
         }
     }
 
     &.o_chatter_composer_active .o_chatter_topbar {
         > .btn, > .o_followers{
-            border-radius: @border-radius-small @border-radius-small 0 0;
+            border-radius: $border-radius-small $border-radius-small 0 0;
             border-width: 0 0 1px;
-            border-bottom-color: @gray-lighter-dark;
+            border-bottom-color: $gray-lighter-dark;
 
             &.o_active {
-                color: @odoo-brand-primary;
-                background-color: @gray-lighter;
-                border-color: @gray-lighter-dark;
+                color: $odoo-brand-primary;
+                background-color: $gray-lighter;
+                border-color: $gray-lighter-dark;
                 border-width: 1px 1px 0;
             }
         }
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
index 861ddc1d7fa..b19cde9fb2c 100644
--- a/addons/mail/static/src/scss/composer.scss
+++ b/addons/mail/static/src/scss/composer.scss
@@ -1,7 +1,7 @@
 @font-face {
     font-family: 'emojifont';
-    src: local('Segoe UI'), 
-         local('Apple Color Emoji'), 
+    src: local('Segoe UI'),
+         local('Apple Color Emoji'),
          local('Android Emoji'),
          local('Noto Color Emoji'),
          local('Twitter Color Emoji'),
@@ -14,11 +14,11 @@
 
 .o_chat_composer {
     position: relative;
-    .o-flex(0, 0, auto);
-    .o-flex-display();
+    @include o-flex(0, 0, auto);
+    @include o-flex-display;
     margin: 1px 0;
     border-top: none;
-    background: @gray-lighter;
+    background: $gray-lighter;
 
     .o_composer, .o_composer_subject {
         position: relative;
@@ -30,11 +30,11 @@
     }
 
     .o_composer_subject {
-        .o-flex-display();
+        @include o-flex-display;
         padding-bottom: 5px;
 
         > input {
-            .o-flex(1, 1, auto);
+            @include o-flex(1, 1, auto);
             padding: 5px;
             margin-right: 30px;
         }
@@ -52,7 +52,7 @@
             word-break: break-all;
         }
         .o_composer_mention_dropdown .o_mention_proposition > a {
-            .o-text-overflow();
+            @include o-text-overflow;
             width: 100%;
             padding: 3px 15px;
             .o_mention_name {
@@ -67,26 +67,26 @@
             resize: none;
         }
         .btn-icon {
-            .o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
+            @include o-hover-opacity($default-opacity: 0.8, $hover-opacity: 1);
             border: none;
         }
         .o_composer_button_full_composer {
-            .o-position-absolute(auto, 0);
+            @include o-position-absolute(auto, 0);
         }
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             .o_composer_button_send {
-                color: @odoo-brand-optional;
+                color: $odoo-brand-optional;
             }
         }
     }
 
    .o_mail_emoji_container {
-        padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
-        border: 1px solid @gray-lighter-dark;
-        background-color: @gray-lighter;
+        padding: 0 $o-mail-chatter-gap $o-mail-chatter-gap 0;
+        border: 1px solid $gray-lighter-dark;
+        background-color: $gray-lighter;
 
         .o_mail_emoji {
-            margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
+            margin: $o-mail-chatter-gap 0 0 $o-mail-chatter-gap;
             cursor: pointer; // only in the popover
             min-width: 20px;
             min-height: 20px;
@@ -95,18 +95,18 @@
 
     // Both inline and not-inline design. Mini-composer disabled.
     &:not(.o_chat_mini_composer) {
-        padding:  @mail-thread-avatar-size*0.5;
-        padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
-        border: 1px solid @gray-lighter-dark;
+        padding:  $mail-thread-avatar-size*0.5;
+        padding-left: $grid-gutter-width*0.5 + $mail-thread-avatar-size + $o-mail-chatter-gap;
+        border: 1px solid $gray-lighter-dark;
         border-top: none;
 
         .o_chatter_avatar {
-            .o-position-absolute(0, @left:  -@mail-thread-avatar-size - @o-mail-chatter-gap);
+            @include o-position-absolute(0, $left:  -$mail-thread-avatar-size - $o-mail-chatter-gap);
         }
 
         .o_chatter_composer_info, .o_composer_suggested_partners {
-            .o-flex(0, 0, 100%);
-            margin-bottom: @o-mail-chatter-gap*0.5;
+            @include o-flex(0, 0, 100%);
+            margin-bottom: $o-mail-chatter-gap*0.5;
         }
 
         .o_composer_container {
@@ -119,10 +119,10 @@
         }
 
         .o_composer, .o_composer_subject {
-            border: 1px solid @gray-lighter-dark;
+            border: 1px solid $gray-lighter-dark;
 
             input {
-                padding: 0 0 @o-mail-chatter-gap;
+                padding: 0 0 $o-mail-chatter-gap;
                 border: none;
             }
         }
@@ -132,34 +132,34 @@
         }
 
         .o_chatter_composer_tools {
-            border-top: 1px solid @gray-lighter-dark;
-            @media (max-width: @screen-xs-max) {
+            border-top: 1px solid $gray-lighter-dark;
+            @media (max-width: $screen-xs-max) {
                 margin-top: 10px;
             }
         }
 
         &:not(.o_chat_inline_composer) {
-            .o-flex-flow(row, wrap);
+            @include o-flex-flow(row, wrap);
 
             .o_composer_container, .o_composer_button_send {
-                .o-flex(1, 0, 100%);
+                @include o-flex(1, 0, 100%);
             }
             .o_composer, .o_composer_subject {
-                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
+                padding: $o-mail-chatter-gap $o-mail-chatter-gap 0;
             }
             .o_composer_send {
-                margin-top: @o-mail-chatter-gap;
+                margin-top: $o-mail-chatter-gap;
             }
         }
 
         &.o_chat_inline_composer {
             .o_composer_container {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
             }
             .o_composer {
                 display: flex;
                 min-height: 40px;
-                padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap;
+                padding: $o-mail-chatter-gap $o-mail-chatter-gap 0 $o-mail-chatter-gap;
                 border-radius: 2px 0 0 2px;
                 border-right-width: 0;
             }
@@ -168,32 +168,32 @@
                 border-width: 1px;
             }
             .o_composer_input {
-                .o-flex-flow(row, wrap);
+                @include o-flex-flow(row, wrap);
             }
             .o_composer_text_field {
-                .o-flex(1, 1, 50%);
+                @include o-flex(1, 1, 50%);
                 margin: -4px 7px 5px 0px;
                 padding: 2.5px 0px 0px 5px;
             }
             .o_chatter_composer_tools {
-                .o-flex(0, 1, auto);
+                @include o-flex(0, 1, auto);
             }
             .o_composer_attachments_list {
-                .o-flex(1, 0, 100%);
+                @include o-flex(1, 0, 100%);
             }
 
             .o_chatter_composer_tools {
                 border: none;
-                border-left: 1px solid @gray-lighter-dark;
-                padding-left: @o-mail-chatter-gap*0.5;
-                .o-transform(translateY(-@o-mail-chatter-gap*0.5));
+                border-left: 1px solid $gray-lighter-dark;
+                padding-left: $o-mail-chatter-gap*0.5;
+                @include o-transform(translateY(-$o-mail-chatter-gap*0.5));
             }
 
             .o_composer_button_send {
                 border-radius: 0 3px 3px 0;
                 // Make the button appear as the same size as the subject input
-                padding: 10px @padding-base-horizontal;
-                border: 1px solid darken(@odoo-brand-optional, 5%);
+                padding: 10px $padding-base-horizontal;
+                border: 1px solid darken($odoo-brand-optional, 5%);
                 border-left-width: 0;
             }
         }
@@ -202,24 +202,24 @@
     // Mini-composer enabled
     &.o_chat_mini_composer {
         .o_composer_container {
-            border-top: 1px solid @gray-lighter-dark;
+            border-top: 1px solid $gray-lighter-dark;
             width: 100%;
         }
         .o_mail_emoji_container {
-            .o-position-absolute(auto, 0, 100%, 0);
+            @include o-position-absolute(auto, 0, 100%, 0);
             border-bottom-width: 1px;
         }
         .o_composer_input {
-            .o-flex-flow(row, nowrap);
+            @include o-flex-flow(row, nowrap);
 
             .o_chatter_composer_tools {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
         }
         .o_composer_button_send, .o_chatter_avatar {
             display: none;
         }
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             .o_composer_button_send {
                 display: inline-block;
             }
@@ -228,7 +228,7 @@
 }
 
 .o_composer_attachments_list:not(:empty) {
-    margin-top: @o-mail-chatter-gap;
+    margin-top: $o-mail-chatter-gap;
     text-align: justify;
 }
 
@@ -245,34 +245,34 @@
 
 // Attachment Icons (common for chat thread and chat composer)
 // ------------------------------------------------------------------
-@o-mail-attachment-image-size: 38px;
-@o-mail-attachment-margin: 5px;
+$o-mail-attachment-image-size: 38px;
+$o-mail-attachment-margin: 5px;
 
 .o_attachments_list, .o_attachments_previews {
-    margin: 0 -@o-mail-attachment-margin 0;
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
+    margin: 0 -$o-mail-attachment-margin 0;
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
 }
 
 .o_attachment {
     position: relative;
     width: 100%;
-    padding: @o-mail-attachment-margin;
+    padding: $o-mail-attachment-margin;
 
-    @media (min-width: @screen-sm-min) {
+    @media (min-width: $screen-sm-min) {
         width: 50%;
     }
-    @media (min-width: @screen-md-min) {
-        width: percentage(1/4);
+    @media (min-width: $screen-md-min) {
+        width: 25%;
     }
 
     .o_attachment_wrap {
         overflow: hidden;
         position: relative;
-        border-bottom: 1px solid fade(black, 10%);
+        border-bottom: 1px solid rgba(black, 0.1);
         border-radius: 2px;
         padding: 4px 6px 0 4px;
-        background-color: fade(black, 5%);
+        background-color: rgba(black, 0.05);
     }
 
     &.o_attachment_editable .o_attachment_wrap  {
@@ -280,10 +280,11 @@
     }
 
     .o_image {
-        .square(@o-mail-attachment-image-size);
+        width: $o-mail-attachment-image-size;
+        height: $o-mail-attachment-image-size;
         image-orientation: from-image; // Only supported in Firefox
         &.o_hover {
-            .o-hover-opacity(@default-opacity: 1, @hover-opacity: 0.7);
+            @include o-hover-opacity($default-opacity: 1, $hover-opacity: 0.7);
         }
     }
 
@@ -292,10 +293,10 @@
     }
 
     .caption {
-        .o-text-overflow(block);
+        @include o-text-overflow(block);
 
         a {
-            .o-hover-text-color(@default-color: @odoo-main-text-color, @hover-color: @headings-color);
+            @include o-hover-text-color($default-color: $odoo-main-text-color, $hover-color: $headings-color);
         }
     }
 
@@ -304,23 +305,23 @@
     }
 
     .o_attachment_uploaded, .o_attachment_delete {
-        .o-position-absolute(0,0,0, @left: auto);
-        .o-flex-display();
-        .o-align-items(center);
-        .o-justify-content(center);
+        @include o-position-absolute(0, 0, 0, $left: auto);
+        @include o-flex-display();
+        @include o-align-items(center);
+        @include o-justify-content(center);
         width: 45px;
     }
 
     .o_attachment_delete {
-        background: desaturate(@brand-primary, 50%);
+        background: desaturate($brand-primary, 50%);
         color: white;
         cursor: pointer;
         font-size: 20px;
-        .o-transform(translateX(100%));
-        .o-transition(all, 0.3s);
+        @include o-transform(translateX(100%));
+        @include o-transition(all, 0.3s);
 
         &:hover {
-            background: @brand-primary;
+            background: $brand-primary;
         }
     }
 
@@ -343,8 +344,8 @@
     }
 
     &:hover .o_attachment_delete {
-        .o-transition(all, 0.1s);
-        .o-transform(translateX(0));
+        @include o-transition(all, 0.1s);
+        @include o-transform(translateX(0));
     }
 }
 
@@ -352,20 +353,20 @@
     > .o_attachment {
         width: 50%;
 
-        @media (min-width: @screen-sm-min) {
+        @media (min-width: $screen-sm-min) {
             width: percentage(1/3);
         }
-        @media (min-width: @screen-md-min) {
+        @media (min-width: $screen-md-min) {
             width: percentage(1/4);
         }
-        @media (min-width: @screen-lg-min) {
+        @media (min-width: $screen-lg-min) {
             width: percentage(1/6);
         }
 
         .o_attachment_wrap {
             padding: 0;
             border-radius: 2px;
-            border: 1px solid @gray-lighter-darker;
+            border: 1px solid $gray-lighter-darker;
         }
 
         .o_image_box {
@@ -373,94 +374,98 @@
             padding-top: 75%;
 
             .o_attachment_image {
-                .o-position-absolute(0,0,0,0);
+                @include o-position-absolute(0, 0, 0, 0);
                 background-size: cover;
                 background-position: center;
-                .o-transform(scale(1.05));
-                .o-transition(all, 0.3s);
+                @include o-transform(scale(1.05));
+                @include o-transition(all, 0.3s);
             }
 
             &:hover .o_attachment_image {
-                .o-transform(scale(1));
+                @include o-transform(scale(1));
             }
         }
 
         .o_image_overlay {
-            .o-position-absolute(@top: 0, @left: 0, @right:0, @bottom:0);
-            .o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
-            .o-linear-gradient(180deg, fade(black, 20%), fade(black, 90%));
-            .o-transition(all, 0.3s);
+            @include o-position-absolute($top: 0, $left: 0, $right:0, $bottom:0);
+            @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
+            @include o-linear-gradient(180deg, rgba(black, 0.2), rgba(black, 0.9));
+            @include o-transition(all, 0.3s);
             padding: 10px;
 
             .o_attachment_title {
-                .o-position-absolute(@bottom: 7px);
+                @include o-position-absolute($bottom: 7px);
                 width: 80%;
-                .o-text-overflow(inline-block);
-                font-size: @font-size-small;
+                @include o-text-overflow(inline-block);
+                font-size: $font-size-small;
             }
 
             .o_attachment_download {
-                .o-position-absolute(@right: 7px, @bottom:7px);
+                @include o-position-absolute($right: 7px, $bottom:7px);
             }
         }
     }
 }
 
-.o_modal_fullscreen {
-    z-index:  @o-chat-window-zindex + 1;
-    .o-viewer-black-btn () {
-        background-color: fade(black, 40%);
-        color: fade(@gray-lighter, 70%);
 
-        &:hover {
-            background-color: fade(black,60%);
-            color: white;
-        }
+@mixin o-viewer-black-btn {
+    background-color: rgba(black, 0.4);
+    color: rgba($gray-lighter, 0.7);
 
-        &.disabled {
-            color: @gray-light;
-            background: none;
-        }
+    &:hover {
+        background-color: rgba(black, 0.6);
+        color: white;
     }
 
+    &.disabled {
+        color: $gray-light;
+        background: none;
+    }
+}
+.o_modal_fullscreen {
+    z-index: $o-chat-window-zindex + 1;
+
     .o_viewer_content {
-        .square(100%);
         position: relative;
+        width: 100%;
+        height: 100%;
 
         .o_viewer-header {
-            .o-position-absolute(0, 0, @left: 0);
+            @include o-position-absolute(0, 0, $left: 0);
             height: 45px;
-            padding: @grid-gutter-width*0.5;
-            background-color: fade(black, 80%);
+            padding: $grid-gutter-width*0.5;
+            background-color: rgba(black, 0.8);
             z-index: 1;
             color: #FFFFFF;
 
             a {
-                .o-hover-text-color(fade(@gray-lighter,60%), white);
+                @include o-hover-text-color(rgba($gray-lighter, 0.6), white);
             }
 
             .o_close_btn {
-                .o-position-absolute(-1px, @grid-gutter-width*0.5);
-                font-size: @font-size-h1;
+                @include o-position-absolute(-1px, $grid-gutter-width*0.5);
+                font-size: $font-size-h1;
                 font-weight: 300;
             }
         }
 
         .o_loading_img {
-            .o-position-absolute(@top: 45%, @right: 0, @left: 0);
+            @include o-position-absolute($top: 45%, $right: 0, $left: 0);
         }
 
         .o_viewer_img_wrapper {
             cursor: pointer;
-            .square(100%);
             position: fixed;
-            background-color: fade(black, 70%);
+            width: 100%;
+            height: 100%;
+            background-color: rgba(black, 0.7);
 
             .o_viewer_zoomer {
-                .square(100%);
-                .o-flex-display();
-                .o-justify-content(center);
-                .o-align-items(center);
+                width: 100%;
+                height: 100%;
+                @include o-flex-display;
+                @include o-justify-content(center);
+                @include o-align-items(center);
                 padding: 45px 0;
 
                 img {
@@ -476,7 +481,8 @@
                 }
 
                 .o_viewer_pdf {
-                    .size(80%, 100%);
+                    width: 80%;
+                    height: 100%;
                     border: 0px;
                     box-shadow: 1px 1px 20px 1px #000;
                 }
@@ -488,29 +494,29 @@
         }
 
         .o_viewer_toolbar {
-            .o-position-absolute(@left: 50%, @bottom: @grid-gutter-width*0.5);
-            .o-transform(translate(-50%, -50%));
+            @include o-position-absolute($left: 50%, $bottom: $grid-gutter-width*0.5);
+            @include o-transform(translate(-50%, -50%));
             overflow: hidden;
             border-radius: 4px;
-            background-color: fade(black, 40%);
+            background-color: rgba(black, 0.4);
 
             .o_viewer_toolbar_btn {
-                .o-viewer-black-btn();
-                padding-left:  8px;
+                @include o-viewer-black-btn;
+                padding-left: 8px;
                 padding-right: 8px;
             }
         }
     }
 
     .arrow {
-        .o-position-absolute(50%, @grid-gutter-width*0.5);
+        @include o-position-absolute(50%, $grid-gutter-width*0.5);
         border-radius: 100%;
         padding: 12px 16px 11px 18px;
-        .o-viewer-black-btn();
+        @include o-viewer-black-btn;
     }
 
     .arrow-left {
-        left: @grid-gutter-width*0.5;
+        left: $grid-gutter-width*0.5;
         right: auto;
         padding: 12px 18px 11px 16px;
     }
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
index 4e0ae26dccc..58473d6ad40 100644
--- a/addons/mail/static/src/scss/discuss.scss
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -1,10 +1,10 @@
 // ------------------------------------------------------------------
 // Layout
 // ------------------------------------------------------------------
-@mail-chat-sidebar-width: 250px;
+$mail-chat-sidebar-width: 250px;
 
 .o_mail_chat {
-    .o-position-absolute(0, 0, 0, 0);
+    @include o-position-absolute(0, 0, 0, 0);
     height: 100%;
     overflow: hidden;
 
@@ -13,13 +13,13 @@
         background-color: #DFA941;
         color: white;
         text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
-        .o-flex-display();
-        border-bottom: 1px solid @odoo-main-color-muted;
+        @include o-flex-display;
+        border-bottom: 1px solid $odoo-main-color-muted;
 
         .o_mail_request_permission {
-            .o-flex-display();
+            @include o-flex-display;
             justify-content: center;
-            .o-flex(1,1, auto);
+            @include o-flex(1,1, auto);
         }
         > span {
             font-size: 16px;
@@ -38,19 +38,19 @@
     }
 
     .o_mail_chat_sidebar {
-        width: @mail-chat-sidebar-width;
+        width: $mail-chat-sidebar-width;
         height: 100%;
         float: left;
         overflow: auto;
-        padding: @odoo-horizontal-padding 0;
+        padding: $odoo-horizontal-padding 0;
 
-        @media (min-width: @screen-lg-min) {
-            width: @mail-chat-sidebar-width + 50px;
+        @media (min-width: $screen-lg-min) {
+            width: $mail-chat-sidebar-width + 50px;
         }
 
         .o_mail_sidebar_title {
-            .o-flex-display();
-            padding: 6px @odoo-horizontal-padding 0 @odoo-horizontal-padding;
+            @include o-flex-display;
+            padding: 6px $odoo-horizontal-padding 0 $odoo-horizontal-padding;
             align-items: center;
             justify-content: space-between;
             h4 {
@@ -65,16 +65,16 @@
             }
         }
         .o_mail_chat_channel_item {
-            .o-flex-display();
+            @include o-flex-display;
             width: 100%;
-            padding: 2px @odoo-horizontal-padding 2px (@odoo-horizontal-padding + 12px); // compensate icon
+            padding: 2px $odoo-horizontal-padding 2px ($odoo-horizontal-padding + 12px); // compensate icon
 
             .o_channel_name {
-                .o-flex(1, 1, auto);
-                .o-text-overflow();
+                @include o-flex(1, 1, auto);
+                @include o-text-overflow;
             }
             .o_mail_sidebar_needaction, .o_mail_partner_unpin, .o_mail_channel_settings {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
             .o_mail_sidebar_needaction {
                 margin: 0 0 0 5px;
@@ -87,18 +87,18 @@
             }
 
             &.o_mail_chat_title_main {
-                padding: @padding-base-vertical @odoo-horizontal-padding;
+                padding: $padding-base-vertical $odoo-horizontal-padding;
                 margin-bottom: 2px;
             }
         }
 
         .o_mail_chat_channel_item + .o_mail_sidebar_title {
-            margin-top: @padding-base-vertical;
+            margin-top: $padding-base-vertical;
         }
 
         .o_mail_add_channel {
             width: 100%;
-            padding: 5px (@odoo-horizontal-padding + 23px); // compensate icon
+            padding: 5px ($odoo-horizontal-padding + 23px); // compensate icon
             position: relative;
 
             > input {
@@ -106,27 +106,27 @@
                 padding: 2px 5px;
             }
             > span {
-                .o-position-absolute(7px, @left: 27px);
+                @include o-position-absolute(7px, $left: 27px);
             }
         }
     }
 
     .o_mail_chat_content {
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
         height: 100%;
-        margin-left: @mail-chat-sidebar-width;
+        margin-left: $mail-chat-sidebar-width;
         position: relative;
-        @media (min-width: @screen-sm-min) {
+        @media (min-width: $screen-sm-min) {
             overflow: auto;
         }
 
-        @media (min-width: @screen-lg-min) {
-            margin-left: @mail-chat-sidebar-width + 50px;
+        @media (min-width: $screen-lg-min) {
+            margin-left: $mail-chat-sidebar-width + 50px;
         }
 
         .o_mail_thread {
-            .o-flex(1, 0, 0);
+            @include o-flex(1, 0, 0);
             overflow: auto;
             padding: 0 0 15px 0;
             -webkit-overflow-scrolling: touch; // smooth scrolling in iOS app (Safari)
@@ -138,11 +138,11 @@
         }
 
         .o_mail_snackbar {
-            .o-position-absolute(15px, 15px);
+            @include o-position-absolute(15px, 15px);
             padding-top: 10px;
             padding-bottom: 10px;
             cursor: pointer;
-            background-color: darken(@gray, 8%);
+            background-color: darken($gray, 8%);
             color: white;
         }
     }
@@ -151,27 +151,27 @@
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
-@sidebar-icon-opacity: 0.7;
+$sidebar-icon-opacity: 0.7;
 
 .o_mail_chat {
     .o_mail_chat_sidebar {
-        background-color: @gray-dark;
-        color: @gray-lighter-dark;
+        background-color: $gray-dark;
+        color: $gray-lighter-dark;
 
         .o_mail_chat_channel_item {
             cursor: pointer;
 
             &:hover {
-                background-color: darken(@gray-dark,2%);
+                background-color: darken($gray-dark,2%);
 
                 .o_mail_partner_unpin, .o_mail_channel_settings {
-                    opacity: @sidebar-icon-opacity;
+                    opacity: $sidebar-icon-opacity;
                 }
             }
 
             &.o_active {
-                background-color: @gray-darker;
-                box-shadow: inset 3px 0 0 @odoo-brand-optional;
+                background-color: $gray-darker;
+                box-shadow: inset 3px 0 0 $odoo-brand-optional;
             }
 
             .o_mail_hash {
@@ -179,7 +179,7 @@
             }
 
             .o_mail_partner_unpin, .o_mail_channel_settings {
-                .o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
+                @include o-hover-opacity($default-opacity: 0, $hover-opacity: 1);
             }
             &.o_unread_message {
                 color: white;
@@ -188,24 +188,24 @@
 
             > .badge {
                 color: white;
-                background-color: @odoo-brand-optional;
+                background-color: $odoo-brand-optional;
                 font-size: 10px;
                 line-height: 16px;
                 height: 18px;
             }
 
             &.o_mail_chat_title_main {
-                font-size: @font-size-base;
+                font-size: $font-size-base;
 
                 &.o_mail_chat_title_starred > .badge {
-                    background-color: @gray-light;
-                    border-color: @gray-light;
+                    background-color: $gray-light;
+                    border-color: $gray-light;
                 }
             }
         }
 
         > hr {
-            border-color: @gray;
+            border-color: $gray;
         }
 
         .o_mail_add_channel {
@@ -221,17 +221,17 @@
         .o_mail_sidebar_title {
             h4 {
                 margin: 0;
-                font-size: @font-size-small;
+                font-size: $font-size-small;
                 text-transform: uppercase;
-                color: @gray-light;
+                color: $gray-light;
                 &.o_mail_open_channels:hover {
                     color: white;
                 }
             }
             .o_add {
                 cursor: pointer;
-                .o-hover-opacity(@sidebar-icon-opacity, 1);
-                .o-hover-text-color(@gray-light, white);
+                @include o-hover-opacity($sidebar-icon-opacity, 1);
+                @include o-hover-text-color($gray-light, white);
             }
         }
     }
@@ -244,7 +244,7 @@
         .o_thread_message {
             opacity: 0.5;
             &.o_thread_selected_message {
-                padding: 4px @odoo-horizontal-padding;
+                padding: 4px $odoo-horizontal-padding;
                 opacity: 1;
                 background-color: lightgray;
             }
@@ -256,10 +256,10 @@
     font-size: 1em;
     position: relative;
     &.o_user_online {
-        color: @odoo-brand-optional;
+        color: $odoo-brand-optional;
     }
     &.o_user_idle {
-        color: @brand-warning;
+        color: $brand-warning;
     }
 }
 
@@ -267,14 +267,14 @@
 // ------------------------------------------------------------------
 // Mobile
 // ------------------------------------------------------------------
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_mail_chat {
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
         background: white;
 
         .o_mail_chat_mobile_control_panel {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
             padding: 5px;
             min-height: 44px;
             border-bottom: 1px solid #ebebeb;
@@ -292,7 +292,7 @@
             }
             .o_enable_searchview, .o_enable_searchview:focus,
                 .o_enable_searchview:hover, .o_enable_searchview:active  {
-                    .o-position-absolute(@right: 5px, @top: 5px);
+                    @include o-position-absolute($right: 5px, $top: 5px);
                     color: gray;
                     background: none;
                     font-size: 15px;
@@ -303,24 +303,24 @@
         }
 
         .o_mail_chat_mobile_inbox_buttons {
-            .o-flex-display();
-            .o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-flex(0, 0, auto);
             z-index: 2;
-            box-shadow: 0 2px 4px @gray-lighter-darker;
+            box-shadow: 0 2px 4px $gray-lighter-darker;
 
             .o_channel_inbox_item {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 width: 50%;
                 padding: 2%;
 
                 &.btn-default {
-                    border-bottom: 1px solid @gray-lighter-darker
+                    border-bottom: 1px solid $gray-lighter-darker
                 }
             }
         }
 
         .o_mail_chat_content {
-            .o-flex(1, 0, 0);
+            @include o-flex(1, 0, 0);
             margin-left: 10px;
             margin-right: 10px;
             background-color: transparent;
@@ -336,7 +336,7 @@
                 border: 1px solid #afafaf;
                 border-radius: 4px;
                 > span {
-                    .o-position-absolute(@top: 10px, @left: 10px);
+                    @include o-position-absolute($top: 10px, $left: 10px);
                 }
                 > input {
                     border: none;
@@ -346,7 +346,7 @@
             }
         }
         .o_mail_mobile_tabs {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
     }
 }
@@ -356,64 +356,64 @@
 // ------------------------------------------------------------------
 
 .o_mail_channel_preview {
-    .o-flex-display();
-    background-color: @gray-lighter;
-    color: @odoo-main-text-color;
+    @include o-flex-display;
+    background-color: $gray-lighter;
+    color: $odoo-main-text-color;
     cursor: pointer;
     overflow: hidden;
     position: relative;
     &:hover {
-        background-color: @gray-lighter-dark;
+        background-color: $gray-lighter-dark;
         .o_channel_name {
-            color: @headings-color;
+            color: $headings-color;
         }
     }
     &:not(:last-child) {
-        border-bottom: 1px solid @gray-lighter-darker;
+        border-bottom: 1px solid $gray-lighter-darker;
     }
     .o_mail_channel_image {
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
         position: relative;
         > img {
-            .square(100%);
+            @include square(100%);
             border-radius: 50%;
         }
         &.o_mail_channel_app > img {
             border-radius: 2px;
         }
         .o_mail_user_status {
-            .o-position-absolute(@bottom: 0px, @right: 0px);
+            @include o-position-absolute($bottom: 0px, $right: 0px);
         }
     }
     .o_channel_info {
-        .o-flex(1, 1, 100%);
+        @include o-flex(1, 1, 100%);
         overflow: hidden;
         .o_channel_title {
-            .o-flex-display();
+            @include o-flex-display;
             .o_channel_name {
-                .o-flex(0, 1, auto);
-                .o-text-overflow();
+                @include o-flex(0, 1, auto);
+                @include o-text-overflow;
             }
             .o_channel_counter {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
             }
             .o_last_message_date {
-                .o-flex(0, 0, auto);
-                color: @odoo-main-color-muted;
+                @include o-flex(0, 0, auto);
+                color: $odoo-main-color-muted;
                 font-weight: 500;
             }
         }
         .o_last_message_preview {
             width: 100%;
             max-height: 20px;
-            color: @odoo-main-color-muted;
-            .o-text-overflow();
+            color: $odoo-main-color-muted;
+            @include o-text-overflow;
         }
     }
     &.o_channel_unread {
         background-color: transparent;
         &:hover {
-            background-color: @gray-lighter;
+            background-color: $gray-lighter;
         }
         .o_channel_info {
             .o_channel_title {
@@ -421,29 +421,29 @@
                     font-weight: 700;
                 }
                 .o_last_message_date {
-                    color: @odoo-brand-optional;
+                    color: $odoo-brand-optional;
                 }
             }
         }
     }
 }
 
-@media (max-width: @screen-xs-max) {
-    @o-mail-chatter-mobile-gap: 2%;
+@media (max-width: $screen-xs-max) {
+    $o-mail-chatter-mobile-gap: 2%;
 
     .o_main_navbar > ul.o_menu_systray > li.open .dropdown-menu {
         border: none;
     }
 
     .o_mail_channel_preview {
-        padding: @o-mail-chatter-mobile-gap;
+        padding: $o-mail-chatter-mobile-gap;
 
         .o_mail_channel_image:not(img) {
-            width: @o-mail-chatter-mobile-gap*6;
+            width: $o-mail-chatter-mobile-gap*6;
         }
 
         .o_channel_info, .o_last_message_date {
-            margin-left: @o-mail-chatter-mobile-gap;
+            margin-left: $o-mail-chatter-mobile-gap;
         }
 
         .o_channel_name {
@@ -455,22 +455,22 @@
         }
 
         .o_last_message_preview {
-            margin-top: @o-mail-chatter-mobile-gap*0.5;
+            margin-top: $o-mail-chatter-mobile-gap*0.5;
         }
     }
 
     .o_mail_mobile_tabs {
-        .o-flex-display();
-        box-shadow: 0 0 8px @gray-lighter-darker;
+        @include o-flex-display;
+        box-shadow: 0 0 8px $gray-lighter-darker;
 
         .o_mail_mobile_tab {
-            .o-flex-display();
-            .o-flex(1, 1, auto);
+            @include o-flex-display;
+            @include o-flex(1, 1, auto);
             width: 20%;
-            .o-flex-flow(column, nowrap);
-            .o-justify-content(space-between);
-            padding: @o-mail-chatter-mobile-gap @o-mail-chatter-mobile-gap*2;
-            box-shadow: 1px 0 0 @gray-lighter-darker;
+            @include o-flex-flow(column, nowrap);
+            @include o-justify-content(space-between);
+            padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2;
+            box-shadow: 1px 0 0 $gray-lighter-darker;
             text-align: center;
 
             > span {
@@ -479,13 +479,13 @@
                font-size: 10px;
 
                &.fa {
-                   padding-bottom: @o-mail-chatter-mobile-gap*2;
+                   padding-bottom: $o-mail-chatter-mobile-gap*2;
                    font-size: 1.3em;
                }
             }
 
             &.active > span {
-                color: @odoo-brand-optional;
+                color: $odoo-brand-optional;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/extended_chat_window.scss b/addons/mail/static/src/scss/extended_chat_window.scss
index fcf92cf052a..9e0174654b1 100644
--- a/addons/mail/static/src/scss/extended_chat_window.scss
+++ b/addons/mail/static/src/scss/extended_chat_window.scss
@@ -1,23 +1,23 @@
 .o_chat_window {
     &.o_thread_less {
         .o_chat_search_input {
-            .o-flex-display();
-            .o-align-items(baseline);
-            padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
+            @include o-flex-display;
+            @include o-align-items(baseline);
+            padding: $o-mail-chatter-gap*0.5 $o-mail-chatter-gap;
 
             > span {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
 
             > input {
                 margin-left: 5px;
-                padding: @o-mail-chatter-gap*0.5;
-                .o-flex(1, 1, 100%);
+                padding: $o-mail-chatter-gap*0.5;
+                @include o-flex(1, 1, 100%);
             }
         }
 
         .o_mail_thread {
-            background-color: @odoo-webclient-background-color;
+            background-color: $odoo-webclient-background-color;
         }
 
         .o_chat_composer {
@@ -33,7 +33,7 @@
                     padding: 10px;
                     font-size: 13px;
                 }
-                @media (max-width: @screen-xs-max) {
+                @media (max-width: $screen-xs-max) {
                     width: 70%;
                     > textarea {
                         padding: 15px 10px;
@@ -41,14 +41,14 @@
                 }
             }
             .o_chatter_composer_tools {
-                .o-position-absolute(@right: 0px, @top: 0px);
+                @include o-position-absolute($right: 0px, $top: 0px);
 
-                @media (max-width: @screen-xs-max) {
-                    .o-position-absolute(@right: 6px, @top: 0px);
+                @media (max-width: $screen-xs-max) {
+                    @include o-position-absolute($right: 6px, $top: 0px);
                 }
                 button {
                     padding: 8px;
-                    @media (max-width: @screen-xs-max) {
+                    @media (max-width: $screen-xs-max) {
                         padding: 7px 6px 0px 6px;
                     }
                     &.btn-icon {
diff --git a/addons/mail/static/src/scss/followers.scss b/addons/mail/static/src/scss/followers.scss
index 4057450c2f7..5b7ff2b886f 100644
--- a/addons/mail/static/src/scss/followers.scss
+++ b/addons/mail/static/src/scss/followers.scss
@@ -1,6 +1,6 @@
 .o_followers {
     float: right;
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
         display: none !important; // Hide the followers in mobile
     }
 
@@ -38,7 +38,7 @@
         .o_followers_follow_button {
             width: 85px;
             padding-right: 0;
-            color: @text-color;
+            color: $text-color;
             font-weight: bold;
 
             .o_follow, .o_followers_unfollow, .o_followers_following {
@@ -62,10 +62,10 @@
 
             .fa {
                 &.fa-times {
-                    color: @brand-warning;
+                    color: $brand-warning;
                 }
                 &.fa-check {
-                    color: @brand-success;
+                    color: $brand-success;
                 }
             }
         }
@@ -91,26 +91,26 @@
             font-size: small;
 
             .o_partner {
-                @partner_avatar_size: 24px;
+                $partner-avatar-size: 24px;
                 position: relative; // required for old design compatibility
                 > a {
                     max-width: 160px;
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
-                    height: @partner_avatar_size;
-                    padding: 3px @partner_avatar_size + 8px;
+                    height: $partner-avatar-size;
+                    padding: 3px $partner-avatar-size + 8px;
                 }
                 > img {
-                    .o-position-absolute();
-                    width: @partner_avatar_size;
+                    @include o-position-absolute;
+                    width: $partner-avatar-size;
                 }
                 .o_remove_follower {
-                    .o-position-absolute(6px, 5px);
+                    @include o-position-absolute(6px, 5px);
                     cursor: pointer;
                 }
                 .o_edit_subtype {
-                    .o-position-absolute(6px, 18px);
+                    @include o-position-absolute(6px, 18px);
                     cursor: pointer;
                 }
             }
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index 5f1320ce402..58f00c1f4e5 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -16,7 +16,7 @@
 
             &.collapsed {
                 margin-bottom: 0;
-                .o-transition(margin, 0.8s);
+                @include o-transition(margin, 0.8s);
 
                 .o_chatter_planned_activities_summary {
                     display: inline-block;
@@ -44,12 +44,12 @@
                     margin-bottom: 8px;
 
                     img {
-                        .square(31px);
+                        @include square(31px);
                     }
 
                     .o_avatar_icon {
-                        .o-position-absolute(@right: -5px, @bottom: -5px);
-                        .square(25px);
+                        @include o-position-absolute($right: -5px, $bottom: -5px);
+                        @include square(25px);
                         padding: 6px 5px;
                         text-align: center;
                         line-height: 1.2;
@@ -64,12 +64,12 @@
                 .o_activity_info {
                     vertical-align: baseline;
                     padding: 4px 6px;
-                    background: @gray-lighter;
+                    background: $gray-lighter;
                     border-radius: 2px 2px 0 0;
-                    .o-hover-opacity(1, 1);
+                    @include o-hover-opacity(1, 1);
 
                     &.collapsed {
-                        .o-hover-opacity(0.5, 1);
+                        @include o-hover-opacity(0.5, 1);
                         background: transparent;
                     }
                 }
@@ -93,7 +93,7 @@
 
             .o_thread_message_tools {
                 .o_activity_link {
-                    padding: 0 @padding-base-horizontal;
+                    padding: 0 $padding-base-horizontal;
                 }
                 .o_activity_done {
                     padding-left: 0;
@@ -107,13 +107,13 @@
     }
 
     .o_activity_color_planned {
-        color: @brand-success;
+        color: $brand-success;
     }
     .o_activity_color_overdue {
-        color: @brand-danger;
+        color: $brand-danger;
     }
     .o_activity_color_today {
-        color: @brand-warning;
+        color: $brand-warning;
     }
 }
 
@@ -150,14 +150,14 @@
             padding: 0px 0px;
 
             & > li:last-child {
-                background-color: @odoo-brand-lightsecondary;
-                color: @gray-dark;
+                background-color: $odoo-brand-lightsecondary;
+                color: $gray-dark;
                 line-height: 3em;
             }
             li > ul.o_activity_log {
                 max-height: 300px;
                 overflow-y: auto;
-                color: @text-color;
+                color: $text-color;
 
                 li {
                     width: 100%;
@@ -166,14 +166,14 @@
                     &.o_activity_label {
                         line-height: 2.5em;
                         padding: 0px 5px;
-                        background-color: @odoo-brand-lightsecondary;
+                        background-color: $odoo-brand-lightsecondary;
                     }
 
                     &.o_schedule_activity {
                         padding: 8px 10px 8px 0px;
                         vertical-align: middle;
                         &:hover {
-                            background-color: @gray-lighter;
+                            background-color: $gray-lighter;
                             .o_activity_link_kanban {
                                 visibility: visible;
                             }
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 3f123ff70d6..958e1ff2c08 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -9,19 +9,19 @@
     &.o_no_notification > a {
         opacity: 0.5;
         > i {
-            .o-transform(translateY(0px));
+            @include o-transform(translateY(0px));
         }
         .o_notification_counter {
             display: none;
         }
     }
     &.open .o_mail_navbar_dropdown {
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
     }
     .o_notification_counter {
-        .o-position-absolute(@top: 20%, @right: 1px);
-        background: @odoo-brand-optional;
+        @include o-position-absolute($top: 20%, $right: 1px);
+        background: $odoo-brand-optional;
         color: white;
         padding: 0em 0.3em;
         font-size: 0.7em;
@@ -31,27 +31,27 @@
         padding: 0;
 
         .o_spinner {
-            .o-flex-display();
-            .o-align-items(center);
-            .o-justify-content(center);
-            color: @odoo-main-text-color;
+            @include o-flex-display;
+            @include o-align-items(center);
+            @include o-justify-content(center);
+            color: $odoo-main-text-color;
             height: 50px;
         }
 
         .o_mail_navbar_dropdown_top {
-            .o-flex-display();
-            .o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-flex(0, 0, auto);
             justify-content: space-between;
-            border-bottom: 1px solid @gray-lighter-darker;
-            box-shadow: 0 0 2px @gray-lighter-darker;
+            border-bottom: 1px solid $gray-lighter-darker;
+            box-shadow: 0 0 2px $gray-lighter-darker;
             .o_filter_button, .o_new_message {
-                .btn-link;
+                @extend .btn-link; // FIXME was a mixin before scss convertion
                 padding: 5px;
             }
             .o_filter_button {
-                color: @odoo-main-color-muted;
+                color: $odoo-main-color-muted;
                 &:hover, &.active {
-                    color: @odoo-brand-optional;
+                    color: $odoo-brand-optional;
                 }
                 &.active {
                     cursor: default;
@@ -61,12 +61,12 @@
         }
 
         .o_mail_navbar_dropdown_channels {
-            .o-flex(0, 1, auto);
+            @include o-flex(0, 1, auto);
             max-height: 400px;
             min-height: 50px;
             overflow-y: auto;
 
-            @media (min-width: @screen-sm-min) {
+            @media (min-width: $screen-sm-min) {
                 .o_mail_channel_preview {
                     height: 50px;
                     padding: 5px;
@@ -87,12 +87,12 @@
             }
         }
         .o_activity_filter_button {
-            .btn-link;
+            @extend .btn-link; // FIXME was a mixin before scss convertion
             padding: 2px;
         }
         .o_no_activity {
             cursor: initial;
-            .o-align-items(center);
+            @include o-align-items(center);
             color: grey;
             opacity: 0.5;
             padding: 3px;
@@ -106,7 +106,7 @@
 
 // Mobile rules
 // Goal: mock the design of Discuss in mobile
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_mail_navbar_item {
         .o_notification_counter {
             top: 10%;
@@ -120,7 +120,7 @@
                 padding: 5px;
                 height: 44px;
                 border-bottom: 1px solid #ebebeb;
-                box-shadow: 0 0 2px @gray-lighter-darker;
+                box-shadow: 0 0 2px $gray-lighter-darker;
             }
             .o_mail_navbar_dropdown_channels {
                 max-height: none;
@@ -132,7 +132,7 @@
                 left: 0px;
                 right: 0px;
                 background-color: white;
-                color: @odoo-main-text-color;
+                color: $odoo-main-text-color;
             }
         }
     }
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index eca57213a8a..9f9ace65de9 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -1,8 +1,3 @@
-@mail-thread-avatar-size: 36px;
-@mail-thread-icon-opacity: 0.6;
-@mail-thread-side-date-opacity: 0.6;
-@mail-thread-note: fade(@gray-lighter-dark, 50%);
-
 .o_mail_thread, .o_mail_activity {
     .o_thread_show_more {
         text-align: center;
@@ -11,11 +6,11 @@
     .o_thread_date_separator {
         margin-top: 15px;
         margin-bottom: 30px;
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             margin-top: 0px;
             margin-bottom: 15px;
         }
-        border-bottom: 1px solid @gray-lighter-darker;
+        border-bottom: 1px solid $gray-lighter-darker;
         text-align: center;
 
         .o_thread_date {
@@ -30,42 +25,42 @@
 
     .o_thread_new_messages_separator {
         margin-bottom: 15px;
-        border-bottom: solid lighten(@odoo-brand-primary, 15%) 1px;
+        border-bottom: solid lighten($odoo-brand-primary, 15%) 1px;
         text-align: right;
         .o_thread_separator_label {
             position: relative;
             top: 8px;
             padding: 0 10px;
             background: white;
-            color: lighten(@odoo-brand-primary, 15%);
+            color: lighten($odoo-brand-primary, 15%);
             font-size: smaller;
         }
     }
 
     .o_thread_message {
-        .o-flex-display();
-        padding: 4px @odoo-horizontal-padding;
+        @include o-flex-display;
+        padding: 4px $odoo-horizontal-padding;
         margin-bottom: 0px;
 
         &.o_mail_not_discussion {
-            background-color: @mail-thread-note;
-            border-bottom: 1px solid @gray-lighter-darker;
+            background-color: $mail-thread-note;
+            border-bottom: 1px solid $gray-lighter-darker;
         }
 
         .o_thread_message_sidebar {
-            .o-flex(0, 0, @mail-thread-avatar-size);
+            @include o-flex(0, 0, $mail-thread-avatar-size);
             margin-right: 10px;
             margin-top: 2px;
             text-align: center;
             font-size: smaller;
 
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 margin-top: 4px;
                 font-size: x-small;
             }
 
             .o_thread_message_avatar {
-                max-width: @mail-thread-avatar-size;
+                max-width: $mail-thread-avatar-size;
             }
             .o_thread_message_side_date {
                 margin-left: -5px;
@@ -82,17 +77,17 @@
             cursor: pointer;
             opacity: 0;
             &.fa-star {
-                opacity: @mail-thread-icon-opacity;
+                opacity: $mail-thread-icon-opacity;
                 color: gold;
             }
         }
 
         &:hover, &.o_thread_selected_message {
             .o_thread_message_side_date {
-                opacity: @mail-thread-side-date-opacity;
+                opacity: $mail-thread-side-date-opacity;
             }
             .o_thread_icon {
-                opacity: @mail-thread-icon-opacity;
+                opacity: $mail-thread-icon-opacity;
                 &:hover {
                     opacity: 1;
                 }
@@ -104,7 +99,7 @@
         }
 
         .o_thread_message_core {
-            .o-flex(1, 1, auto);
+            @include o-flex(1, 1, auto);
             min-width: 0;
             max-width: 100%;
             word-wrap: break-word;
@@ -114,7 +109,7 @@
                 text-align: justify;
             }
 
-            
+
 
             .o_mail_subject {
                 font-style: italic;
@@ -149,13 +144,13 @@
 
             .o_mail_info {
                 margin-bottom: 2px;
-                .text-muted();
+                @extend .text-muted; // FIXME was a mixin before scss convertion
                 .o_mail_mailto, .o_mail_mailto:hover {
-                    .text-muted();
+                    @extend .text-muted; // FIXME was a mixin before scss convertion
                 }
 
                 strong {
-                    color: @headings-color;
+                    color: $headings-color;
                 }
             }
 
@@ -179,7 +174,7 @@
 
             .o_attachments_list, .o_attachments_previews {
                 &:last-child {
-                    margin-bottom: @grid-gutter-width;
+                    margin-bottom: $grid-gutter-width;
                 }
             }
 
@@ -189,9 +184,9 @@
 
                 .o_thread_tooltip_content {
                     top: 10px;
-                    background: @gray-lighter;
+                    background: $gray-lighter;
                     padding: 4px;
-                    border: solid @gray-lighter 1px;
+                    border: solid $gray-lighter 1px;
                     border-radius: 5px;
                     color: gray;
                     width: 300px;
@@ -219,7 +214,7 @@
     }
 
     .o_mail_no_content {
-        .o-position-absolute(30%, 0, 0, 0);
+        @include o-position-absolute(30%, 0, 0, 0);
         text-align: center;
         font-size: 115%;
     }
@@ -231,6 +226,6 @@
 
 .o_web_client.o_touch_device {
     .o_mail_thread .o_thread_icon {
-        opacity: @mail-thread-icon-opacity;
+        opacity: $mail-thread-icon-opacity;
     }
 }
diff --git a/addons/mail/static/src/scss/variables.scss b/addons/mail/static/src/scss/variables.scss
new file mode 100644
index 00000000000..ce498f2d03e
--- /dev/null
+++ b/addons/mail/static/src/scss/variables.scss
@@ -0,0 +1,5 @@
+// FIXME moved here since scss convertion
+$mail-thread-avatar-size: 36px;
+$mail-thread-icon-opacity: 0.6;
+$mail-thread-side-date-opacity: 0.6;
+$mail-thread-note: rgba($gray-lighter-dark, 0.5);