[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

43 files changed, 1368 insertions, 1375 deletions

diff --git a/addons/web/static/src/scss/animation.scss b/addons/web/static/src/scss/animation.scss
index 6da0a1f9d64..92097a23298 100644
--- a/addons/web/static/src/scss/animation.scss
+++ b/addons/web/static/src/scss/animation.scss
@@ -146,16 +146,16 @@
 }
 
 /************** MIXINS for ANIMATIONS **************/
-.o-display-marked(@content, @top, @left, @color) {
-    .o-position-absolute(@top: @top, @left: @left);
+@mixin o-display-marked($content, $top, $left, $color) {
+    @include o-position-absolute($top: $top, $left: $left);
     font-size: 300px;
     font-family: "FontAwesome";
-    content: @content;
-    color: @color;
-    .o-transform-origin();
-    .o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
+    content: $content;
+    color: $color;
+    @include o-transform-origin;
+    @include o-animation(markAnim, 1s, ease-in-out, 0s, 1, normal, forwards);
 
-    @media (max-width: @screen-sm-max) {
+    @media (max-width: $screen-sm-max) {
         left: 40%;
         font-size: 30vw;
     }
diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 426d8cb557c..7904e6143e7 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -1,20 +1,20 @@
 // VARIABLES
-@o-base-settings-mobile-tabs-height: 40px;
-@o-base-settings-mobile-tabs-overflow-gap: 3%;
+$o-base-settings-mobile-tabs-height: 40px;
+$o-base-settings-mobile-tabs-overflow-gap: 3%;
 
 // MIXINS
-.o-base-settings-horizontal-padding(@padding-base: @padding-small-vertical) {
-    padding: @padding-base @odoo-horizontal-padding;
+@mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
+    padding: $padding-base $odoo-horizontal-padding;
 
-    @media (min-width: @screen-lg-min) {
-        padding-left: @odoo-horizontal-padding*2;;
+    @media (min-width: $screen-lg-min) {
+        padding-left: $odoo-horizontal-padding*2;;
     }
 }
 
 // Use a very specif selector to overwrite generic form-view rules
 .o_form_view.o_form_nosheet.o_base_settings {
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     padding: 0px;
 }
 
@@ -22,20 +22,20 @@
 .o_base_settings {
     height: 100%;
 
-    @media (max-width: @screen-xs-max) {
-        .o-flex-flow(column, nowrap);
+    @media (max-width: $screen-xs-max) {
+        @include o-flex-flow(column, nowrap);
     }
 
     .o_control_panel {
         .o_panel {
-            .o-flex-display();
-            .o-flex-flow(row, wrap);
-            margin-bottom: @odoo-sheet-vpadding*0.5;
+            @include o-flex-display;
+            @include o-flex-flow(row, wrap);
+            margin-bottom: $odoo-sheet-vpadding*0.5;
             width: 100%;
 
             .title, .o_setting_search {
-                .o-flex(1, 0, auto);
-                width: @screen-xs-min*0.5;
+                @include o-flex(1, 0, auto);
+                width: $screen-xs-min*0.5;
             }
 
             .o_setting_search {
@@ -45,15 +45,15 @@
                     height: 28px;
                     padding: 0px;
                     border: 0px;
-                    border-bottom: 1px solid @gray-lighter-darker;
-                    border-color: @gray;
+                    border-bottom: 1px solid $gray-lighter-darker;
+                    border-color: $gray;
                     box-shadow: none;
                     font-weight: 500;
                 }
 
                 .searchIcon {
-                    .o-position-absolute(4px, 0);
-                    color: @gray;
+                    @include o-position-absolute(4px, 0);
+                    color: $gray;
                 }
             }
         }
@@ -64,44 +64,44 @@
             border: 0;
 
             .btn-primary, .btn-link  {
-                padding: @padding-small-vertical @padding-small-horizontal;
+                padding: $padding-small-vertical $padding-small-horizontal;
             }
 
             .btn-link {
-                .o-hover-text-color(@link-color, @link-hover-color);
+                @include o-hover-text-color($link-color, $link-hover-color);
             }
         }
     }
 
     .o_setting_container {
-        .o-flex-display();
-        .o-flex(1, 1, auto);
+        @include o-flex-display;
+        @include o-flex(1, 1, auto);
 
         overflow: auto;
 
-        @media (max-width: @screen-xs-max) {
-            .o-flex-flow(column, nowrap);
+        @media (max-width: $screen-xs-max) {
+            @include o-flex-flow(column, nowrap);
         }
 
         .settings_tab {
-            .o-flex-display();
-            .o-flex(0, 0, auto);
-            .o-flex-flow(column, nowrap);
-            background: @gray-dark;
+            @include o-flex-display;
+            @include o-flex(0, 0, auto);
+            @include o-flex-flow(column, nowrap);
+            background: $gray-dark;
             overflow: auto;
-            padding-top: @odoo-horizontal-padding*0.5;
+            padding-top: $odoo-horizontal-padding*0.5;
 
-            @media (max-width: @screen-xs-max) {
-                .o-flex(0, 0, @o-base-settings-mobile-tabs-height);
-                .o-inline-flex-display();
+            @media (max-width: $screen-xs-max) {
+                @include o-flex(0, 0, $o-base-settings-mobile-tabs-height);
+                @include o-inline-flex-display;
                 position: relative;
                 overflow: hidden;
                 padding: 0;
             }
 
             .selected {
-                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;
 
                 .app_name {
                     color: white;
@@ -109,10 +109,10 @@
             }
 
             .tab {
-                .o-flex-display();
-                padding: 0 @odoo-horizontal-padding*2 0 @odoo-horizontal-padding;
+                @include o-flex-display;
+                padding: 0 $odoo-horizontal-padding*2 0 $odoo-horizontal-padding;
                 height: 40px;
-                color: @gray-lighter-darker;
+                color: $gray-lighter-darker;
                 font-size: 13px;
                 line-height: 40px;
                 cursor: pointer;
@@ -123,17 +123,17 @@
                 }
 
                 // Mobile Tabs
-                @media (max-width: @screen-xs-max) {
+                @media (max-width: $screen-xs-max) {
                     display: block;
-                    .o-position-absolute(@left:100%);
-                    .size(auto, @o-base-settings-mobile-tabs-height);
-                    padding: @o-base-settings-mobile-tabs-height*0.25 @o-base-settings-mobile-tabs-height*0.4;
+                    @include o-position-absolute($left:100%);
+                    @include size(auto, $o-base-settings-mobile-tabs-height);
+                    padding: $o-base-settings-mobile-tabs-height*0.25 $o-base-settings-mobile-tabs-height*0.4;
                     text-align: center;
                     font-size: 14px;
                     font-weight: 500;
                     line-height: inherit;
-                    .o-transition(0.2s, all);
-                    .o-transform(translate3d(0,0,0));
+                    @include o-transition(0.2s, all);
+                    @include o-transform(translate3d(0,0,0));
 
                     .app_name {
                         display: block;
@@ -142,15 +142,15 @@
 
                     &:after {
                         content: '';
-                        background: @odoo-brand-optional;
+                        background: $odoo-brand-optional;
                         opacity: 0;
-                        .o-position-absolute(auto, 0, 0, 0);
-                        .size(100%, 3px);
-                        .o-transition(0.2s, all);
+                        @include o-position-absolute(auto, 0, 0, 0);
+                        @include size(100%, 3px);
+                        @include o-transition(0.2s, all);
                     }
 
                     &.previous, &.before {
-                        left: 0% - @o-base-settings-mobile-tabs-overflow-gap;
+                        left: 0% - $o-base-settings-mobile-tabs-overflow-gap;
                     }
 
                     &.current {
@@ -167,7 +167,7 @@
                     }
 
                     &.next, &.after {
-                        left: 100% + @o-base-settings-mobile-tabs-overflow-gap;
+                        left: 100% + $o-base-settings-mobile-tabs-overflow-gap;
                     }
                 }
             }
@@ -175,15 +175,15 @@
 
         .settings {
             position: relative;
-            .o-flex(1, 1, 100%);
-            background-color: @odoo-view-background-color;
+            @include o-flex(1, 1, 100%);
+            background-color: $odoo-view-background-color;
             overflow: auto;
 
             > .app_settings_block {
                 h2 {
                     margin-bottom: 0;
-                    .o-base-settings-horizontal-padding();
-                    background-color: @gray-lighter;
+                    @include o-base-settings-horizontal-padding;
+                    background-color: $gray-lighter;
                     font-size: 15px;
                     font-weight: bold;
 
@@ -194,30 +194,30 @@
                 }
 
                 .o_settings_container {
-                    max-width: @screen-md-min; // Provide a maximum container size to ensure readability
-                    .o-base-settings-horizontal-padding(0);
+                    max-width: $screen-md-min; // Provide a maximum container size to ensure readability
+                    @include o-base-settings-horizontal-padding(0);
                 }
             }
 
             .settingSearchHeader {
-                .o-flex-display();
+                @include o-flex-display;
                 margin: 30px 0 10px;
-                .o-base-settings-horizontal-padding();
-                background-color: @gray-lighter;
+                @include o-base-settings-horizontal-padding;
+                background-color: $gray-lighter;
 
                 .icon {
-                    .square(25px);
+                    @include square(25px);
                     margin-right: 10px;
                 }
 
                 .appName {
-                    color: @headings-color;
+                    color: $headings-color;
                     font-size: 17px;
                 }
             }
 
             .notFound {
-                color : @text-muted;
+                color : $text-muted;
                 text-align: center;
                 font-size: 25px;
                 padding-top: 50px;
diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss
index 5bbe61ecdf6..9a364231415 100644
--- a/addons/web/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden.scss
@@ -3,74 +3,74 @@
 // ------------------------------------------------------------------
 
 //== Grid
-@grid-gutter-width: @odoo-horizontal-padding*2;
+$grid-gutter-width: $odoo-horizontal-padding*2;
 
 //== Colors
-@brand-primary: @odoo-brand-primary;
-@gray-lighter: @odoo-color-silver;
+$brand-primary: $odoo-brand-primary;
+$gray-lighter: $odoo-color-silver;
 
 //== Titles
-@font-size-h1: @odoo-font-size-base + 13px;
-@font-size-h2: @odoo-font-size-base + 7px;
-@font-size-h3: @odoo-font-size-base + 3px;
-@font-size-h4: @odoo-font-size-base + 2px;
-@font-size-h5: @odoo-font-size-base + 1px;
-@font-size-h6: @odoo-font-size-base;
+$font-size-h1: $odoo-font-size-base + 13px;
+$font-size-h2: $odoo-font-size-base + 7px;
+$font-size-h3: $odoo-font-size-base + 3px;
+$font-size-h4: $odoo-font-size-base + 2px;
+$font-size-h5: $odoo-font-size-base + 1px;
+$font-size-h6: $odoo-font-size-base;
 
 //== Scaffolding
-@body-bg: @odoo-brand-secondary;
-@text-color: @odoo-main-text-color;
-@link-color: @odoo-brand-optional;
-@link-hover-decoration: none;
+$body-bg: $odoo-brand-secondary;
+$text-color: $odoo-main-text-color;
+$link-color: $odoo-brand-optional;
+$link-hover-decoration: none;
 
 //== Typography
-@font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
-@font-size-base: @odoo-font-size-base;
-@headings-font-weight: bold;
+$font-family-sans-serif: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+$font-size-base: $odoo-font-size-base;
+$headings-font-weight: bold;
 
 //== Components
-@component-active-bg: @gray-lighter;
-@component-active-color: @odoo-brand-optional;
+$component-active-bg: $gray-lighter;
+$component-active-color: $odoo-brand-optional;
 
 //== Badges
-@badge-bg: @odoo-brand-optional;
-@badge-color: white;
-@badge-line-height: @line-height-base;
-@badge-font-weight: normal;
+$badge-bg: $odoo-brand-optional;
+$badge-color: white;
+$badge-line-height: $line-height-base;
+$badge-font-weight: normal;
 
 //== Breadcrumbs
-@breadcrumb-active-color: #777777;
-@breadcrumb-bg: @odoo-control-panel-background-color;
-@breadcrumb-color: #777777;
-@breadcrumb-padding-horizontal: 0;
-@breadcrumb-padding-vertical: 0;
+$breadcrumb-active-color: #777777;
+$breadcrumb-bg: $odoo-control-panel-background-color;
+$breadcrumb-color: #777777;
+$breadcrumb-padding-horizontal: 0;
+$breadcrumb-padding-vertical: 0;
 
 //== Buttons
-@btn-default-bg: white;
-@btn-default-border: #cccccc;
-@btn-default-color: @odoo-main-text-color;
-@btn-primary-bg: @odoo-brand-optional;
-@btn-primary-border: @odoo-brand-optional;
-@btn-primary-color: white;
+$btn-default-bg: white;
+$btn-default-border: #cccccc;
+$btn-default-color: $odoo-main-text-color;
+$btn-primary-bg: $odoo-brand-optional;
+$btn-primary-border: $odoo-brand-optional;
+$btn-primary-color: white;
 
 //== Dropdowns
-@dropdown-bg: white;
-@dropdown-border: @gray-lighter-dark;
-@dropdown-divider-bg: @gray-lighter-dark;
-@dropdown-link-color: @odoo-main-text-color;
-@dropdown-link-hover-color: @gray-dark;
-@dropdown-link-hover-bg: @gray-lighter;
-@dropdown-link-active-color: @component-active-color;
-@dropdown-link-active-bg: @component-active-bg;
-@dropdown-link-disabled-color: @gray-light;
-@dropdown-header-color: @gray-light;
+$dropdown-bg: white;
+$dropdown-border: $gray-lighter-dark;
+$dropdown-divider-bg: $gray-lighter-dark;
+$dropdown-link-color: $odoo-main-text-color;
+$dropdown-link-hover-color: $gray-dark;
+$dropdown-link-hover-bg: $gray-lighter;
+$dropdown-link-active-color: $component-active-color;
+$dropdown-link-active-bg: $component-active-bg;
+$dropdown-link-disabled-color: $gray-light;
+$dropdown-header-color: $gray-light;
 
 //== Modals
-@modal-sm: 300px;
-@modal-md: 650px;
-@modal-lg: 980px;
-@modal-inner-padding: @odoo-horizontal-padding;
-@modal-title-padding: @odoo-horizontal-padding;
+$modal-sm: 300px;
+$modal-md: 650px;
+$modal-lg: 980px;
+$modal-inner-padding: $odoo-horizontal-padding;
+$modal-title-padding: $odoo-horizontal-padding;
 
 // Change the z-index of the modal-backdrop elements to be equal to the
 // modal elements' ones. Bootstrap does not support multi-modals, and without
@@ -81,32 +81,32 @@
 // cannot happen in odoo though as modals are not hidden but removed from
 // the DOM and are always put at the end of the body when opened.
 //
-// Note that the variable @zindex-modal-background may be renamed/removed in
+// Note that the variable $zindex-modal-background may be renamed/removed in
 // newer versions of bootstrap.
 //
 // TODO the following code was disabled because it is saas-incompatible
 //
-// @zindex-modal-background: @zindex-modal;
+// $zindex-modal-background: $zindex-modal;
 
 //== Navs
-@nav-link-padding: 10px 15px;
-@nav-pills-border-radius: 0;
-@nav-pills-active-link-hover-color: white;
-@nav-pills-active-link-hover-bg: @odoo-brand-optional;
-@nav-tabs-active-link-hover-bg: white;
+$nav-link-padding: 10px 15px;
+$nav-pills-border-radius: 0;
+$nav-pills-active-link-hover-color: white;
+$nav-pills-active-link-hover-bg: $odoo-brand-optional;
+$nav-tabs-active-link-hover-bg: white;
 
 //== Navbar
-@navbar-height: @odoo-navbar-height - 2;
-@navbar-margin-bottom: 0;
-@navbar-inverse-bg: #222222;
-@navbar-inverse-link-color: #9d9d9d;
-@navbar-inverse-link-hover-bg: #222222;
-@navbar-inverse-toggle-hover-bg: #222222;
-@navbar-border-radius: 0;
+$navbar-height: $odoo-navbar-height - 2;
+$navbar-margin-bottom: 0;
+$navbar-inverse-bg: #222222;
+$navbar-inverse-link-color: #9d9d9d;
+$navbar-inverse-link-hover-bg: #222222;
+$navbar-inverse-toggle-hover-bg: #222222;
+$navbar-border-radius: 0;
 
 //== Tables
-@table-bg-accent: #efeff8; // FIXME: expose
-@table-bg-hover: darken(@table-bg-accent,5%);
+$table-bg-accent: #efeff8; // FIXME: expose
+$table-bg-hover: darken($table-bg-accent,5%);
 
 // ------------------------------------------------------------------
 // Bootstrap components rules (non exposed features variables)
@@ -121,9 +121,9 @@
 
 //== Buttons
 // Mixin to define variations for btn-links and muted btn-links
-.o-btn-link-variant(@color, @color-active) {
+@mixin o-btn-link-variant($color, $color-active) {
     text-transform: none;
-    .o-hover-text-color(@default-color: @color, @hover-color: @color-active);
+    @include o-hover-text-color($default-color: $color, $hover-color: $color-active);
 
     &, &:hover, &:focus, &:active, &.active {
         border-color: transparent;
@@ -131,30 +131,30 @@
     }
 
     &.text-muted, .text-muted {
-        .o-hover-opacity();
-        .o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
+        @include o-hover-opacity;
+        @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active);
     }
 }
 .btn-icon {
-  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
+  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
 }
 .btn-link {
-    font-weight: @btn-font-weight;
+    font-weight: $btn-font-weight;
 
     &.btn-default {
-        .o-btn-link-variant(@text-color, @headings-color);
+        @include o-btn-link-variant($text-color, $headings-color);
     }
     &.btn-success, &.text-success {
-        .o-btn-link-variant(@text-color, @brand-success);
+        @include o-btn-link-variant($text-color, $brand-success);
     }
     &.btn-warning, &.text-warning {
-        .o-btn-link-variant(@text-color, @brand-warning);
+        @include o-btn-link-variant($text-color, $brand-warning);
     }
     &.btn-danger, &.text-danger {
-        .o-btn-link-variant(@text-color, @brand-danger);
+        @include o-btn-link-variant($text-color, $brand-danger);
     }
     &.btn-info, &.text-info {
-        .o-btn-link-variant(@text-color, darken(@brand-info, 20%));
+        @include o-btn-link-variant($text-color, darken($brand-info, 20%));
     }
 }
 
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 325ed25b3ac..4174db62c6a 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -1,11 +1,11 @@
-@breadcrumb-height: 30px;
+$breadcrumb-height: 30px;
 
 .o_control_panel {
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
-    border-bottom: 1px solid darken(@odoo-control-panel-background-color, 20%);
-    .o-webclient-padding(@top: 10px, @bottom: 10px);
-    background-color: @odoo-control-panel-background-color;
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
+    border-bottom: 1px solid darken($odoo-control-panel-background-color, 20%);
+    @include o-webclient-padding($top: 10px, $bottom: 10px);
+    background-color: $odoo-control-panel-background-color;
 
     > .breadcrumb {
         width: 50%;
@@ -13,7 +13,7 @@
         font-size: 18px;
 
         > li {
-            .o-text-overflow(@max-width: 90%);
+            @include o-text-overflow($max-width: 90%);
 
             > a {
                 cursor: pointer;
@@ -27,7 +27,7 @@
 
     > .o_cp_searchview {
         width: 50%;
-        min-height: @breadcrumb-height;
+        min-height: $breadcrumb-height;
     }
 
     .btn.o_enable_searchview {
@@ -37,8 +37,8 @@
     }
 
     > .o_cp_left {
-        .o-flex-display();
-        .o-justify-content(space-between);
+        @include o-flex-display;
+        @include o-justify-content(space-between);
         width: 50%;
         margin-top: 5px;
 
@@ -56,10 +56,10 @@
                 }
                 .o_form_binary_form span {
                     padding: 3px 25px;
-                    color: @btn-default-color;
+                    color: $btn-default-color;
                 }
                 .o_form_binary_form:hover {
-                    background-color: @table-bg-hover;
+                    background-color: $table-bg-hover;
                 }
             }
             .o_sidebar_delete_attachment {
@@ -72,7 +72,7 @@
     }
 
     > .o_cp_right {
-        .o-flex-display();
+        @include o-flex-display;
         width: 50%;
         margin-top: 5px;
 
@@ -80,11 +80,11 @@
             margin: auto 0 auto auto;
             padding-left: 5px;
             text-align: center;
-            .user-select(none);
+            @include user-select(none);
 
             > div {
-                .o-flex-display();
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-align-items(center);
             }
 
             .o_pager_counter {
@@ -93,24 +93,24 @@
         }
 
         > .o_cp_switch_buttons > .btn:first-child {
-            margin-left: @odoo-horizontal-padding;
+            margin-left: $odoo-horizontal-padding;
         }
     }
 }
 
 .o_x2m_control_panel {
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
 
     .o_cp_buttons {
-        .o-flex-display();
+        @include o-flex-display;
         margin-right: auto;
         > div {
             margin-top: 5px;
         }
     }
     .o_cp_pager {
-        .o-flex-display();
+        @include o-flex-display;
         margin-left: auto;
     }
 }
diff --git a/addons/web/static/src/scss/data_export.scss b/addons/web/static/src/scss/data_export.scss
index 01a1da80134..3ce97ea1c8b 100644
--- a/addons/web/static/src/scss/data_export.scss
+++ b/addons/web/static/src/scss/data_export.scss
@@ -1,11 +1,11 @@
 .o_web_client .o_export {
-    .o-flex(1, 1, auto);
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex(1, 1, auto);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     min-height: 0;
 
     > p, > .row {
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
     }
 
     label {
@@ -18,8 +18,8 @@
 
         > div {
             margin-left: 5px;
-            .o-inline-flex-display();
-            .o-align-items(center);
+            @include o-inline-flex-display;
+            @include o-align-items(center);
 
             > label, > input {
                 margin: 0 0 0 5px;
@@ -28,39 +28,39 @@
     }
 
     .o_export_panel {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         position: relative;
         min-height: 0;
 
         > div {
             height: 100%;
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
-            .o-justify-content(center);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
+            @include o-justify-content(center);
 
             &.o_left_panel { // Needed because of chrome
-                .o-position-absolute(@top: 0, @bottom: 0, @left: 0, @right: 57%);
+                @include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right: 57%);
             }
             &.o_center_panel { // Needed because of chrome
-                .o-position-absolute(@top: 0, @bottom: 0, @left: 43%, @right: 43%);
+                @include o-position-absolute($top: 0, $bottom: 0, $left: 43%, $right: 43%);
             }
             &.o_right_panel { // Needed because of chrome
-                .o-position-absolute(@top: 0, @bottom: 0, @left: 57%, @right: 0);
+                @include o-position-absolute($top: 0, $bottom: 0, $left: 57%, $right: 0);
             }
 
             > h4, > div {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
 
             > button {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 margin-top: 10px;
             }
 
             .o_left_field_panel, .o_fields_list {
-                border: 1px solid @odoo-brand-lightsecondary;
+                border: 1px solid $odoo-brand-lightsecondary;
                 overflow: auto;
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 min-height: 0;
             }
 
@@ -68,21 +68,21 @@
                 cursor: pointer;
                 position: relative;
                 padding-left: 20px;
-                .user-select(none);
+                @include user-select(none);
 
                 &.o_selected > .o_tree_column {
-                    background-color: @odoo-brand-primary;
+                    background-color: $odoo-brand-primary;
                     color: white;
                 }
 
                 .o_expand_parent {
-                    .o-position-absolute(@top: 4px, @left: 5px);
+                    @include o-position-absolute($top: 4px, $left: 5px);
                 }
                 .o_tree_column {
                     display: block;
 
                     &.o_required {
-                        border-bottom: 2px solid @odoo-main-text-color;
+                        border-bottom: 2px solid $odoo-main-text-color;
                     }
                 }
 
@@ -92,16 +92,16 @@
             }
 
             .o_save_list, .o_exported_lists {
-                .o-flex-display();
-                .o-align-items(baseline);
+                @include o-flex-display;
+                @include o-align-items(baseline);
 
                 > label, > button {
                     margin: 0 0 5px;
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                 }
                 > input, > select {
                     width: 0;
-                    .o-flex(1, 0, auto);
+                    @include o-flex(1, 0, auto);
                 }
             }
         }
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index fdf3a585b57..d8650b6b409 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -1,5 +1,5 @@
-@odoo-datepicker-week-color: #8f8f8f;
-@odoo-datepicker-week-bg-color: lighten(@odoo-datepicker-week-color, 30%);
+$odoo-datepicker-week-color: #8f8f8f;
+$odoo-datepicker-week-bg-color: lighten($odoo-datepicker-week-color, 30%);
 
 .sr-only {
   position: absolute;
@@ -21,10 +21,10 @@
     }
 
     .o_datepicker_button {
-        .o-position-absolute(2px, 4px);
+        @include o-position-absolute(2px, 4px);
         pointer-events: none; // let click events go through the underlying input
         &:after {
-            .o-caret-down;
+            @include o-caret-down;
         }
     }
 }
@@ -33,26 +33,26 @@
 // The '.dropdown-menu' part is needed to override default bootstrap rule as
 // this file is unfortunately placed in common assets.
 .bootstrap-datetimepicker-widget.dropdown-menu {
-    z-index: @zindex-modal + 1;
+    z-index: $zindex-modal + 1;
 }
 
 .datepicker {
     .table-condensed {
         > thead {
             color: white;
-            background-color: @odoo-brand-primary;
+            background-color: $odoo-brand-primary;
 
             > tr {
                 &:first-child {
                     th:hover {
                         color: white;
-                        background-color: darken(@odoo-brand-primary, 10%);
+                        background-color: darken($odoo-brand-primary, 10%);
                     }
                 }
 
                 &:last-child {
-                    color: @odoo-datepicker-week-color;
-                    background-color: @odoo-datepicker-week-bg-color;
+                    color: $odoo-datepicker-week-color;
+                    background-color: $odoo-datepicker-week-bg-color;
                 }
                 > th {
                     border-radius: 0;
@@ -64,12 +64,12 @@
             > tr {
                 > td {
                     &.active, .active {
-                        background-color: @odoo-brand-optional;
+                        background-color: $odoo-brand-optional;
                         border-radius: 100px;
                     }
 
                     &.today:before {
-                        border-bottom-color: @odoo-brand-optional;
+                        border-bottom-color: $odoo-brand-optional;
                     }
                 }
             }
diff --git a/addons/web/static/src/scss/domain_selector.scss b/addons/web/static/src/scss/domain_selector.scss
index 70d4c0bd0c8..1fde477164d 100644
--- a/addons/web/static/src/scss/domain_selector.scss
+++ b/addons/web/static/src/scss/domain_selector.scss
@@ -1,28 +1,28 @@
 
 .o_domain_node {
-    @o-domain-selector-indent: 32px;
-    @o-domain-selector-panel-space: 60px;
-    @o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows
-    @o-domain-animation-bar-height: 15px;
+    $o-domain-selector-indent: 32px;
+    $o-domain-selector-panel-space: 60px;
+    $o-domain-selector-row-height: 35px; // should be greater than a "normal" row so that "header" parts are the same size of rows
+    $o-domain-animation-bar-height: 15px;
 
     position: relative;
 
     // Rows in a domain node (selector) have a minimum height and holds the control panel
     .o_domain_selector_row {
-        .o-flex-display();
-        .o-align-items(center);
-        min-height: @o-domain-selector-row-height;
+        @include o-flex-display;
+        @include o-align-items(center);
+        min-height: $o-domain-selector-row-height;
 
         > * {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
 
         > .o_domain_node_control_panel {
-            .o-position-absolute(@top: 0, @bottom: 0, @right: -@o-domain-selector-panel-space);
+            @include o-position-absolute($top: 0, $bottom: 0, $right: -$o-domain-selector-panel-space);
 
             > button {
                 float: left;
-                width: @o-domain-selector-panel-space/2;
+                width: $o-domain-selector-panel-space/2;
                 height: 100%;
                 padding: 0;
                 background-color: transparent;
@@ -35,7 +35,7 @@
                     padding-left: 5px;
 
                     &:hover {
-                        color: @brand-danger;
+                        color: $brand-danger;
                     }
                 }
             }
@@ -48,12 +48,12 @@
             position: relative;
 
             .o_domain_tree_operator_caret::after {
-                .o-caret-down();
+                @include o-caret-down;
             }
         }
 
         > .o_domain_node_children_container {
-            padding-left: @o-domain-selector-indent;
+            padding-left: $o-domain-selector-indent;
         }
 
         // Rules specific to domain root
@@ -67,15 +67,15 @@
             }
 
             &.o_edit_mode > .o_domain_node_children_container {
-                padding-right: @o-domain-selector-panel-space; // delete button is over the row
+                padding-right: $o-domain-selector-panel-space; // delete button is over the row
             }
 
             > .o_domain_debug_container {
                 display: block;
                 margin-top: 16px;
                 padding: 8px 10px 12px;
-                background: @gray-dark;
-                color: fade(white, 50%);
+                background: $gray-dark;
+                color: rgba(white, 0.5);
                 font-family: monospace;
                 font-weight: normal;
 
@@ -92,13 +92,13 @@
     // Rules specific to domain parts which do not contain sub-domain parts
     &.o_domain_leaf {
         &.o_read_mode {
-            .o-inline-flex-display();
+            @include o-inline-flex-display;
             margin-right: 4px;
         }
 
         > .o_domain_leaf_info {
-            background: @odoo-brand-lightsecondary;
-            border: 1px solid darken(@odoo-brand-lightsecondary, 10%);
+            background: $odoo-brand-lightsecondary;
+            border: 1px solid darken($odoo-brand-lightsecondary, 10%);
             padding: 2px 4px;
 
             > .o_field_selector {
@@ -119,21 +119,21 @@
         }
 
         > .o_domain_leaf_edition {
-            .o-flex-display();
+            @include o-flex-display;
             width: 100%;
-            padding: 4px (@o-domain-selector-panel-space/2) 4px 0;
+            padding: 4px ($o-domain-selector-panel-space/2) 4px 0;
 
             > * {
-                .o-flex(1, 1, 15%); // operator select
+                @include o-flex(1, 1, 15%); // operator select
                 width: auto;
                 background-color: white;
 
                 &:first-child { // field selector
-                    .o-flex(0, 1, 55%);
+                    @include o-flex(0, 1, 55%);
                 }
 
                 &:last-child { // field value
-                    .o-flex(1, 1, 25%);
+                    @include o-flex(1, 1, 25%);
                 }
 
                 + * {
@@ -146,13 +146,13 @@
             }
 
             .o_domain_leaf_value_tags {
-                .o-flex-display();
+                @include o-flex-display;
 
                 > * {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                 }
                 > input {
-                    .o-flex(1, 1, auto);
+                    @include o-flex(1, 1, auto);
                     width: 0;
                     min-width: 50px;
                 }
@@ -164,16 +164,16 @@
     }
 
     // Animation effects
-    .o-transition(margin-bottom, .05s, ease, .05s);
+    @include o-transition(margin-bottom, .05s, ease, .05s);
 
     &::after {
         content: "";
-        .o-position-absolute(@left: 0, @right: 0, @top: 100%);
+        @include o-position-absolute($left: 0, $right: 0, $top: 100%);
         display: block;
-        height: @o-domain-animation-bar-height;
+        height: $o-domain-animation-bar-height;
         max-height: 0;
-        .o-linear-gradient(45deg, fade(@odoo-brand-optional, 40%), fade(@odoo-brand-optional, 10%));
-        .o-transition(max-height, .05s, ease, .05s);
+        @include o-linear-gradient(45deg, rgba($odoo-brand-optional, 0.4), rgba($odoo-brand-optional, 0.1));
+        @include o-transition(max-height, .05s, ease, .05s);
     }
 
     &.o_hover_btns, &.o_hover_add_node {
@@ -190,15 +190,15 @@
     }
 
     &.o_hover_add_node {
-        margin-bottom: @o-domain-animation-bar-height;
-        .o-transition(margin, .15s, ease, .5s);
+        margin-bottom: $o-domain-animation-bar-height;
+        @include o-transition(margin, .15s, ease, .5s);
 
         &::after {
-            max-height: @o-domain-animation-bar-height;
-            .o-transition(max-height, .15s, ease, .5s);
+            max-height: $o-domain-animation-bar-height;
+            @include o-transition(max-height, .15s, ease, .5s);
         }
         &.o_hover_add_inset_node::after {
-            left: @o-domain-selector-indent;
+            left: $o-domain-selector-indent;
         }
     }
 }
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 6501b4cc52c..ed979ae3a00 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -1,12 +1,12 @@
-.li-a-padding {
-    padding: 3px @odoo-dropdown-hpadding;
+%dropdown-li-a-padding {
+    padding: 3px $odoo-dropdown-hpadding;
 }
 
 .ui-autocomplete { // Copy style of bootstrap dropdown
     background-image: none;
-    background-color: @dropdown-bg;
-    border: 1px solid @dropdown-border;
-    font-size: @font-size-base;
+    background-color: $dropdown-bg;
+    border: 1px solid $dropdown-border;
+    font-size: $font-size-base;
     padding: 5px 0px;
     box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
 
@@ -14,14 +14,14 @@
         padding: 0;
         > a {
             display: block;
-            color: @dropdown-link-color;
+            color: $dropdown-link-color;
 
-            .li-a-padding
+            @extend %dropdown-li-a-padding;
         }
 
         &.ui-state-focus {
             background-image: none;
-            background-color: @odoo-brand-primary;
+            background-color: $odoo-brand-primary;
             border: none;
             font-weight: normal;
             margin: 0;
@@ -29,14 +29,14 @@
         &.o_m2o_dropdown_option {
             padding-left: 20px;
             > a {
-                color: @odoo-brand-primary;
+                color: $odoo-brand-primary;
             }
         }
     }
 }
 
 .dropdown-menu {
-    box-shadow: 0 6px 12px -4px fade(black, 25%);
+    box-shadow: 0 6px 12px -4px rgba(black, 0.25);
 
     .o_inline_dropdown {
         position: relative;
@@ -51,7 +51,7 @@
     }
 }
 
-.dropdown-menu-mixin {
+@mixin dropdown-menu-mixin {
     .open .dropdown-menu > li {
         position: relative; // to allow absolute positionning inside the li
         > a {
@@ -59,14 +59,14 @@
                 outline: none;
             }
 
-            .li-a-padding;
+            @extend %dropdown-li-a-padding;
         }
 
         &.dropdown-header {
-            .li-a-padding;
-            color: @odoo-main-text-color;
+            @extend %dropdown-li-a-padding;
+            color: $odoo-main-text-color;
 
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 color: white;
                 text-decoration: underline;
             }
@@ -74,7 +74,7 @@
     }
 }
 
-.dropdown-menu-mixin();
+@include dropdown-menu-mixin;
 .navbar-nav {
-    .dropdown-menu-mixin();
+    @include dropdown-menu-mixin;
 }
diff --git a/addons/web/static/src/scss/dropdown_extra.scss b/addons/web/static/src/scss/dropdown_extra.scss
index ec38e6d5292..f925c4f6190 100644
--- a/addons/web/static/src/scss/dropdown_extra.scss
+++ b/addons/web/static/src/scss/dropdown_extra.scss
@@ -1,9 +1,9 @@
 .ui-autocomplete .ui-menu-item {
     &.ui-state-focus {
-        background-color: @odoo-brand-primary;
+        background-color: $odoo-brand-primary;
     }
     &.o_m2o_dropdown_option > a {
-        color: @odoo-brand-primary;
+        color: $odoo-brand-primary;
     }
     &.ui-state-focus > a,
     &.ui-state-focus.o_m2o_dropdown_option > a {
@@ -11,7 +11,7 @@
     }
 }
 
-@tag-border: #afafb6;
+$tag-border: #afafb6;
 .oe_dropdown, .oe_dropdown_toggle {
     position: relative;
     cursor: pointer;
@@ -25,7 +25,7 @@
     position: absolute;
     z-index: 3;
     margin: 0;
-    border: 1px solid @tag-border;
+    border: 1px solid $tag-border;
     background: white;
     padding: 4px 0;
     min-width: 140px;
@@ -42,7 +42,7 @@
         margin: 0;
         padding: 2px 8px;
         &:hover {
-            .o-vertical-gradient(#f0f0fa, #eeeef6);
+            @include o-vertical-gradient(#f0f0fa, #eeeef6);
             box-shadow: none;
         }
         > a {
@@ -59,5 +59,5 @@
 
 // Buttons used as dropdown toggler
 .o_dropdown_toggler_btn {
-    .btn-default;
+    @extend .btn-default; // FIXME was a mixin before scss convertion
 }
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index ff6fe9eb20b..f28e3ba349c 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -6,8 +6,8 @@
 // Invalid
 .o_field_invalid {
     &.o_input, .o_input, &.o_form_label {
-        color: @brand-danger!important;
-        border-color: @brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
+        color: $brand-danger!important;
+        border-color: $brand-danger!important; // enterprise o_required_modifier rule overrides this without !important
     }
 }
 
@@ -39,17 +39,17 @@
 
     // Flex fields (inline)
     &.o_field_many2one, &.o_field_radio, &.o_field_many2manytags, &.o_field_percent_pie, &.o_field_monetary, &.o_field_binary_file {
-        @media (min-width: @screen-sm-min) {
-            .o-inline-flex-display();
+        @media (min-width: $screen-sm-min) {
+            @include o-inline-flex-display;
         }
         > span, > button {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
     }
 
     // Dropdowns input (many2one, ...)
     .o_input_dropdown {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         position: relative;
         width: 100%;
 
@@ -60,10 +60,10 @@
         }
 
         .o_dropdown_button {
-            .o-position-absolute(0, 0);
+            @include o-position-absolute(0, 0);
             pointer-events: none;
             &:after {
-                .o-caret-down;
+                @include o-caret-down;
             }
         }
     }
@@ -77,51 +77,51 @@
     // Monetary
     &.o_field_monetary {
         &.o_input {
-            .o-align-items(baseline);
+            @include o-align-items(baseline);
 
             > input {
                 width: 100px;
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
             }
         }
     }
 
     // Many2many tags
     &.o_field_many2manytags {
-        .o-flex-flow(row, wrap);
-        .o-align-items(baseline);
+        @include o-flex-flow(row, wrap);
+        @include o-align-items(baseline);
 
         > .o_field_widget {
-            .o-flex(1, 0, 100px);
+            @include o-flex(1, 0, 100px);
             position: initial;
             max-width: 100%;
         }
 
         > .badge {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
             border: 0;
             font-size: 12px;
             color: white;
             cursor: pointer;
 
             > .o_badge_text {
-                .o-text-overflow(inline-block);
+                @include o-text-overflow(inline-block);
                 max-width: 200px;
             }
 
             // o-kanban-colorpicker without customizing
             // '&:first-child > a::before' (transparent red-crossed colorpick)
-            .o-tag-colorpicker() {
-                @o-tag-colorpicker-padding-right: @odoo-dropdown-hpadding - 2 * @o-kanban-inner-hmargin;
+            @mixin o-tag-colorpicker {
+                $o-tag-colorpicker-padding-right: $odoo-dropdown-hpadding - 2 * 5px; // FIXME was $o-kanban-inner-hmargin before scss convertion
 
                 max-width: 100%;
-                padding: 3px @o-tag-colorpicker-padding-right 3px @odoo-dropdown-hpadding;
+                padding: 3px $o-tag-colorpicker-padding-right 3px $odoo-dropdown-hpadding;
 
                 > li {
                     display: inline-block;
-                    margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
+                    margin: 5px 5px 0 0; // FIXME was $o-kanban-inner-hmargin before scss convertion
                     border: 1px solid white;
-                    box-shadow: 0 0 0 1px @gray-lighter-dark;
+                    box-shadow: 0 0 0 1px $gray-lighter-dark;
 
                     > a {
                         display: block;
@@ -136,7 +136,7 @@
 
                     &:last-of-type {
                         box-shadow: 0 0 0 0px white; // remove grey border on hide in kanban
-                        color: @odoo-main-text-color;
+                        color: $odoo-main-text-color;
                     }
                 }
             }
@@ -147,7 +147,7 @@
             }
 
             > .o_colorpicker > ul {
-                .o-tag-colorpicker();
+                @include o-tag-colorpicker;
                 white-space: normal;
             }
 
@@ -156,28 +156,24 @@
             }
         }
 
-        .o-tag-color(@size: 0) when (@size = 0) {
-            .o_tag_color_@{size} {
-                & {
-                    background-color: white;
-                    color: ~"@{odoo-color-@{size}}";
-                    box-shadow: inset 0 0 0 2px ~"@{odoo-color-@{size}}";
-                }
-                &::after {
-                    background-color: ~"@{odoo-color-@{size}}";
-                }
-            }
-            .o-tag-color(@size + 1);
-        }
-        .o-tag-color(@size: 0) when (@size > 0) and (@size < @odoo-nb-ui-color) {
-            .o_tag_color_@{size} {
-                &, &::after {
-                    background-color: ~"@{odoo-color-@{size}}";
+        @for $size from 1 through $odoo-nb-ui-color {
+            .o_tag_color_#{$size - 1} {
+                @if $size == 1 {
+                    & {
+                        background-color: white;
+                        color: nth($odoo-colors, $size);
+                        box-shadow: inset 0 0 0 2px nth($odoo-colors, $size);
+                    }
+                    &::after {
+                        background-color: nth($odoo-colors, $size);
+                    }
+                } @else {
+                    &, &::after {
+                        background-color: nth($odoo-colors, $size);
+                    }
                 }
             }
-            .o-tag-color(@size + 1);
         }
-        .o-tag-color();
     }
 
     // Stars
@@ -199,7 +195,7 @@
             }
 
             &.fa-star-o {
-                color: @odoo-main-color-muted;
+                color: $odoo-main-color-muted;
             }
             &.fa-star {
                 color: gold;
@@ -213,7 +209,7 @@
             font-size: 16px;
         }
         i.fa-star-o {
-            color: @odoo-main-color-muted;
+            color: $odoo-main-color-muted;
             &:hover {
                 color: gold;
             }
@@ -225,7 +221,7 @@
 
     // Specific success color for toggle_button widget
     .fa.o_toggle_button_success {
-        color: @brand-success;
+        color: $brand-success;
     }
 
     // Handle widget
@@ -240,13 +236,13 @@
         }
 
         .o_radio_item {
-            .o-flex(0, 0, auto);
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-align-items(center);
 
             > input {
-                .o-flex(0, 0, auto);
-                margin: 0 @odoo-form-spacing-unit 0 0;
+                @include o-flex(0, 0, auto);
+                margin: 0 $odoo-form-spacing-unit 0 0;
             }
             > label {
                 margin: 0;
@@ -255,21 +251,21 @@
 
         &.o_horizontal {
             .o_radio_item {
-                margin-right: @odoo-form-spacing-unit * 2;
+                margin-right: $odoo-form-spacing-unit * 2;
             }
         }
 
         &.o_vertical {
-            .o-flex-flow(column, nowrap);
+            @include o-flex-flow(column, nowrap);
             .o_radio_item {
-                margin-bottom: @odoo-form-spacing-unit;
+                margin-bottom: $odoo-form-spacing-unit;
             }
         }
     }
 
     // Percent pie
     &.o_field_percent_pie {
-        .o-align-items(center);
+        @include o-align-items(center);
 
         > .o_pie {
             position: relative;
@@ -278,36 +274,36 @@
             margin-right: 10px;
             border-radius: 100%;
             overflow: hidden;
-            background-color: @odoo-brand-optional;
+            background-color: $odoo-brand-optional;
 
             &:after { // Outside pie border to go over border-radius irregularities
                 content: " ";
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 width: 100%;
                 height: 100%;
                 border-radius: 100%;
             }
 
             .o_mask {
-                .o-position-absolute(0, 0);
-                .o-transform-origin(0);
+                @include o-position-absolute(0, 0);
+                @include o-transform-origin(0);
                 width: 50%;
                 height: 100%;
-                background-color: @odoo-view-background-color;
+                background-color: $odoo-view-background-color;
                 &.o_full {
                     background-color: inherit;
                 }
             }
 
             .o_pie_value {
-                .o-flex-display();
-                .o-justify-content(center);
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-justify-content(center);
+                @include o-align-items(center);
 
                 border-radius: 100%;
 
                 font-weight: 700;
-                color: @odoo-brand-primary;
+                color: $odoo-brand-primary;
             }
         }
     }
@@ -326,11 +322,11 @@
         position: relative;
 
         .o_form_image_controls {
-            .o-position-absolute(0, 0);
+            @include o-position-absolute(0, 0);
             width: 100%;
 
             color: white;
-            background-color: @odoo-brand-optional;
+            background-color: $odoo-brand-optional;
             opacity: 0;
             transition: opacity ease 400ms;
 
@@ -339,7 +335,7 @@
                 cursor: pointer;
             }
         }
-        @media (max-width: @screen-xs-min) {
+        @media (max-width: $screen-xs-min) {
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
@@ -349,10 +345,10 @@
                     margin: 0px;
                     text-align: center;
                     &.o_select_file_button{
-                        background: @odoo-brand-optional;
+                        background: $odoo-brand-optional;
                     }
                     &.o_clear_file_button{
-                        background: @brand-danger;
+                        background: $brand-danger;
                     }
                 }
             }
@@ -377,7 +373,7 @@
             position: relative;
 
             > .o_field_domain_panel {
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 margin-top: 0;
             }
         }
diff --git a/addons/web/static/src/scss/fields_extra.scss b/addons/web/static/src/scss/fields_extra.scss
index 577cfacacb4..dd441c07710 100644
--- a/addons/web/static/src/scss/fields_extra.scss
+++ b/addons/web/static/src/scss/fields_extra.scss
@@ -17,7 +17,7 @@
 .o_field_widget {
     // Dropdowns input carret
     .o_input_dropdown .o_dropdown_button {
-        .o-position-absolute(2px, 4px);
+        @include o-position-absolute(2px, 4px);
     }
 
     // Many2one
@@ -34,22 +34,22 @@
 
     // Percent pie field
     &.o_field_percent_pie {
-        @pie-dimension: 34px;
-        @pie-ring-width: 4px;
+        $pie-dimension: 34px;
+        $pie-ring-width: 4px;
 
         .o_pie {
-            width: @pie-dimension;
-            height: @pie-dimension;
+            width: $pie-dimension;
+            height: $pie-dimension;
             margin-left: 5px;
 
             &:after { // Outside pie border to go over border-radius irregularities
-                border: 1px solid @odoo-brand-primary;
+                border: 1px solid $odoo-brand-primary;
             }
 
             .o_pie_value {
-                .o-position-absolute(@pie-ring-width, @pie-ring-width);
-                width: @pie-dimension - 2 * @pie-ring-width;
-                height: @pie-dimension - 2 * @pie-ring-width;
+                @include o-position-absolute($pie-ring-width, $pie-ring-width);
+                width: $pie-dimension - 2 * $pie-ring-width;
+                height: $pie-dimension - 2 * $pie-ring-width;
                 border: 1px solid white;
                 background-color: white;
                 font-size: 10px;
diff --git a/addons/web/static/src/scss/fonts.scss b/addons/web/static/src/scss/fonts.scss
index c6b19a2ba2f..bfabf4fe6fc 100644
--- a/addons/web/static/src/scss/fonts.scss
+++ b/addons/web/static/src/scss/fonts.scss
@@ -1,37 +1,37 @@
 // ------------------------------------------------------------------
 // Lato
 // ------------------------------------------------------------------
-@lato-font-path: '../fonts/lato';
+$lato-font-path: '../fonts/lato';
 
-.lato-font(@type, @weight, @style) {
+@mixin lato-font($type, $weight, $style) {
     @font-face {
         font-family: 'Lato';
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot');
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.svg#Lato') format('svg');
-        font-weight: @weight;
-        font-style: @style;
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Lato') format('svg');
+        font-weight: $weight;
+        font-style: $style;
     }
 
     @font-face {
-        font-family: 'Lato-@{type}';
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot');
-        src: url('@{lato-font-path}/Lato-@{type}-webfont.eot?#iefix') format('embedded-opentype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.woff') format('woff'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.ttf') format('truetype'),
-             url('@{lato-font-path}/Lato-@{type}-webfont.svg#Roboto') format('svg');
+        font-family: 'Lato-#{$type}';
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot');
+        src: url('#{$lato-font-path}/Lato-#{$type}-webfont.eot?#iefix') format('embedded-opentype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.woff') format('woff'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.ttf') format('truetype'),
+             url('#{$lato-font-path}/Lato-#{$type}-webfont.svg#Roboto') format('svg');
     }
 }
 
-.lato-font-pair(@type, @weight) {
-    .lato-font('@{type}', @weight, normal);
-    .lato-font('@{type}Ita', @weight, italic);
+@mixin lato-font-pair($type, $weight) {
+    @include lato-font('#{$type}', $weight, normal);
+    @include lato-font('#{$type}Ita', $weight, italic);
 }
 
-.lato-font-pair('Hai', 100);
-.lato-font-pair('Lig', 300);
-.lato-font-pair('Reg', 400);
-.lato-font-pair('Bol', 700);
-.lato-font-pair('Bla', 900);
+@include lato-font-pair('Hai', 100);
+@include lato-font-pair('Lig', 300);
+@include lato-font-pair('Reg', 400);
+@include lato-font-pair('Bol', 700);
+@include lato-font-pair('Bla', 900);
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 1e477aac02d..3698ee07e74 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -1,10 +1,10 @@
 .o_form_view {
-    background-color: @odoo-view-background-color;
+    background-color: $odoo-view-background-color;
 
     // Utility classes
     .oe_form_box_info {
-        .bg-info;
-        .o-webclient-padding(@top: 5px, @bottom: 5px);
+        @extend .bg-info; // FIXME was a mixin before scss convertion
+        @include o-webclient-padding($top: 5px, $bottom: 5px);
         > p {
             margin: auto;
         }
@@ -17,37 +17,37 @@
     }
     .oe_inline {
         width: auto!important;
-        @media (min-width: @screen-xs-min) {
+        @media (min-width: $screen-xs-min) {
             &.o_inner_group {
                 width: 1px!important;
             }
         }
     }
     .oe_left {
-        .oe_inline;
+        @extend .oe_inline; // FIXME was a mixin before scss convertion
         float: left!important;
     }
     .oe_right {
-        .oe_inline;
+        @extend .oe_inline; // FIXME was a mixin before scss convertion
         float: right!important;
     }
 
-    @media (min-width: @screen-xs-min) {
+    @media (min-width: $screen-xs-min) {
         .o_row {
             &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
-                .o-flex-display();
+                @include o-flex-display;
                 width: auto!important;
             }
 
-            .o-align-items(baseline);
+            @include o-align-items(baseline);
             min-width: 50px;
-            margin: 0 -@odoo-form-spacing-unit/2;
+            margin: 0 -$odoo-form-spacing-unit/2;
 
             > div, > span, > button, > label, > a, > input { // > * did not add a level of priority to the rule
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 width: auto!important;
-                margin-right: @odoo-form-spacing-unit/2;
-                margin-left: @odoo-form-spacing-unit/2;
+                margin-right: $odoo-form-spacing-unit/2;
+                margin-left: $odoo-form-spacing-unit/2;
             }
 
             > .o_row {
@@ -58,7 +58,7 @@
                 padding-bottom: 0;
             }
             > .o_field_boolean {
-                .o-align-self(center);
+                @include o-align-self(center);
             }
         }
     }
@@ -82,14 +82,14 @@
     .o_form_uri {
         display: inline-block;
 
-        color: @odoo-main-text-color;
+        color: $odoo-main-text-color;
         &:first-line {
-            color: @link-color;
+            color: $link-color;
         }
         &:hover {
-            color: darken(@odoo-main-text-color, 1%); // hack required on chrome
+            color: darken($odoo-main-text-color, 1%); // hack required on chrome
             &:first-line {
-                color: darken(@link-color, 15%);
+                color: darken($link-color, 15%);
             }
         }
     }
@@ -101,17 +101,17 @@
         }
 
         .oe_title {
-            max-width: @container-sm - (2 * @odoo-horizontal-padding);
+            max-width: $container-sm - (2 * $odoo-horizontal-padding);
         }
 
-        @media (min-width: @screen-xs-min) {
+        @media (min-width: $screen-xs-min) {
             .o_row {
                 > .o_field_widget, > div {
-                    .o-flex(1, 1, auto);
+                    @include o-flex(1, 1, auto);
                     width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0)
 
                     &.o_field_boolean, &.o_priority {
-                        .o-flex(0, 0, auto);
+                        @include o-flex(0, 0, auto);
                         width: auto!important;
                     }
                 }
@@ -122,10 +122,10 @@
     // No sheet
     &.o_form_nosheet {
         display: block;
-        .o-webclient-padding(@top: @odoo-sheet-vpadding, @bottom: @odoo-sheet-vpadding);
+        @include o-webclient-padding($top: $odoo-sheet-vpadding, $bottom: $odoo-sheet-vpadding);
 
         .o_form_statusbar {
-            margin: -@odoo-sheet-vpadding -@odoo-horizontal-padding @odoo-sheet-vpadding -@odoo-horizontal-padding;
+            margin: -$odoo-sheet-vpadding -$odoo-horizontal-padding $odoo-sheet-vpadding -$odoo-horizontal-padding;
         }
     }
 
@@ -134,37 +134,37 @@
         position: relative;
 
         > .o_form_sheet {
-            margin: @odoo-sheet-vpadding auto;
+            margin: $odoo-sheet-vpadding auto;
         }
     }
 
     // Statusbar
     .o_form_statusbar {
         position: relative; // Needed for the "More" dropdown
-        .o-flex-display();
-        .o-justify-content(space-between);
-        padding-left: @odoo-horizontal-padding;
-        border-bottom: 1px solid @gray-lighter-darker;
-        background-color: @odoo-view-background-color;
+        @include o-flex-display;
+        @include o-justify-content(space-between);
+        padding-left: $odoo-horizontal-padding;
+        border-bottom: 1px solid $gray-lighter-darker;
+        background-color: $odoo-view-background-color;
 
         > .o_statusbar_buttons, > .o_statusbar_status {
-            .o-flex-display();
-            .o-align-items(center);
-            .o-align-content(space-around);
+            @include o-flex-display;
+            @include o-align-items(center);
+            @include o-align-content(space-around);
         }
 
         > .o_field_widget {
-            .o-align-self(center);
+            @include o-align-self(center);
             margin-bottom: 0px;
         }
 
         > .o_statusbar_buttons {
-            .o-flex-flow(row, wrap);
+            @include o-flex-flow(row, wrap);
 
             > .btn {
-                @o-statusbar-buttons-vmargin: 4px;
-                min-height: @odoo-statusbar-height - 2 * @o-statusbar-buttons-vmargin;
-                margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0;
+                $o-statusbar-buttons-vmargin: 4px;
+                min-height: $odoo-statusbar-height - 2 * $o-statusbar-buttons-vmargin;
+                margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0;
                 padding-top: 2px;
                 padding-bottom: 2px;
             }
@@ -172,28 +172,28 @@
 
         > .o_statusbar_status {
             margin-left: auto;
-            .o-flex-flow(row-reverse, wrap-reverse);
-            .o-align-self(stretch);
-            .o-align-items(stretch);
+            @include o-flex-flow(row-reverse, wrap-reverse);
+            @include o-align-self(stretch);
+            @include o-align-items(stretch);
             overflow-x: hidden; // to prevent horizontal scroll due to last arrow
 
             > .o_arrow_button {
-                min-height: @odoo-statusbar-height;
+                min-height: $odoo-statusbar-height;
                 font-size: 11px;
                 font-weight: bold;
                 position: relative;
-                padding-left: @odoo-statusbar-arrow-width*2;
-                color: @gray;
+                padding-left: $odoo-statusbar-arrow-width*2;
+                color: $gray;
                 border-width: 0 0 0;
                 border-radius: 0;
-                .o-transition(all, 0.1s);
+                @include o-transition(all, 0.1s);
 
                 &:first-child {
-                    padding-right: @odoo-horizontal-padding; // Compensate container padding
+                    padding-right: $odoo-horizontal-padding; // Compensate container padding
                 }
                 &:last-child {
-                    padding-left: @odoo-horizontal-padding - 1;
-                    border-left: 1px solid @gray-lighter-darker;
+                    padding-left: $odoo-horizontal-padding - 1;
+                    border-left: 1px solid $gray-lighter-darker;
                 }
 
                 &:active {
@@ -202,48 +202,48 @@
 
                 &.disabled {
                     opacity: 1.0;
-                    color: @text-muted;
+                    color: $text-muted;
                     pointer-events: none;
-                    border-left: 1px solid @gray-lighter-dark;
+                    border-left: 1px solid $gray-lighter-dark;
                 }
 
                 &:before, &:after {
                     content: " ";
                     display: block;
-                    .o-position-absolute(0, -@odoo-statusbar-arrow-width + 1);
+                    @include o-position-absolute(0, -$odoo-statusbar-arrow-width + 1);
 
-                    border-top: floor(@odoo-statusbar-height/2) solid transparent;
-                    border-bottom: ceil(@odoo-statusbar-height/2) solid transparent;
+                    border-top: floor($odoo-statusbar-height/2) solid transparent;
+                    border-bottom: ceil($odoo-statusbar-height/2) solid transparent;
                     border-right: none;
-                    border-left: @odoo-statusbar-arrow-width solid @odoo-view-background-color;
-                    .o-transition(border, 0.2s);
+                    border-left: $odoo-statusbar-arrow-width solid $odoo-view-background-color;
+                    @include o-transition(border, 0.2s);
                     -moz-transform: scale(0.9999); // Smooth the triangle on firefox
                 }
 
                 &:not(.disabled) {
                     &:hover, &:active, &:focus {
-                        color: @odoo-brand-optional;
-                        background-color: @gray-lighter;
+                        color: $odoo-brand-optional;
+                        background-color: $gray-lighter;
 
                         &:after {
-                            border-left-color: @gray-lighter;
+                            border-left-color: $gray-lighter;
                         }
                     }
                 }
 
                 &:before {
-                    right: -@odoo-statusbar-arrow-width;
-                    border-left-color: @gray-lighter-dark;
+                    right: -$odoo-statusbar-arrow-width;
+                    border-left-color: $gray-lighter-dark;
                 }
 
                 &.btn-primary.disabled {
-                    color: @odoo-brand-primary;
+                    color: $odoo-brand-primary;
                     font-size: 11px;
-                    background-color: @gray-lighter;
+                    background-color: $gray-lighter;
                     cursor: default;
 
                     &:after {
-                        border-left-color: @gray-lighter;
+                        border-left-color: $gray-lighter;
                     }
                 }
 
@@ -253,7 +253,7 @@
             }
 
             .o-status-more {
-                .o-position-absolute(100%, 0);
+                @include o-position-absolute(100%, 0);
                 min-width: 100px;
                 > li > button {
                     width: 100%;
@@ -266,8 +266,8 @@
         > .o_statusbar_buttons > .btn-group, > .o_statusbar_status {
             > .dropdown-toggle {
                 &:after {
-                    .o-caret-down();
-                    margin-left: @odoo-form-spacing-unit;
+                    @include o-caret-down;
+                    margin-left: $odoo-form-spacing-unit;
                 }
             }
 
@@ -315,14 +315,12 @@
         margin: 10px 0;
 
         // o_group contains nested groups
-        .o-generate-groups(@odoo-form-group-cols);
-        .o-generate-groups(@n, @i: 1) when (@i =< @n) {
-            .o_group_col_@{i} {
+        @for $i from 1 through $odoo-form-group-cols {
+            .o_group_col_#{$i} {
                 display: inline-block;
-                width: floor(100% / 12 * @i);
+                width: floor(100% / 12 * $i);
                 vertical-align: top;
             }
-            .o-generate-groups(@n, @i + 1);
         }
 
         &.o_inner_group {
@@ -352,7 +350,7 @@
             width: 100%;
 
             > .btn {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 padding: 0 10px;
             }
         }
@@ -364,7 +362,7 @@
             // Makes extra buttons (e.g. m2o external button) overflow on the
             // right padding of the parent element
             .o_input_dropdown {
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
             }
         }
 
@@ -380,17 +378,17 @@
 
     // Separators
     .o_horizontal_separator {
-        font-size: @font-size-h2;
-        margin: @odoo-form-spacing-unit 0;
+        font-size: $font-size-h2;
+        margin: $odoo-form-spacing-unit 0;
         &:empty {
-            height: @odoo-form-spacing-unit * 2;
+            height: $odoo-form-spacing-unit * 2;
         }
     }
 
     // Notebooks
     .o_notebook {
         clear: both; // For the notebook not to have alongside floating elements
-        margin-top: @odoo-form-spacing-unit * 2;
+        margin-top: $odoo-form-spacing-unit * 2;
 
         .nav-tabs > .tab-pane {
             min-height: 100px;
@@ -399,14 +397,14 @@
 
     // Labels
     .o_form_label {
-        margin: 0 @odoo-form-spacing-unit 0 0;
-        font-size: @font-size-base; // The label muse have the same size whatever their position
-        line-height: @line-height-base;
+        margin: 0 $odoo-form-spacing-unit 0 0;
+        font-size: $font-size-base; // The label muse have the same size whatever their position
+        line-height: $line-height-base;
     }
 
     // Form fields
     .o_field_widget {
-        margin-bottom: @odoo-form-spacing-unit;
+        margin-bottom: $odoo-form-spacing-unit;
     }
     .o_field_widget, .btn {
         .o_field_widget {
@@ -428,7 +426,7 @@
     // Text field with oe_inline class
     .o_field_text.oe_inline {
         width: 100%!important;
-        @media (min-width: @screen-xs-min) {
+        @media (min-width: $screen-xs-min) {
             width: 45%!important;
         }
     }
@@ -445,7 +443,7 @@
 
     // Specific style classes
     .o_group.o_inner_group.oe_subtotal_footer {
-        .oe_right;
+        @extend .oe_right; // FIXME was a mixin after scss convertion
 
         > tbody > tr > td {
             padding: 0;
@@ -466,7 +464,7 @@
 
             .o_field_widget {
                 text-align: right;
-                .o-justify-content(flex-end);
+                @include o-justify-content(flex-end);
                 width: 100%;
             }
         }
@@ -478,7 +476,7 @@
         .oe_subtotal_footer_separator {
             width: 100%;
             text-align: right;
-            border-top: 1px solid @gray-lighter-dark;
+            border-top: 1px solid $gray-lighter-dark;
             font-weight: bold;
             font-size: 1.3em;
         }
@@ -487,7 +485,7 @@
     .o_address_format {
         width: 100%;
         .o_address_street, .o_address_country {
-            .o-flex-display;
+            @include o-flex-display;
         }
 
         .o_address_city {
@@ -557,12 +555,12 @@
 
     // Boolean
     .o_field_boolean {
-        margin: 0 @odoo-form-spacing-unit 0 0;
+        margin: 0 $odoo-form-spacing-unit 0 0;
     }
 
     // Timezone widget warning
     .o_tz_warning {
-        color: @brand-danger;
+        color: $brand-danger;
         cursor: help;
         position: absolute;
         margin-left: -40px;
@@ -583,7 +581,7 @@
 
         > tfoot > tr > td {
             padding: 3px;
-            color: @odoo-main-text-color;
+            color: $odoo-main-text-color;
         }
     }
     &.o_form_readonly .o_field_widget .o_list_view .o_row_handle {
@@ -593,9 +591,9 @@
     // Attachments
     .oe_attachment {
         display: inline-block;
-        border: 1px solid @odoo-brand-lightsecondary;
-        margin: 0 @odoo-form-spacing-unit @odoo-form-spacing-unit 0;
-        padding: @odoo-form-spacing-unit;
+        border: 1px solid $odoo-brand-lightsecondary;
+        margin: 0 $odoo-form-spacing-unit $odoo-form-spacing-unit 0;
+        padding: $odoo-form-spacing-unit;
     }
 
     &.oe_form_configuration {
@@ -654,19 +652,19 @@ label.o_light_label, .o_light_label label {
 }
 
 // XXS form view specific rules
-.form-break-table() {
+@mixin form-break-table {
     display: block;
-    margin-bottom: @odoo-form-spacing-unit * 4;
+    margin-bottom: $odoo-form-spacing-unit * 4;
 
     > tbody {
         display: block;
 
         > tr {
-            .o-flex-display();
-            .o-flex-flow(row, wrap);
+            @include o-flex-display;
+            @include o-flex-flow(row, wrap);
 
             > td {
-                .o-flex(1, 0, auto);
+                @include o-flex(1, 0, auto);
                 display: block;
                 max-width: 100%;
                 padding: 0;
@@ -674,11 +672,11 @@ label.o_light_label, .o_light_label label {
                 width: auto!important;  // !important is required to override the width computed in JS
                 &.o_td_label {
                     width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox)
-                    line-height: @odoo-label-font-size-factor;
+                    line-height: $odoo-label-font-size-factor;
                 }
 
                 .o_field_widget {
-                    margin-bottom: @odoo-form-spacing-unit * 2;
+                    margin-bottom: $odoo-form-spacing-unit * 2;
                     &.o_field_boolean {
                         margin-right: 0;
                     }
@@ -698,16 +696,16 @@ label.o_light_label, .o_light_label label {
     }
     .o_group {
         &.o_inner_group {
-            .form-break-table();
+            @include form-break-table;
         }
     }
 }
 
 // Settings form views
 .o_settings_container {
-    .o-flex-display();
-    .o-flex(0, 1, auto);
-    .o-flex-flow(row, wrap);
+    @include o-flex-display;
+    @include o-flex(0, 1, auto);
+    @include o-flex-flow(row, wrap);
     .o_setting_box:visible:nth-child(odd) {
         clear: left;
     }
diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss
index 95da6a2b35b..f401ecdda56 100644
--- a/addons/web/static/src/scss/form_view_extra.scss
+++ b/addons/web/static/src/scss/form_view_extra.scss
@@ -1,6 +1,6 @@
-@sheet-max-width: 860px;
-@sheet-min-width: 650px;
-@sheet-padding: 16px;
+$sheet-max-width: 860px;
+$sheet-min-width: 650px;
+$sheet-padding: 16px;
 
 .o_form_view {
     &.o_form_nosheet.oe_form_nomargin {
@@ -11,8 +11,8 @@
         background: url(/web/static/src/img/form_sheetbg.png);
 
         > .o_form_sheet {
-            min-width: @sheet-min-width;
-            max-width: @sheet-max-width;
+            min-width: $sheet-min-width;
+            max-width: $sheet-max-width;
             min-height: 330px;
             padding: 16px;
             border: 1px solid #c8c8d3;
@@ -73,12 +73,12 @@
                 line-height: 1.2;
 
                 .o_stat_value {
-                    .o-text-overflow(block);
+                    @include o-text-overflow(block);
                     font-weight: 700;
-                    color: @odoo-brand-primary;
+                    color: $odoo-brand-primary;
                 }
                 .o_stat_text {
-                    .o-text-overflow(block);
+                    @include o-text-overflow(block);
                     font-size: small;
 
                     .o_stat_value {
@@ -105,7 +105,7 @@
                 padding: 0 10px;
             }
             .o_dropdown_more {
-                .o-position-absolute(@top: 100%, @right: 0);
+                @include o-position-absolute($top: 100%, $right: 0);
                 min-width: 0;
                 padding: 0px;
             }
@@ -144,7 +144,7 @@
 
     // Separators
     .o_horizontal_separator {
-        color: @odoo-brand-optional;
+        color: $odoo-brand-optional;
         font-weight: bold;
     }
 
@@ -166,8 +166,8 @@
     // Chatter
     .oe_chatter {
         display: block;
-        min-width: @sheet-min-width + 2* @sheet-padding;
-        max-width: @sheet-max-width + 2* @sheet-padding;
+        min-width: $sheet-min-width + 2* $sheet-padding;
+        max-width: $sheet-max-width + 2* $sheet-padding;
         margin: 0 auto;
         padding: 16px 16px 48px;
     }
diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss
index fc8fc323582..62e94e926ce 100644
--- a/addons/web/static/src/scss/graph_view.scss
+++ b/addons/web/static/src/scss/graph_view.scss
@@ -3,7 +3,7 @@
         height: 100%;
         overflow: auto;
         svg {
-            background-color: @odoo-view-background-color;
+            background-color: $odoo-view-background-color;
         }
     }
 }
@@ -16,5 +16,5 @@
 // Control panel buttons
 // ------------------------------------------------------------------
 .o_graph_measures_list {
-    .o-selected-li;
+    @include o-selected-li;
 }
diff --git a/addons/web/static/src/scss/kanban_column_progressbar.scss b/addons/web/static/src/scss/kanban_column_progressbar.scss
index f4cffd6c097..9a54bbd8067 100644
--- a/addons/web/static/src/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/scss/kanban_column_progressbar.scss
@@ -1,41 +1,41 @@
-@o-kanban-counter-header-height: @o-kanban-header-title-height*0.6;
+$o-kanban-counter-header-height: $o-kanban-header-title-height*0.6;
 
-.o-kanban-css-filter(@class, @accent-color) {
+@mixin o-kanban-css-filter($class, $accent-color) {
     // Provide CSS reordering and highlight
-    &.o_kanban_group_show_@{class} {
-        @mix-soft: mix(@accent-color, @odoo-webclient-background-color, 5%);
-        @mix-full: mix(@accent-color, @odoo-webclient-background-color);
+    &.o_kanban_group_show_#{$class} {
+        $mix-soft: mix($accent-color, $odoo-webclient-background-color, 5%);
+        $mix-full: mix($accent-color, $odoo-webclient-background-color);
 
         &, .o_kanban_header {
-            background-color: @mix-soft;
-            border-color: @mix-full;
+            background-color: $mix-soft;
+            border-color: $mix-full;
         }
 
-        .progress-bar.bg-@{class}-full {
+        .progress-bar.bg-#{$class}-full {
             border: 1px solid white;
         }
 
-        .oe_kanban_card_@{class} {
+        .oe_kanban_card_#{$class} {
             order: 1;
-            margin-bottom: @o-kanban-inside-vgutter*0.5;
+            margin-bottom: $o-kanban-inside-vgutter*0.5;
 
-            ~ .oe_kanban_card_@{class} {
-                margin-top: -@o-kanban-inside-vgutter*0.5 - 1px;
+            ~ .oe_kanban_card_#{$class} {
+                margin-top: -$o-kanban-inside-vgutter*0.5 - 1px;
             }
 
             ~ .o_kanban_load_more {
-                margin-top: -@o-kanban-inside-vgutter*0.5;
+                margin-top: -$o-kanban-inside-vgutter*0.5;
             }
         }
 
         .o_kanban_load_more {
             order: 2;
-            padding: @o-kanban-inside-vgutter*0.5 0 @o-kanban-inside-vgutter;
+            padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter;
         }
 
-        .o_kanban_record:not(.oe_kanban_card_@{class}) {
+        .o_kanban_record:not(.oe_kanban_card_#{$class}) {
             order: 3;
-            .o-hover-opacity(0.5);
+            @include o-hover-opacity(0.5);
             box-shadow: none;
         }
     }
@@ -44,7 +44,7 @@
 // If columns has the progressbar, adapt the layout
 .o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
     > .o_kanban_header .o_kanban_header_title {
-        height: @o-kanban-counter-header-height;
+        height: $o-kanban-counter-header-height;
         margin-top: 5px;
     }
 
@@ -57,16 +57,16 @@
 
 .o_kanban_counter {
     position: relative;
-    .o-flex-display();
-    .o-align-items(center);
-    .o-transition(opacity, 0.3s);
-    margin-bottom: @o-kanban-record-margin*2;
+    @include o-flex-display;
+    @include o-align-items(center);
+    @include o-transition(opacity, 0.3s);
+    margin-bottom: $o-kanban-record-margin*2;
 
     > .o_kanban_counter_progress {
         width: 76%;
-        height: @font-size-small;
+        height: $font-size-small;
         margin-bottom: 0;
-        background-color: @gray-lighter-dark;
+        background-color: $gray-lighter-dark;
         box-shadow: none;
 
         .progress-bar {
@@ -82,24 +82,24 @@
 
         .o_kanban_counter_label {
             font-size: 10px;
-            .user-select(none);
+            @include user-select(none);
         }
     }
 
     > .o_kanban_counter_side {
         width: 21%;
         margin-left: 3%;
-        color: @headings-color;
+        color: $headings-color;
         text-align: right;
         white-space: nowrap;
-        .o-transform-origin(right, center);
+        @include o-transform-origin(right, center);
 
         &.o_kanban_grow {
-            .o-animation(grow, 1s, ease);
+            @include o-animation(grow, 1s, ease);
         }
 
         &.o_kanban_grow_huge {
-            .o-animation(grow_huge, 1s, ease);
+            @include o-animation(grow_huge, 1s, ease);
         }
 
         // Target currency icon
@@ -113,16 +113,16 @@
 }
 
 .o_kanban_view .o_kanban_group {
-    .o-kanban-css-filter(success, @brand-success);
-    .o-kanban-css-filter(warning, @brand-warning);
-    .o-kanban-css-filter(danger, @brand-danger);
+    @include o-kanban-css-filter(success, $brand-success);
+    @include o-kanban-css-filter(warning, $brand-warning);
+    @include o-kanban-css-filter(danger, $brand-danger);
 
     &.o_kanban_group_show {
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
 
         > * {
-            .o-flex(0, 0, auto);
+            @include o-flex(0, 0, auto);
         }
     }
 }
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index 83db9319166..0a1688260a8 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -1,26 +1,170 @@
+// FIXME variables and mixins were moved from kanban_view.scss to here as this
+// file is placed before in the assets template (and changing file order may
+// break selector priorities).
+
+$o-kanban-record-margin: $odoo-horizontal-padding/2;
+$o-kanban-group-padding: $odoo-horizontal-padding; // Cannot be higher than this
+
+$o-kanban-default-record-width: 300px;
+$o-kanban-small-record-width: 240px;
+
+$o-kanban-header-title-height: 50px;
+
+$o-kanban-image-width: 64px;
+$o-kanban-inside-vgutter: 8px;
+$o-kanban-inside-hgutter: 8px;
+$o-kanban-color-border-width: 3px;
+$o-kanban-inside-hgutter-mobile: $odoo-horizontal-padding;
+$o-kanban-inner-hmargin: 5px;
+$o-kanban-progressbar-height: 20px;
+
+// ------- Kanban grouped mixins -------
+@mixin o-kanban-icon($base-opacity: 0.5) {
+    display: block;
+    text-align: center;
+    color: $odoo-main-text-color;
+    font-size: $font-size-small;
+    cursor: pointer;
+    @include o-hover-opacity($base-opacity);
+}
+@mixin o-kanban-tag-color {
+    @for $size from 1 through $odoo-nb-ui-color {
+        // Note: the first color is supposed to be invisible if there is a color
+        // field but it is used as a default color when there is no color field
+        &.o_tag_color_#{$size - 1} span {
+            background-color: nth($odoo-colors, $size);
+        }
+    }
+}
+@mixin o-kanban-record-color {
+    @for $size from 2 through $odoo-nb-ui-color {
+        // Note: the first color is not defined as it is the 'no color' for kanban
+        .oe_kanban_color_#{$size - 1}::after {
+            background-color: nth($odoo-colors, $size);
+        }
+    }
+}
+@mixin o-kanban-slim-col {
+    position: relative;
+    @include o-flex(0, 0, auto);
+    margin: 0;
+    padding: 0 floor($o-kanban-group-padding * 0.7);
+    cursor: pointer;
+}
+@mixin o-kanban-header-title {
+    @include o-flex-display;
+    @include o-align-items(center);
+    height: $o-kanban-header-title-height;
+    line-height: 2.2;
+    color: $headings-color;
+}
+@mixin o-kanban-v-title {
+    @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
+    @include o-transform-origin(left, bottom, $z: 0);
+    @include o-transform(rotate(90deg));
+    overflow: visible;
+    white-space: nowrap;
+    font-size: 15px;
+}
+
+// ------- Kanban records mixins -------
+@mixin o-kanban-record-title($font-size) {
+    color: $headings-color;
+    font-size: $font-size;
+    font-weight: 500;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
+    margin: -1px -1px auto auto; // compensate border
+    padding: $padding-base/2 $padding-base;
+    border: 1px solid transparent;
+    border-bottom: none;
+    vertical-align: top;
+    color: $text-color;
+
+    &:hover {
+        color: $headings-color;
+    }
+    &:focus, &:active, &:focus:active {
+        outline: none;
+    }
+}
+@mixin o-kanban-dropdown-open {
+    position: relative;
+    background: white;
+    border-color: $gray-lighter-darker;
+    z-index: $zindex-dropdown + 1;
+}
+@mixin o-kanban-dropdown-menu {
+    @include o-position-absolute($right: -1px);
+    margin-top: -1px;
+    border-color: $gray-lighter-darker;
+}
+@mixin o-kanban-colorpicker {
+    max-width: 150px;
+    padding: 3px ($odoo-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $odoo-dropdown-hpadding;
+
+    > li {
+        display: inline-block;
+        margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
+        border: 1px solid white;
+        box-shadow: 0 0 0 1px $gray-lighter-dark;
+
+        > a {
+            display: block;
+
+            &::after {
+                content: "";
+                display: block;
+                width: 20px;
+                height: 15px;
+            }
+        }
+
+        // No Color
+        &:first-child > a {
+            position: relative;
+            &::before {
+                content: "";
+                @include o-position-absolute(-2px, $left: 10px);
+                display: block;
+                width: 1px;
+                height: 20px;
+                @include rotate(45deg);
+                background-color: red;
+            }
+            &::after {
+                background-color: white;
+            }
+        }
+    }
+}
+
+
 // ------- Kanban dashboard variables -------
 
 // Since rows and containers are used inside cards, we're
 // forced to set the padding relative to the grid system.
-@o-kanban-dashboard-hpadding: @grid-gutter-width*0.5;
-@o-kanban-dashboard-vpadding: @grid-gutter-width*0.25;
+$o-kanban-dashboard-hpadding: $grid-gutter-width*0.5;
+$o-kanban-dashboard-vpadding: $grid-gutter-width*0.25;
 
 // Used to manage spacing in complex dropdown menu
-@o-kanban-dashboard-dropdown-complex-gap: 5px;
+$o-kanban-dashboard-dropdown-complex-gap: 5px;
 
 // Emulate dropdown links
-.o-kanban-dashboard-dropdown-link(@link-padding-gap: @odoo-dropdown-hpadding) {
+@mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $odoo-dropdown-hpadding) {
     padding: 0;
 
     > a {
-        margin: auto auto auto -@link-padding-gap;
-        padding: 3px @link-padding-gap;
-        color: @text-color;
+        margin: auto auto auto -$link-padding-gap;
+        padding: 3px $link-padding-gap;
+        color: $text-color;
         display: block;
 
         &:hover {
-            background-color: @gray-lighter-dark;
-            color: @headings-color;
+            background-color: $gray-lighter-dark;
+            color: $headings-color;
         }
     }
     &:last-child {
@@ -30,16 +174,16 @@
 
 .o_kanban_view.o_kanban_dashboard {
     // correctly display the no_content_helper in dashboards
-    .o-flex-flow(row, wrap);
+    @include o-flex-flow(row, wrap);
 
     .o_kanban_record {
         position: relative;
-        .o-flex-display();
-        .o-flex-flow(column, nowrap);
-        .o-justify-content(space-between);
-        padding: @o-kanban-dashboard-vpadding @o-kanban-dashboard-hpadding;
+        @include o-flex-display;
+        @include o-flex-flow(column, nowrap);
+        @include o-justify-content(space-between);
+        padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             margin-bottom: 10px;
         }
 
@@ -57,20 +201,20 @@
         }
 
         // ------- Dropdown toggle & menu -------
-        @o-kanban-manage-toggle-height: 35px;
+        $o-kanban-manage-toggle-height: 35px;
 
         .o_kanban_manage_toggle_button {
-            .o-kanban-dropdown(@o-kanban-dashboard-hpadding);
-            height: @o-kanban-manage-toggle-height;
+            @include o-kanban-dropdown($o-kanban-dashboard-hpadding);
+            height: $o-kanban-manage-toggle-height;
         }
 
         .o_kanban_card_manage_pane {
-            .dropdown-menu;
-            .o-kanban-dropdown-menu();
+            @extend .dropdown-menu; // FIXME was a mixin before scss convertion
+            @include o-kanban-dropdown-menu;
 
             // Arbitrary value to place the dropdown-menu exactly below the
             // dropdown-toggle (height is forced so that it works on Firefox)
-            top: @o-kanban-manage-toggle-height - 1;
+            top: $o-kanban-manage-toggle-height - 1;
 
             > div:not(.o_no_padding_kanban_colorpicker) {
                 padding: 3px 0 3px 20px;
@@ -79,11 +223,11 @@
             }
 
             > .o_kanban_card_manage_section {
-                border-bottom: 1px solid @gray-lighter-dark;
+                border-bottom: 1px solid $gray-lighter-dark;
                 margin-bottom: 10px;
 
                 > div {
-                    .o-kanban-dashboard-dropdown-link();
+                    @include o-kanban-dashboard-dropdown-link;
                 }
             }
 
@@ -93,32 +237,32 @@
                 max-width: 400px;
 
                 .row {
-                    .o-flex-display();
-                    .o-flex-flow(row, nowrap);
-                    .o-justify-content(space-between);
+                    @include o-flex-display;
+                    @include o-flex-flow(row, nowrap);
+                    @include o-justify-content(space-between);
                     margin-left: 0;
                     margin-right: 0;
-                    padding-left: @o-kanban-dashboard-dropdown-complex-gap*2;
-                    padding-right: @o-kanban-dashboard-dropdown-complex-gap*2;
+                    padding-left: $o-kanban-dashboard-dropdown-complex-gap*2;
+                    padding-right: $o-kanban-dashboard-dropdown-complex-gap*2;
                 }
 
                 div[class*="col-"] {
-                    .o-flex(1, 1, percentage(100/3));
-                    padding-left: @o-kanban-dashboard-dropdown-complex-gap;
-                    padding-right: @o-kanban-dashboard-dropdown-complex-gap;
+                    @include o-flex(1, 1, percentage(100/3));
+                    padding-left: $o-kanban-dashboard-dropdown-complex-gap;
+                    padding-right: $o-kanban-dashboard-dropdown-complex-gap;
 
                     > .o_kanban_card_manage_title {
-                        .h5;
+                        @extend .h5; // FIXME was a mixin before scss convertion
                         font-weight: 500;
                     }
                     > div:not(.o_kanban_card_manage_title) {
-                        .o-kanban-dashboard-dropdown-link(@link-padding-gap: @o-kanban-dashboard-dropdown-complex-gap);
+                        @include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
                     }
                 }
 
                 .row.o_kanban_card_manage_settings {
-                    border-top: 1px solid @gray-lighter-dark;
-                    padding-top: @o-kanban-dashboard-dropdown-complex-gap*3;
+                    border-top: 1px solid $gray-lighter-dark;
+                    padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
 
                     .oe_kanban_colorpicker {
                         max-width: none;
@@ -126,13 +270,13 @@
                     }
 
                     div[class*="col-"] + div[class*="col-"] {
-                        border-left: 1px solid @gray-lighter-dark;
+                        border-left: 1px solid $gray-lighter-dark;
                     }
 
                     // Default options box
                     div.text-right {
                         text-align: left; // :/
-                        .o-kanban-dashboard-dropdown-link(0);
+                        @include o-kanban-dashboard-dropdown-link(0);
                         > a {
                             margin-left: 40px;
                             padding-left: 20px;
@@ -148,7 +292,7 @@
                 display: block;
             }
             .o_kanban_manage_toggle_button {
-                .o-kanban-dropdown-open();
+                @include o-kanban-dropdown-open;
                 position: absolute;
             }
         }
@@ -158,27 +302,27 @@
 
         // Provide enough room for the dropdown-toggle
         .o_primary {
-            padding-right: @o-kanban-dashboard-hpadding*2;
+            padding-right: $o-kanban-dashboard-hpadding*2;
         }
 
         // Uniform titles
         .o_kanban_card_header_title .o_primary,
         .o_kanban_primary_left .o_primary > span:first-child,
         .oe_kanban_content > .o_title > h3 {
-            .o-kanban-record-title(@font-size: 16px);
+            @include o-kanban-record-title($font-size: 16px);
             display: block;
         }
 
         // Identify subtitles without classes
         .o_kanban_primary_left .o_primary > span:nth-child(2) > strong {
             font-weight: 500;
-            font-size: @font-size-small;
-            color: @text-muted;
+            font-size: $font-size-small;
+            color: $text-muted;
         }
 
         // Provide enough room to add an icon before the title
         &.o_has_icon .o_primary {
-            padding-left: @o-kanban-record-margin*1.5;
+            padding-left: $o-kanban-record-margin*1.5;
         }
 
         // -------  Kanban Content -------
@@ -189,11 +333,11 @@
         }
 
         .o_kanban_card_header + .container.o_kanban_card_content {
-            .o-flex(1, 0, auto);
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
-            .o-justify-content(space-between);
-            margin-top: @o-kanban-dashboard-vpadding * 2;
+            @include o-flex(1, 0, auto);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
+            @include o-justify-content(space-between);
+            margin-top: $o-kanban-dashboard-vpadding * 2;
             padding-right: 0;
             padding-left: 0;
 
@@ -203,31 +347,31 @@
 
             a {
                 position: relative;
-                .o-text-overflow(inline-block);
+                @include o-text-overflow(inline-block);
             }
 
             .o_kanban_primary_bottom {
-                margin-top: @o-kanban-dashboard-vpadding;
-                margin-bottom: -@o-kanban-dashboard-vpadding;
+                margin-top: $o-kanban-dashboard-vpadding;
+                margin-bottom: -$o-kanban-dashboard-vpadding;
 
                 &.bottom_block {
-                    border-top: 1px solid @gray-lighter-dark;
-                    background-color: @gray-lighter;
-                    padding-top: @o-kanban-dashboard-vpadding;
-                    padding-bottom: @o-kanban-dashboard-vpadding;
+                    border-top: 1px solid $gray-lighter-dark;
+                    background-color: $gray-lighter;
+                    padding-top: $o-kanban-dashboard-vpadding;
+                    padding-bottom: $o-kanban-dashboard-vpadding;
                 }
             }
         }
 
         .o_dashboard_graph {
             overflow: hidden;
-            margin: (@o-kanban-dashboard-vpadding * 2) -@o-kanban-dashboard-hpadding;
+            margin: ($o-kanban-dashboard-vpadding * 2) -$o-kanban-dashboard-hpadding;
         }
     }
 
     .o_favorite, .o_kanban_manage_toggle_button {
-        .o-position-absolute(0, 0);
-        padding: @o-kanban-record-margin;
+        @include o-position-absolute(0, 0);
+        padding: $o-kanban-record-margin;
     }
 
     .o_favorite {
@@ -238,6 +382,6 @@
 
     // Emphasize records' colors when necessary
     &.o_emphasize_colors .o_kanban_record::after {
-        width: @o-kanban-color-border-width * 2;
+        width: $o-kanban-color-border-width * 2;
     }
 }
diff --git a/addons/web/static/src/scss/kanban_examples_dialog.scss b/addons/web/static/src/scss/kanban_examples_dialog.scss
index 35a3d914b8e..2a27d2500b9 100644
--- a/addons/web/static/src/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/scss/kanban_examples_dialog.scss
@@ -1,29 +1,29 @@
 .o_kanban_examples_dialog {
-    .o-flex-display();
+    @include o-flex-display;
     padding: 0px;
-    background: @odoo-color-silver;
+    background: $odoo-color-silver;
 
     // sidebar
     .o_kanban_examples_dialog_nav {
-        .o-flex(0, 0, auto);
-        border-right: 1px solid @gray-lighter-dark;
+        @include o-flex(0, 0, auto);
+        border-right: 1px solid $gray-lighter-dark;
         background: white;
 
         > ul > li {
             margin: 0;
-            border-bottom: 1px solid @gray-lighter-dark;
+            border-bottom: 1px solid $gray-lighter-dark;
 
             > a {
                 padding: 12px 15px;
-                color: @odoo-main-text-color;
+                color: $odoo-main-text-color;
                 border-left: 3px solid transparent;
                 &:focus {
                     outline: none;
                 }
             }
             &.active > a {
-                color: @headings-color;
-                border-left-color: @odoo-brand-optional;
+                color: $headings-color;
+                border-left-color: $odoo-brand-optional;
                 font-weight: bold;
             }
         }
@@ -31,28 +31,28 @@
 
     // content
     .o_kanban_examples_dialog_content {
-        .o-flex(1, 1, 100%);
+        @include o-flex(1, 1, 100%);
 
         .o_kanban_examples_description {
             padding: 16px 16px 0;
             text-align: justify;
         }
         .o_kanban_examples {
-            .o-flex-display();
+            @include o-flex-display;
             padding: 0 6px;
 
             .o_kanban_examples_group {
-                .o-flex(1, 1, 100%);
+                @include o-flex(1, 1, 100%);
                 margin: 10px;
 
                 .o_kanban_examples_ghost {
                     padding: 5px;
                     margin-top: -1px;
-                    border: thin solid @gray-lighter-dark;
+                    border: thin solid $gray-lighter-dark;
                     background-color: white;
                     .o_ghost_content {
                         height: 12px;
-                        background: @gray-lighter-dark;
+                        background: $gray-lighter-dark;
                         &.o_ghost_tag {
                             display: inline-block;
                             width: 40%;
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index f9130469665..0f7432cfae4 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -1,158 +1,22 @@
-@o-kanban-record-margin: @odoo-horizontal-padding/2;
-@o-kanban-group-padding: @odoo-horizontal-padding; // Cannot be higher than this
-
-@o-kanban-default-record-width: 300px;
-@o-kanban-small-record-width: 240px;
-
-@o-kanban-header-title-height: 50px;
-
-@o-kanban-image-width: 64px;
-@o-kanban-inside-vgutter: 8px;
-@o-kanban-inside-hgutter: 8px;
-@o-kanban-color-border-width: 3px;
-@o-kanban-inside-hgutter-mobile: @odoo-horizontal-padding;
-@o-kanban-inner-hmargin: 5px;
-@o-kanban-progressbar-height: 20px;
-
-// ------- Kanban grouped mixins -------
-.o-kanban-icon(@base-opacity: 0.5) {
-    display: block;
-    text-align: center;
-    color: @odoo-main-text-color;
-    font-size: @font-size-small;
-    cursor: pointer;
-    .o-hover-opacity(@base-opacity);
-}
-.o-kanban-tag-color(@size: 0) when (@size < @odoo-nb-ui-color) {
-    // Note: the 0 color is supposed to be invisible if there is a color field
-    // but it is used as a default color when there is no color field
-    &.o_tag_color_@{size} span {
-        background-color: ~"@{odoo-color-@{size}}";
-    }
-    .o-kanban-tag-color(@size + 1);
-}
-.o-kanban-record-color(@size: 1) when (@size < @odoo-nb-ui-color) {
-    // Note: the 0 color is not defined as it is the 'no color' for kanban
-    .oe_kanban_color_@{size}::after {
-        background-color: ~"@{odoo-color-@{size}}";
-    }
-    .o-kanban-record-color(@size + 1);
-}
-.o-kanban-slim-col() {
-    position: relative;
-    .o-flex(0, 0, auto);
-    margin: 0;
-    padding: 0 floor(@o-kanban-group-padding * 0.7);
-    cursor: pointer;
-}
-.o-kanban-header-title() {
-    .o-flex-display();
-    .o-align-items(center);
-    height: @o-kanban-header-title-height;
-    line-height: 2.2;
-    color: @headings-color;
-}
-.o-kanban-v-title() {
-    .o-position-absolute(@o-kanban-inside-vgutter * 2, @left: floor(-@o-kanban-inside-vgutter * 1.2));
-    .o-transform-origin(left, bottom, @z: 0);
-    .o-transform(rotate(90deg));
-    overflow: visible;
-    white-space: nowrap;
-    font-size: 15px;
-}
-
-// ------- Kanban records mixins -------
-.o-kanban-record-title(@font-size) {
-    color: @headings-color;
-    font-size: @font-size;
-    font-weight: 500;
-    margin-bottom: 0;
-    margin-top: 0;
-}
-.o-kanban-dropdown(@padding-base: @o-kanban-inside-vgutter) {
-    margin: -1px -1px auto auto; // compensate border
-    padding: @padding-base/2 @padding-base;
-    border: 1px solid transparent;
-    border-bottom: none;
-    vertical-align: top;
-    color: @text-color;
-
-    &:hover {
-        color: @headings-color;
-    }
-    &:focus, &:active, &:focus:active {
-        outline: none;
-    }
-}
-.o-kanban-dropdown-open() {
-    position: relative;
-    background: white;
-    border-color: @gray-lighter-darker;
-    z-index: @zindex-dropdown + 1;
-}
-.o-kanban-dropdown-menu() {
-    .o-position-absolute(@right: -1px);
-    margin-top: -1px;
-    border-color: @gray-lighter-darker;
-}
-.o-kanban-colorpicker() {
-    max-width: 150px;
-    padding: 3px (@odoo-dropdown-hpadding - @o-kanban-inner-hmargin) 3px @odoo-dropdown-hpadding;
-
-    > li {
-        display: inline-block;
-        margin: @o-kanban-inner-hmargin @o-kanban-inner-hmargin 0 0;
-        border: 1px solid white;
-        box-shadow: 0 0 0 1px @gray-lighter-dark;
-
-        > a {
-            display: block;
-
-            &::after {
-                content: "";
-                display: block;
-                width: 20px;
-                height: 15px;
-            }
-        }
-
-        // No Color
-        &:first-child > a {
-            position: relative;
-            &::before {
-                content: "";
-                .o-position-absolute(-2px, @left: 10px);
-                display: block;
-                width: 1px;
-                height: 20px;
-                .rotate(45deg);
-                background-color: red;
-            }
-            &::after {
-                background-color: white;
-            }
-        }
-    }
-}
 
 // ------- Kanban View Layout -------
 .o_kanban_view {
-    .o-flex-display();
-    .o-align-content(stretch);
+    @include o-flex-display;
+    @include o-align-content(stretch);
     overflow-x: visible;
 
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: $screen-xs-max) {
         padding: 0px!important;
         overflow-x: auto;
     }
 
     .o_kanban_record, .o_kanban_quick_create {
-        padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
-        border: 1px solid @gray-lighter-dark;
+        padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+        border: 1px solid $gray-lighter-dark;
         background-color: white;
 
-        @media (max-width: @screen-xs-max) {
-            padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter-mobile;
+        @media (max-width: $screen-xs-max) {
+            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
         }
         &:focus, &:focus-within {
             -webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,1);
@@ -165,7 +29,7 @@
 
     .o_kanban_quick_create {
         box-shadow: 0 0 20px -10px;
-        margin: 0 @o-kanban-record-margin -1px @o-kanban-record-margin;
+        margin: 0 $o-kanban-record-margin -1px $o-kanban-record-margin;
         margin-bottom: 8px;
 
         .o_form_view {
@@ -179,7 +43,7 @@
     .o_kanban_record {
         position: relative;
         display: inline-block; // Force the creation of a block formatting context to clear float items
-        border-color: @gray-lighter-darker;
+        border-color: $gray-lighter-darker;
         min-width: 150px;
         margin: 0 0 -1px;
 
@@ -187,21 +51,21 @@
         // Records colours
         &::after {
             content: "";
-            .o-position-absolute(0, auto, 0, -1px);
-            width: @o-kanban-color-border-width;
+            @include o-position-absolute(0, auto, 0, -1px);
+            width: $o-kanban-color-border-width;
         }
 
         // Inner Sections
         .o_kanban_record_top, .o_kanban_record_body  {
-            margin-bottom: @o-kanban-inner-hmargin;
+            margin-bottom: $o-kanban-inner-hmargin;
         }
 
         .o_kanban_record_top, .o_kanban_record_bottom  {
-            .o-flex-display();
+            @include o-flex-display;
         }
 
         .o_kanban_record_top {
-            .o-align-items(flex-start);
+            @include o-align-items(flex-start);
 
             .o_dropdown_kanban {
                 // For v11 layout, reset positioning to default to properly use
@@ -213,7 +77,7 @@
 
             .o_kanban_record_headings {
                 line-height: 1.2;
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 // Ensure long word doesn't break out of container
                 word-wrap: break-word;
                 overflow: hidden;
@@ -221,22 +85,22 @@
         }
 
         .o_kanban_record_title {
-            .o-kanban-record-title (@font-size: 13px);
+            @include o-kanban-record-title($font-size: 13px);
         }
 
         .o_kanban_record_subtitle {
             display: block;
-            margin-top: @o-kanban-inner-hmargin*0.5;
+            margin-top: $o-kanban-inner-hmargin*0.5;
         }
 
         .o_kanban_record_bottom {
             .oe_kanban_bottom_left, .oe_kanban_bottom_right {
-                .o-flex-display();
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-align-items(center);
                 height: 20px;
             }
             .oe_kanban_bottom_left {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
 
                 > * {
                     margin-right: 6px;
@@ -249,7 +113,7 @@
                 }
             }
             .oe_kanban_bottom_right{
-                .o-flex(0, 1, auto);
+                @include o-flex(0, 1, auto);
 
                 .oe_kanban_avatar {
                     width: 20px;
@@ -258,9 +122,9 @@
                 }
             }
             .o_link_muted {
-                color: @text-color;
+                color: $text-color;
                 &:hover {
-                    color: @brand-primary;
+                    color: $brand-primary;
                     text-decoration: underline;
                 }
             }
@@ -276,22 +140,22 @@
         // -------  v11 Layout + generic layouts (~v10) -------
         // Kanban Record - Dropdown
         .o_dropdown_kanban {
-            .o-position-absolute(@o-kanban-inside-vgutter, @o-kanban-inside-hgutter);
+            @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
             visibility: hidden;
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 visibility: visible;
             }
 
             .dropdown-toggle {
-                .o-kanban-dropdown();
-                margin: (-@o-kanban-inside-vgutter - 1px) (-@o-kanban-inside-hgutter - 1px) 0 0;
+                @include o-kanban-dropdown;
+                margin: (-$o-kanban-inside-vgutter - 1px) (-$o-kanban-inside-hgutter - 1px) 0 0;
             }
             &.open .dropdown-toggle {
-                .o-kanban-dropdown-open();
+                @include o-kanban-dropdown-open;
             }
             .dropdown-menu {
-                .o-kanban-dropdown-menu();
-                right: (-@o-kanban-inside-hgutter - 1);
+                @include o-kanban-dropdown-menu;
+                right: (-$o-kanban-inside-hgutter - 1);
             }
         }
 
@@ -301,13 +165,13 @@
 
         // Kanban Record - Dropdown colorpicker
         .oe_kanban_colorpicker {
-            .o-kanban-colorpicker();
+            @include o-kanban-colorpicker;
         }
 
         // Kanban Record - Inner elements
         .o_field_many2manytags, .o_kanban_tags {
             display: block;
-            margin-bottom: @o-kanban-inner-hmargin;
+            margin-bottom: $o-kanban-inner-hmargin;
             line-height: 1.2;
 
             .o_tag {
@@ -316,7 +180,7 @@
                 font-size: 11px;
                 font-weight: 500;
                 background-color: transparent;
-                .o-kanban-tag-color();
+                @include o-kanban-tag-color;
 
                 span {
                     display: inline-block;
@@ -342,9 +206,9 @@
             margin-top: 15px;
 
             > button, > a {
-                .o-position-absolute(@right: @o-kanban-record-margin, @bottom: @o-kanban-record-margin);
-                @media (max-width: @screen-xs-max) {
-                    right: @o-kanban-inside-hgutter-mobile;
+                @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
+                @media (max-width: $screen-xs-max) {
+                    right: $o-kanban-inside-hgutter-mobile;
                 }
             }
         }
@@ -355,30 +219,30 @@
         }
 
         &.ui-sortable-helper {
-            .o-transform(rotate(-3deg));
+            @include o-transform(rotate(-3deg));
             box-shadow: 0 5px 25px -10px black;
-            .transition(~"transform 0.6s, box-shadow 0.3s");
+            @include transition(transform 0.6s, box-shadow 0.3s);
         }
 
         .o_attachment_image > img {
             width: 100%;
             height: auto;
-            margin-bottom: @o-kanban-inner-hmargin;
+            margin-bottom: $o-kanban-inner-hmargin;
         }
 
         .o_progressbar {
-            .o-flex-display();
-            height: @o-kanban-progressbar-height;
+            @include o-flex-display;
+            height: $o-kanban-progressbar-height;
 
             .o_progressbar_title {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
             .o_progress {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 margin-top: 3px;
             }
             .o_progressbar_value {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 width: auto;
                 height: 100%;
                 text-align: right;
@@ -391,12 +255,12 @@
 
         .o_kanban_image {
             float: left;
-            width: @o-kanban-image-width;
+            width: $o-kanban-image-width;
 
             + div {
-                padding-left: @o-kanban-image-width + @o-kanban-inside-hgutter;
-                @media (max-width: @screen-xs-max) {
-                    padding-left:  @o-kanban-image-width + @o-kanban-inside-hgutter-mobile;
+                padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
+                @media (max-width: $screen-xs-max) {
+                    padding-left:  $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
                 }
             }
         }
@@ -404,10 +268,10 @@
         .oe_kanban_details {
             width: 100%;
             ul {
-                margin-bottom: @o-kanban-inner-hmargin*0.5;;
+                margin-bottom: $o-kanban-inner-hmargin*0.5;;
                 padding-left: 0;
                 list-style: none;
-                font-size: @font-size-small;
+                font-size: $font-size-small;
 
                 li {
                     margin-bottom: 2px;
@@ -416,11 +280,11 @@
         }
 
         .o_kanban_footer {
-            .o-flex-display();
-            .o-justify-content(space-between);
-            .o-align-items(center);
+            @include o-flex-display;
+            @include o-justify-content(space-between);
+            @include o-align-items(center);
             > * {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
         }
 
@@ -442,7 +306,7 @@
     &.o_kanban_grouped {
         min-height: 100%;
         padding: 0;
-        background-color: @gray-lighter;
+        background-color: $gray-lighter;
 
         .o_kanban_record, .o_kanban_quick_create {
             width: 100%;
@@ -451,21 +315,21 @@
         }
 
         &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
-            width: @o-kanban-small-record-width + 2*@o-kanban-group-padding;
+            width: $o-kanban-small-record-width + 2*$o-kanban-group-padding;
         }
     }
 
     // Kanban Grouped Layout - Column default
     .o_kanban_group {
-        .o-flex(0, 0, auto);
-        padding: 0 @o-kanban-group-padding @o-kanban-group-padding @o-kanban-group-padding;
+        @include o-flex(0, 0, auto);
+        padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
 
         .o_kanban_header > .o_kanban_header_title {
-            .o-kanban-header-title();
+            @include o-kanban-header-title;
 
             .o_column_title {
-                .o-flex(1, 1, auto);
-                .o-text-overflow();
+                @include o-flex(1, 1, auto);
+                @include o-text-overflow;
                 font-size: 16px;
                 font-weight: 500;
             }
@@ -475,26 +339,26 @@
             }
 
             .o_kanban_quick_add i {
-                .o-kanban-icon;
-                margin-left: @o-kanban-inside-hgutter*2;
+                @include o-kanban-icon;
+                margin-left: $o-kanban-inside-hgutter*2;
             }
 
             &:hover .o_kanban_config, .o_kanban_config.open {
                 visibility: visible;
-                margin-left: @o-kanban-inside-hgutter;
+                margin-left: $o-kanban-inside-hgutter;
             }
 
             .o_kanban_config {
                 visibility: hidden;
 
                 i {
-                    .o-kanban-icon;
+                    @include o-kanban-icon;
                 }
             }
         }
 
         .o_kanban_load_more {
-            padding: @o-kanban-record-margin 0;
+            padding: $o-kanban-record-margin 0;
             box-shadow: inset 0 10px 13px -13px black;
             text-align: center;
         }
@@ -504,11 +368,11 @@
         }
 
         &:not(.o_column_folded) {
-            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding;
+            width: $o-kanban-default-record-width + 2*$o-kanban-group-padding;
         }
 
         &.o_kanban_dragged {
-            background-color: @odoo-main-text-color;
+            background-color: $odoo-main-text-color;
 
             .o_kanban_record {
                 visibility: hidden;
@@ -522,8 +386,8 @@
 
     // Kanban Grouped Layout - Column Folded
     .o_kanban_group.o_column_folded {
-        .o-kanban-slim-col();
-        background-color: @gray-lighter-dark;
+        @include o-kanban-slim-col;
+        background-color: $gray-lighter-dark;
 
         & + .o_kanban_group.o_column_folded {
             margin-left: 1px;
@@ -534,10 +398,10 @@
             opacity: 0.5;
 
             .o_column_title {
-                .o-kanban-v-title();
+                @include o-kanban-v-title;
             }
             .o_column_unfold {
-                .o-kanban-icon(1);
+                @include o-kanban-icon(1);
             }
         }
 
@@ -558,7 +422,7 @@
             cursor: pointer;
             padding: 12px 16px;
             white-space: nowrap;
-            color: @text-muted;
+            color: $text-muted;
             opacity: 0.6;
             &:hover {
                 opacity: 1;
@@ -567,7 +431,7 @@
             .o_kanban_add_column {
                 display: inline-block;
                 padding: 10px 14px;
-                background-color: @odoo-color-silver-dark;
+                background-color: $odoo-color-silver-dark;
             }
             .o_kanban_title {
                 margin-left: 10px;
@@ -575,12 +439,12 @@
         }
 
         .o_quick_create_unfolded {
-            padding: @o-kanban-inside-vgutter @o-kanban-inside-hgutter;
-            width: @o-kanban-small-record-width;
+            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+            width: $o-kanban-small-record-width;
             height: 100%;
             border: none;
             box-shadow: 0 0 20px -10px;
-            background-color: @gray-lighter;
+            background-color: $gray-lighter;
 
             .o_kanban_header {
                 height: 50px;
@@ -601,7 +465,7 @@
             }
 
             .o_kanban_muted_record {
-                background: @gray-lighter-dark;
+                background: $gray-lighter-dark;
                 height: 70px;
                 margin: 10px 0px;
             }
@@ -611,19 +475,19 @@
 
     // Kanban UN-grouped Layout
     &.o_kanban_ungrouped {
-        .o-flex-flow(row, wrap);
-        .o-justify-content(flex-start);
+        @include o-flex-flow(row, wrap);
+        @include o-justify-content(flex-start);
 
-        padding: @o-kanban-record-margin (@odoo-horizontal-padding - @o-kanban-record-margin);
+        padding: $o-kanban-record-margin ($odoo-horizontal-padding - $o-kanban-record-margin);
 
         .o_kanban_record {
-            .o-flex(1, 1, auto);
-            width: @o-kanban-default-record-width;
-            margin: (@o-kanban-record-margin * 0.5) @o-kanban-record-margin;
+            @include o-flex(1, 1, auto);
+            width: $o-kanban-default-record-width;
+            margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
 
-            @media (max-width: @screen-xs-max) {
+            @media (max-width: $screen-xs-max) {
                 margin: 0 0 -1px 0;
-                .o-flex(1, 0, 100%);
+                @include o-flex(1, 0, 100%);
             }
 
             &.o_kanban_ghost {
@@ -639,10 +503,10 @@
 
     &.o_kanban_mobile .o_kanban_record {
         div.label {
-            .o-text-overflow();
+            @include o-text-overflow;
         }
     }
 
     // Records colours
-    .o-kanban-record-color();
+    @include o-kanban-record-color;
 }
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index d09b6968925..ebb5db45457 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -1,27 +1,27 @@
-@o-kanban-mobile-tabs-height: 40px;
+$o-kanban-mobile-tabs-height: 40px;
 
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_kanban_view.o_kanban_grouped {
         display: block;
         position: relative;
         overflow: hidden;
 
         .o_kanban_mobile_tabs {
-            height: @o-kanban-mobile-tabs-height;
+            height: $o-kanban-mobile-tabs-height;
             position: relative;
             background-color: #5E5E5E;
 
             .o_kanban_mobile_tab {
-                .o-position-absolute(@left: 100%);
-                .o-transform(translateX(-50%));
-                height: @o-kanban-mobile-tabs-height;
+                @include o-position-absolute($left: 100%);
+                @include o-transform(translateX(-50%));
+                height: $o-kanban-mobile-tabs-height;
                 padding: 10px;
                 font-size: 14px;
                 color: white;
 
                 &.o_current {
                     font-weight: bold;
-                    border-bottom: 3px solid @odoo-brand-optional;
+                    border-bottom: 3px solid $odoo-brand-optional;
                 }
                 .o_column_title {
                     white-space: nowrap;
@@ -31,7 +31,7 @@
 
         // [class] to get same specificity as elsewhere (kanban_view.less)
         &[class] .o_kanban_group:not(.o_column_folded) {
-            .o-position-absolute(@top: @o-kanban-mobile-tabs-height, @left: 0, @bottom: 0);
+            @include o-position-absolute($top: $o-kanban-mobile-tabs-height, $left: 0, $bottom: 0);
             overflow-x: scroll;
             width: 100%;
             padding: 0;
diff --git a/addons/web/static/src/scss/layout_background.scss b/addons/web/static/src/scss/layout_background.scss
index 6750705c35b..b51cff84599 100644
--- a/addons/web/static/src/scss/layout_background.scss
+++ b/addons/web/static/src/scss/layout_background.scss
@@ -1,9 +1,9 @@
 .o_background_footer, .o_background_header, .o_report_layout_background {
     font-family: 'Lato';
-    color: @gray;
+    color: $gray;
 }
 .o_background_header {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid $gray-lighter;
     .company_address {
         min-width: 300px;
     }
@@ -13,19 +13,19 @@
         margin-right: 16px;
     }
     h3 {
-        color: @odoo-brand-primary;
+        color: $odoo-brand-primary;
         font-weight: 700;
         max-width: 300px;
     }
 }
 .o_background_footer {
     ul {
-        border-top: 1px solid @odoo-brand-primary;
-        border-bottom: 1px solid @odoo-brand-primary;
+        border-top: 1px solid $odoo-brand-primary;
+        border-bottom: 1px solid $odoo-brand-primary;
         padding: 4px 0;
         margin: 0 0 4px 0;
         li {
-            color: @odoo-brand-primary;
+            color: $odoo-brand-primary;
         }
     }
 }
@@ -36,10 +36,10 @@
     background-repeat: no-repeat;
     min-height: 900px;
     thead tr th, h2 {
-        color: @odoo-brand-primary;
+        color: $odoo-brand-primary;
     }
     tbody {
-        color: @gray;
+        color: $gray;
         tr:nth-child(odd) {
             background-color: rgba(184, 171, 180, 0.2);
         }
@@ -53,11 +53,11 @@
             background-color: transparent !important;
         }
         tr:first-child td {
-            /*we could get rid of this rule if .border-black td would be terminated in report.less*/
+            /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
             border-top: none !important;
         }
         tr:last-child td {
-            color: @odoo-brand-primary;
+            color: $odoo-brand-primary;
         }
     }
     #total {
diff --git a/addons/web/static/src/scss/layout_boxed.scss b/addons/web/static/src/scss/layout_boxed.scss
index 21fcf66efc5..f3aa7601107 100644
--- a/addons/web/static/src/scss/layout_boxed.scss
+++ b/addons/web/static/src/scss/layout_boxed.scss
@@ -1,22 +1,22 @@
 .o_boxed_footer, .o_boxed_header, .o_report_layout_boxed {
     font-family: 'Lato';
-    color: @gray;
+    color: $gray;
     font-size: 12px;
 }
 .o_boxed_header {
-    border-bottom: 1px solid @gray-lighter;
+    border-bottom: 1px solid $gray-lighter;
     img {
         max-height: 100px;
     }
     h4 {
-        color: @o-we-color-text-normal;
+        color: $o-we-color-text-normal;
         font-weight: 700;
         text-transform: uppercase;
     }
 }
 .o_boxed_footer {
     white-space: nowrap;
-    border-top: 3px solid @gray;
+    border-top: 3px solid $gray;
     ul {
         margin: 4px 0;
     }
@@ -25,7 +25,7 @@
     // This is not a general rule since the id is not used in all the reports,
     // we should make a general structure for report body to use it everywhere
     #informations {
-        border: 1px solid @gray;
+        border: 1px solid $gray;
         padding-top: 10px;
         margin: 0;
     }
@@ -33,22 +33,22 @@
         text-transform: uppercase;
     }
     table {
-        border: 1px solid @gray;
+        border: 1px solid $gray;
         thead {
             tr th {
-                border-bottom: 3px solid @gray !important;
+                border-bottom: 3px solid $gray !important;
                 text-transform: uppercase;
             }
         }
         tbody {
-            color: @gray;
+            color: $gray;
             tr {
                 td {
                     border-top: none;
-                    border-right: 1px solid @gray;
+                    border-right: 1px solid $gray;
                 }
                 td:last-child {
-                    background-color: @gray-lighter;
+                    background-color: $gray-lighter;
                 }
             }
         }
@@ -59,14 +59,14 @@
             border-right: none;
         }
         tr:last-child td, tr:first-child td {
-            /*we could get rid of this rule if .border-black td would be terminated in report.less*/
+            /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
             border-top: none !important;
         }
         tr:first-child td {
             background-color: transparent;
         }
         tr:last-child td {
-            background-color: @gray;
+            background-color: $gray;
             color: #fff;
         }
     }
diff --git a/addons/web/static/src/scss/layout_clean.scss b/addons/web/static/src/scss/layout_clean.scss
index 869e1f4098f..190e5c6862a 100644
--- a/addons/web/static/src/scss/layout_clean.scss
+++ b/addons/web/static/src/scss/layout_clean.scss
@@ -10,16 +10,16 @@
 }
 .o_clean_footer {
     margin: 0 3px;
-    border-top: 3px solid @odoo-brand-primary;
+    border-top: 3px solid $odoo-brand-primary;
     h4 {
-        color: @odoo-brand-primary;
+        color: $odoo-brand-primary;
         font-weight: bolder;
     }
     .pagenumber {
         width: 35px;
         height: 35px;
-        border: 3px solid @odoo-brand-primary;
-        background-color: @odoo-brand-optional;
+        border: 3px solid $odoo-brand-primary;
+        background-color: $odoo-brand-optional;
         color: white;
         padding-top: 6px;
         text-align: center;
@@ -27,18 +27,18 @@
 }
 .o_report_layout_clean {
     h1, h2, h3 {
-        color: @odoo-brand-optional;
+        color: $odoo-brand-optional;
         font-weight: bolder;
     }
     strong {
-        color: @odoo-brand-primary;
+        color: $odoo-brand-primary;
     }
     table {
         thead {
-            color: @odoo-brand-primary;
+            color: $odoo-brand-primary;
             tr th {
                 text-align: left !important;
-                border-top: 3px solid @odoo-brand-primary !important;
+                border-top: 3px solid $odoo-brand-primary !important;
                 text-transform: uppercase;
             }
             tr th:last-child {
@@ -54,7 +54,7 @@
                 border-top: none;
             }
             tr:last-child td {
-                border-bottom: 3px solid @odoo-brand-primary;
+                border-bottom: 3px solid $odoo-brand-primary;
             }
             tr {
                 td {
@@ -74,10 +74,10 @@
             top: -20px;
             > table {
             tr:last-child td {
-                border-top: 1px solid @gray-lighter !important;
+                border-top: 1px solid $gray-lighter !important;
             }
             tr:first-child td {
-                /*we could get rid of this rule if .border-black td would be terminated in report.less*/
+                /*we could get rid of this rule if .border-black td would be terminated in report.scss*/
                 border-top: none !important;
             }
         }
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index 9106cf45a87..2c69f00e429 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -1,9 +1,9 @@
-@odoo-list-group-header-color: lighten(@odoo-brand-lightsecondary, 10%);
+$odoo-list-group-header-color: lighten($odoo-brand-lightsecondary, 10%);
 
 .o_list_view {
     position: relative;
     cursor: pointer;
-    background-color: @odoo-view-background-color;
+    background-color: $odoo-view-background-color;
     margin-bottom: 0px;
 
     &.table {
@@ -13,7 +13,7 @@
     }
 
     thead {
-        color: @odoo-main-text-color;
+        color: $odoo-main-text-color;
         border-bottom: 1px solid #cacaca;
         > tr > th {
             border-left: 1px solid #dfdfdf;
@@ -25,16 +25,16 @@
 
     tfoot {
         cursor: default;
-        color: @odoo-list-footer-color;
-        background-color: @odoo-list-footer-bg-color;
-        font-weight: @odoo-list-footer-font-weight;
+        color: $odoo-list-footer-color;
+        background-color: $odoo-list-footer-bg-color;
+        font-weight: $odoo-list-footer-font-weight;
         border-top: 2px solid #cacaca;
         border-bottom: 1px solid #cacaca;
     }
 
     .o_column_sortable {
         position: relative;
-        .user-select(none);  // Prevent unwanted selection while sorting
+        @include user-select(none);  // Prevent unwanted selection while sorting
 
         &::after {
             font-family: FontAwesome;
@@ -61,7 +61,7 @@
             opacity: 0.3;
         }
         &.o-sort-up, &.o-sort-down {
-            color: @headings-color;
+            color: $headings-color;
             &::after {
                 opacity: 1;
             }
@@ -88,7 +88,7 @@
         font-style: italic;
     }
     .text-muted {
-        color: lighten(@text-muted, 10%);
+        color: lighten($text-muted, 10%);
     }
 
     // Grouped list views
@@ -100,14 +100,14 @@
         }
         .o_group_pager {
             cursor: text;
-            .user-select(none);
+            @include user-select(none);
             text-align: right;
             padding-top: 0;
             padding-bottom: 0;
             .o_pager_previous, .o_pager_next {
-                background-color: @odoo-list-group-header-color;
+                background-color: $odoo-list-group-header-color;
                 &:hover {
-                    background-color: darken(@odoo-list-group-header-color, 10%);
+                    background-color: darken($odoo-list-group-header-color, 10%);
                 }
             }
         }
@@ -118,11 +118,11 @@
 
     tbody {
         tr:focus-within {
-            background-color: @odoo-form-lightsecondary;
+            background-color: $odoo-form-lightsecondary;
         }
         tr{
             .focussed {
-                background-color: @odoo-form-lightsecondary;
+                background-color: $odoo-form-lightsecondary;
             }
         }
     }
@@ -167,7 +167,7 @@
 
         // Field widgets override
         > .o_field_widget {
-            .o-position-absolute(0, 0, auto, 0);
+            @include o-position-absolute(0, 0, auto, 0);
             min-height: 100%;
 
             &:not(.o_field_text) {
@@ -182,11 +182,11 @@
             }
         }
         > .o_field_translate {
-            .o-position-absolute(0, 5px);
+            @include o-position-absolute(0, 5px);
             width: 16px; // to have some space on the right
         }
         .o_input {
-            padding: @table-condensed-cell-padding;
+            padding: $table-condensed-cell-padding;
             background-color: white;
 
             .o_input {
@@ -210,7 +210,7 @@
                 padding-right: 15px; // To prevent caret overlapping
             }
             > .o_dropdown_button, .o_datepicker_button {
-                .o-position-absolute(20%, 5px);
+                @include o-position-absolute(20%, 5px);
             }
         }
         .o_field_widget > .o_external_button {
diff --git a/addons/web/static/src/scss/list_view_extra.scss b/addons/web/static/src/scss/list_view_extra.scss
index 9a9413c0dd7..ec53efc6df5 100644
--- a/addons/web/static/src/scss/list_view_extra.scss
+++ b/addons/web/static/src/scss/list_view_extra.scss
@@ -5,6 +5,6 @@
     }
 
     tbody > tr.o_group_header {
-        .o-vertical-gradient(#fcfcfc, #dedede);
+        @include o-vertical-gradient(#fcfcfc, #dedede);
     }
 }
diff --git a/addons/web/static/src/scss/mimetypes.scss b/addons/web/static/src/scss/mimetypes.scss
index e4d2624dc6d..f366f7eed97 100644
--- a/addons/web/static/src/scss/mimetypes.scss
+++ b/addons/web/static/src/scss/mimetypes.scss
@@ -1,6 +1,7 @@
 .o_image {
-    .square(38px);
     display: inline-block;
+    width: 38px;
+    height: 38px;
     background-image: url('/web/static/src/img/mimetypes/unknown.svg');
     background-size: contain;
 
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index 5b74583ee41..82faabfa3bc 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -13,8 +13,8 @@
             }
 
             .o_modal_header {
-                .o-webclient-padding(@top: 10px, @bottom: 10px);
-                .clearfix();
+                @include o-webclient-padding($top: 10px, $bottom: 10px);
+                @include clearfix;
 
                 .o_search_options {
                     display: inline-block;
@@ -31,7 +31,7 @@
     }
 
 
-    @media (min-width: @screen-sm-min) {
+    @media (min-width: $screen-sm-min) {
         .modal-dialog {
             height: 100%;
             padding: 30px 0;
@@ -39,11 +39,11 @@
 
             .modal-content {
                 max-height: 100%;
-                .o-flex-display();
-                .o-flex-flow(column, nowrap);
+                @include o-flex-display;
+                @include o-flex-flow(column, nowrap);
 
                 .modal-header, .modal-footer {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                 }
 
                 .modal-body {
@@ -54,15 +54,15 @@
 
                     &.o_dialog_error {
                         overflow: visible;
-                        .o-flex-display();
-                        .o-flex-flow(column, nowrap);
+                        @include o-flex-display;
+                        @include o-flex-flow(column, nowrap);
 
                         > .alert, > button {
-                            .o-flex(0, 0, auto);
+                            @include o-flex(0, 0, auto);
                         }
 
                         > .o_error_detail {
-                            .o-flex(1, 1, auto);
+                            @include o-flex(1, 1, auto);
                             min-height: 0;
                             overflow: auto;
                         }
@@ -74,10 +74,10 @@
 }
 
 // Temporary fix for modals which are not instantiated thanks to the Dialog
-// JS classes (deprecated case) (see bootstrap_overridden.less) + Frontend.
+// JS classes (deprecated case) (see bootstrap_overridden.scss) + Frontend.
 //
 // TODO the following code was disabled because it is saas-incompatible
 //
 // :not(body) > .modal {
-//     z-index: @zindex-modal-background + 1;
+//     z-index: $zindex-modal-background + 1;
 // }
diff --git a/addons/web/static/src/scss/model_field_selector.scss b/addons/web/static/src/scss/model_field_selector.scss
index aee5bd17867..e75204f6098 100644
--- a/addons/web/static/src/scss/model_field_selector.scss
+++ b/addons/web/static/src/scss/model_field_selector.scss
@@ -3,9 +3,9 @@
     position: relative;
 
     > .o_field_selector_value {
-        .o-flex-display();
-        .o-flex-flow(row, wrap);
-        .o-align-items(center);
+        @include o-flex-display;
+        @include o-flex-flow(row, wrap);
+        @include o-align-items(center);
         height: 100%;
         min-height: 20px; // needed when there is no value in it and used standalone
         &:active, &:focus, &:active:focus {
@@ -14,34 +14,34 @@
 
         > .o_field_selector_chain_part {
             padding: 0px 1px;
-            border: 1px solid darken(@odoo-brand-lightsecondary, 10%);
-            background: @odoo-brand-lightsecondary;
+            border: 1px solid darken($odoo-brand-lightsecondary, 10%);
+            background: $odoo-brand-lightsecondary;
             margin-bottom: 1px;
         }
         > i {
-            .o-align-self(center);
+            @include o-align-self(center);
             margin: 0 2px;
             font-size: 10px;
         }
     }
     > .o_field_selector_controls {
-        .o-position-absolute(0, 0, 1px);
-        .o-flex-display();
-        .o-align-items(center);
+        @include o-position-absolute(0, 0, 1px);
+        @include o-flex-display;
+        @include o-align-items(center);
         cursor: pointer;
     }
 
     &.o_edit_mode {
         > .o_field_selector_controls::after {
-            .o-caret-down();
+            @include o-caret-down;
         }
 
         > .o_field_selector_popover {
-            @o-field-selector-arrow-height: 7px;
-            .o-position-absolute(@top: 100%, @left: 0);
+            $o-field-selector-arrow-height: 7px;
+            @include o-position-absolute($top: 100%, $left: 0);
             z-index: 1051;
             width: 265px;
-            margin-top: @o-field-selector-arrow-height;
+            margin-top: $o-field-selector-arrow-height;
             background: white;
             box-shadow: 0 3px 10px rgba(0,0,0,.4);
 
@@ -51,38 +51,38 @@
 
             .o_field_selector_popover_header {
                 color: white;
-                background: @brand-primary;
+                background: $brand-primary;
                 font-weight: bold;
                 padding: 5px 0 5px 0.4em;
 
                 .o_field_selector_title {
                     width: 100%;
-                    .o-text-overflow();
+                    @include o-text-overflow;
                     padding: 0px 35px;
                     text-align: center;
                 }
                 .o_field_selector_popover_option {
-                    .o-position-absolute(@top: 0);
+                    @include o-position-absolute($top: 0);
                     padding: 7px 8px 8px 6px;
 
                     &.o_prev_page {
                         left: 0;
-                        border-right: 1px solid darken(@brand-primary, 10%);
+                        border-right: 1px solid darken($brand-primary, 10%);
                     }
                     &.o_field_selector_close {
                         right: 0;
-                        border-left: 1px solid darken(@brand-primary, 10%);
+                        border-left: 1px solid darken($brand-primary, 10%);
                     }
                     &:hover {
-                        background: darken(@brand-primary, 10%);
+                        background: darken($brand-primary, 10%);
                     }
                 }
                 &:before {
-                    .o-position-absolute(@top: -@o-field-selector-arrow-height, @left: @o-field-selector-arrow-height);
+                    @include o-position-absolute($top: -$o-field-selector-arrow-height, $left: $o-field-selector-arrow-height);
                     content: "";
-                    border-left: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
-                    border-right: @o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
-                    border-bottom: @o-field-selector-arrow-height solid @brand-primary;
+                    border-left: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
+                    border-right: $o-field-selector-arrow-height solid rgba(0, 0, 0, 0);
+                    border-bottom: $o-field-selector-arrow-height solid $brand-primary;
                 }
             }
             .o_field_selector_popover_body {
@@ -109,16 +109,16 @@
                             font-size: 12px;
                         }
                         .o_field_selector_relation_icon {
-                            .o-position-absolute(@top: 0, @right: 0, @bottom: 0);
-                            .o-flex-display();
-                            .o-align-items(center);
+                            @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
+                            @include o-flex-display;
+                            @include o-align-items(center);
                             padding: 10px;
                         }
                     }
                 }
             }
             .o_field_selector_popover_footer {
-                background: @brand-primary;
+                background: $brand-primary;
                 padding: 5px 0.4em;
 
                 > input {
diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index cf14f9a8615..8273c30182d 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -1,26 +1,26 @@
 
 .o_main_navbar {
     position: relative;
-    height: @odoo-navbar-height;
-    border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
-    background-color: @odoo-brand-primary;
+    height: $odoo-navbar-height;
+    border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg;
+    background-color: $odoo-brand-primary;
     color: white;
 
     > a, > button {
         float: left;
-        height: @odoo-navbar-height;
+        height: $odoo-navbar-height;
         border: none;
-        padding: 0 @odoo-horizontal-padding - 4px 0 @odoo-horizontal-padding;
-        line-height: @odoo-navbar-height;
+        padding: 0 $odoo-horizontal-padding - 4px 0 $odoo-horizontal-padding;
+        line-height: $odoo-navbar-height;
         background-color: transparent;
         text-align: center;
         color: inherit;
 
         font-size: 18px;
-        .user-select(none);
+        @include user-select(none);
 
         &:hover, &:focus {
-            background-color: @odoo-navbar-inverse-link-hover-bg;
+            background-color: $odoo-navbar-inverse-link-hover-bg;
             color: inherit;
         }
         &:focus, &:active, &:focus:active {
@@ -32,16 +32,16 @@
         display: block;
         float: left;
         margin-right: 35px;
-        .user-select(none);
+        @include user-select(none);
         color: white;
         font-size: 22px;
         font-weight: 500;
-        line-height: @odoo-navbar-height;
+        line-height: $odoo-navbar-height;
 
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: $screen-xs-max) {
             float: none;
             margin: 0;
-            border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
+            border-bottom: 1px solid $odoo-navbar-inverse-link-hover-bg;
             color: transparent;
         }
     }
@@ -64,13 +64,13 @@
 
             > a {
                 display: block;
-                height: @odoo-navbar-height;
+                height: $odoo-navbar-height;
                 padding: 0 10px;
                 color: white;
-                line-height: @odoo-navbar-height;
+                line-height: $odoo-navbar-height;
 
                 &:hover {
-                    background-color: @odoo-navbar-inverse-link-hover-bg;
+                    background-color: $odoo-navbar-inverse-link-hover-bg;
                 }
 
                 &:focus, &:active, &:focus:active {
@@ -80,7 +80,7 @@
 
             &.o_extra_menu_items {
                 > a {
-                    width: @odoo-navbar-height;
+                    width: $odoo-navbar-height;
                     text-align: center;
                 }
                 &.open > ul {
@@ -88,12 +88,12 @@
 
                     > li {
                         > a {
-                            background-color: @odoo-brand-primary;
+                            background-color: $odoo-brand-primary;
                             color: white;
-                            border-bottom: 1px solid @odoo-brand-lightsecondary;
+                            border-bottom: 1px solid $odoo-brand-lightsecondary;
 
                             &.dropdown-toggle {
-                                background-color: lighten(@odoo-brand-primary, 15%);
+                                background-color: lighten($odoo-brand-primary, 15%);
                                 pointer-events: none; // hack to prevent clicking on it because dropdown always opened
                             }
                         }
@@ -125,36 +125,34 @@
         overflow: auto;
         margin-top: 0;
 
-        .o-menu-indentation(@index) when (@index < 6) {
-            > li.o_menu_header_lvl_@{index}, > li .o_menu_entry_lvl_@{index} {
-                padding-left: @odoo-dropdown-hpadding + (@index - 2)*12px;
+        @for $index from 3 through 5 {
+            > li.o_menu_header_lvl_#{$index}, > li .o_menu_entry_lvl_#{$index} {
+                padding-left: $odoo-dropdown-hpadding + ($index - 2)*12px;
             }
-            .o-menu-indentation(@index + 1);
         }
-        .o-menu-indentation(3);
     }
 
     .open .dropdown-toggle {
-        background-color: @odoo-navbar-inverse-link-hover-bg;
+        background-color: $odoo-navbar-inverse-link-hover-bg;
     }
     .o_user_menu {
         margin-left: 6px;
 
         > a {
-            padding-right: @odoo-horizontal-padding;
+            padding-right: $odoo-horizontal-padding;
         }
 
         .oe_topbar_avatar {
             height: 17px;
-            .o-transform(translateY(-2px));
+            @include o-transform(translateY(-2px));
         }
     }
 
-    @media (max-width: @screen-xs-max) {
-        .o-transition(height, 200ms, linear);
+    @media (max-width: $screen-xs-max) {
+        @include o-transition(height, 200ms, linear);
 
         position: relative;
-        height: @odoo-navbar-height;
+        height: $odoo-navbar-height;
         overflow: hidden;
 
         > ul {
@@ -188,15 +186,15 @@
             }
 
             &.o_menu_systray {
-                .o-position-absolute(0px, @odoo-navbar-height, auto, @odoo-navbar-height);
-                height: @odoo-navbar-height;
+                @include o-position-absolute(0px, $odoo-navbar-height, auto, $odoo-navbar-height);
+                height: $odoo-navbar-height;
                 text-align: right;
 
                 > li {
                     display: inline-block;
 
                     &.open .dropdown-menu {
-                        .o-position-absolute(@odoo-navbar-height, 0, 0, 0);
+                        @include o-position-absolute($odoo-navbar-height, 0, 0, 0);
                         position: fixed;
                         width: auto;
                     }
@@ -210,7 +208,7 @@
     }
 }
 
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     body.o_mobile_menu_opened {
         overflow: hidden;
         height: 100%;
@@ -223,7 +221,7 @@
     }
 }
 
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
      .o_switch_company_menu > .dropdown-menu {
          padding-top: 0px;
          li.bg-info {
diff --git a/addons/web/static/src/scss/pivot_view.scss b/addons/web/static/src/scss/pivot_view.scss
index d7dfdd45de5..83b17a4e751 100644
--- a/addons/web/static/src/scss/pivot_view.scss
+++ b/addons/web/static/src/scss/pivot_view.scss
@@ -5,36 +5,36 @@
     // items corresponding to the clicked cell
     &.o_enable_linking {
         .o_pivot_cell_value:hover {
-            color: @odoo-brand-optional;
+            color: $odoo-brand-optional;
             cursor: pointer;
         }
     }
 
     table {
-        background-color: @odoo-view-background-color;
+        background-color: $odoo-view-background-color;
         width: auto;  // bootstrap override
 
         th {
             font-weight: normal;  // bootstrap override
-            background-color: lighten(@odoo-brand-secondary, 40%);
+            background-color: lighten($odoo-brand-secondary, 40%);
         }
 
-        .o-pivot-header-cell() {
-            background-color: lighten(@odoo-brand-secondary, 40%);
+        @mixin o-pivot-header-cell {
+            background-color: lighten($odoo-brand-secondary, 40%);
             cursor: pointer;
             white-space: nowrap;
-            .user-select(none);
+            @include user-select(none);
             &:hover {
-                background-color: lighten(@odoo-brand-secondary, 30%);
+                background-color: lighten($odoo-brand-secondary, 30%);
             }
         }
 
         .o_pivot_measure_row {
-            .o-pivot-header-cell;
+            @include o-pivot-header-cell;
         }
 
         .o_pivot_header_cell_closed {
-            .o-pivot-header-cell;
+            @include o-pivot-header-cell;
             &::before {
                 font-family: FontAwesome;
                 content: "";
@@ -43,7 +43,7 @@
         }
 
         .o_pivot_header_cell_opened {
-            .o-pivot-header-cell;
+            @include o-pivot-header-cell;
             &::before {
                 font-family: FontAwesome;
                 content: "";
@@ -52,18 +52,18 @@
         }
 
         .o_pivot_measure_row_sorted_asc::after {
-            .o-caret-down;
+            @include o-caret-down;
             margin-left: 5px;
         }
 
         .o_pivot_measure_row_sorted_desc::after {
-            .o-caret-up;
+            @include o-caret-up;
             margin-left: 5px;
         }
     }
 
     .o_pivot_field_selection::after {
-        .o-caret-right;
+        @include o-caret-right;
         position: absolute;
         right: 6px;
         top: 9px;
@@ -74,5 +74,5 @@
 // Control panel buttons
 // ------------------------------------------------------------------
 .o_pivot_measures_list {
-    .o-selected-li;
+    @include o-selected-li;
 }
\ No newline at end of file
diff --git a/addons/web/static/src/scss/progress_bar.scss b/addons/web/static/src/scss/progress_bar.scss
index 25a89d15ecf..e4322845c45 100644
--- a/addons/web/static/src/scss/progress_bar.scss
+++ b/addons/web/static/src/scss/progress_bar.scss
@@ -14,16 +14,16 @@
         height: 15px;
         vertical-align: middle;
 
-        border: 1px solid lighten(@odoo-brand-secondary, 25%);
+        border: 1px solid lighten($odoo-brand-secondary, 25%);
         overflow: hidden;
 
         background-color: white;
         &.o_progress_overflow {
-            background-color: @odoo-brand-secondary;
+            background-color: $odoo-brand-secondary;
         }
 
         .o_progressbar_complete {
-            background-color: @odoo-brand-optional;
+            background-color: $odoo-brand-optional;
             height: 100%;
         }
     }
diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss
index b86387b18ca..102b76f02f8 100644
--- a/addons/web/static/src/scss/rainbow.scss
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -1,42 +1,42 @@
 /**************  rainbow  *****************/
 
 // Variables
-@reward-size: 400px;
-@reward-size-mobile: 300px;
-@reward-text-color: #727880;
-@reward-base-time: 1.4s;
+$reward-size: 400px;
+$reward-size-mobile: 300px;
+$reward-text-color: #727880;
+$reward-base-time: 1.4s;
 
 // o_reward
 .o_reward {
     will-change: transform;
-    z-index: @zindex-modal;
+    z-index: $zindex-modal;
     padding: 50px;
-    margin: -5% auto 0 -(@reward-size / 2);
-    @media (max-width: @screen-xs-max) {
-        margin: -5% auto 0 -(@reward-size-mobile / 2);
+    margin: -5% auto 0 -($reward-size / 2);
+    @media (max-width: $screen-xs-max) {
+        margin: -5% auto 0 -($reward-size-mobile / 2);
     }
     background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
     background-image: -o-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
     background-image: radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
 
-    .o-animation(reward-fading, @reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
-    .o-position-absolute(20%, auto, auto, 50%);
-    .size(@reward-size, @reward-size);
-    @media (max-width: @screen-xs-max) {
-        .size(@reward-size-mobile, @reward-size-mobile);
+    @include o-animation(reward-fading, $reward-base-time * 0.5, ease-in-out, 0s, 1, normal, forwards);
+    @include o-position-absolute(20%, auto, auto, 50%);
+    @include size($reward-size, $reward-size);
+    @media (max-width: $screen-xs-max) {
+        @include size($reward-size-mobile, $reward-size-mobile);
     }
 
     &.o_reward_fading {
         display: block;
-        .o-animation(reward-fading-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
+        @include o-animation(reward-fading-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
 
         .o_reward_face_group {
-            .o-animation(reward-jump-reverse, (@reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
+            @include o-animation(reward-jump-reverse, ($reward-base-time * 0.4), ease-in-out, 0s, 1, normal, forwards);
         }
 
         .o_reward_rainbow {
             path {
-                .o-animation(reward-rainbow-reverse, (@reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
+                @include o-animation(reward-rainbow-reverse, ($reward-base-time * 0.5), ease-out, 0s, 1, normal, forwards);
             }
         }
 
@@ -53,15 +53,15 @@
             fill: none;
             stroke-linecap: round;
             stroke-width: 21px;
-            .o-animation(reward-rainbow, (@reward-base-time ), ease-out, 0s, 1, normal, forwards);
+            @include o-animation(reward-rainbow, ($reward-base-time ), ease-out, 0s, 1, normal, forwards);
         }
     }
 
     .o_reward_face_group {
         transform-origin: center;
-        .o-animation(reward-jump, @reward-base-time * 0.8, ease-in-out);
-        .o-position-absolute(6%, 0, 0, 0);
-        .size(100%, 60%);
+        @include o-animation(reward-jump, $reward-base-time * 0.8, ease-in-out);
+        @include o-position-absolute(6%, 0, 0, 0);
+        @include size(100%, 60%);
     }
 
     .o_reward_face {
@@ -70,25 +70,25 @@
         position: relative;
         border-radius: 100%;
         background: center center / contain no-repeat;
-        .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
-        .size(34%, 56.67%);
+        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+        @include size(34%, 56.67%);
     }
 
     .o_reward_stars {
         display: block;
-        .size(@reward-size * 0.75, @reward-size / 2);
-        @media (max-width: @screen-xs-max) {
-            .size(@reward-size-mobile * 0.75, @reward-size-mobile / 2);
+        @include size($reward-size * 0.75, $reward-size / 2);
+        @media (max-width: $screen-xs-max) {
+            @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
         }
-        .o-position-absolute(18%, 7%);
+        @include o-position-absolute(18%, 7%);
 
         svg {
             transform-origin: center center;
-            .o-position-absolute(28%, @left:3%);
-            .o-animation(reward-stars, @reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
+            @include o-position-absolute(28%, $left:3%);
+            @include o-animation(reward-stars, $reward-base-time, ease-in-out, 0s, infinite, alternate-reverse);
 
             &.star2, &.star4 {
-                .o-animation(reward-stars, (@reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
+                @include o-animation(reward-stars, ($reward-base-time*1.2), ease-in-out, 0s, infinite, alternate);
             }
 
             &.star2 {
@@ -112,8 +112,8 @@
     .o_reward_thumbup {
         width: 40px;
         display: block;
-        .o-animation(reward-scale, @reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
-        .o-position-absolute(63%, auto, auto, 65%);
+        @include o-animation(reward-scale, $reward-base-time * 0.5, ease-in-out, 0s, infinite, alternate);
+        @include o-position-absolute(63%, auto, auto, 65%);
     }
 
     .o_reward_msg_container {
@@ -123,15 +123,15 @@
         margin-left: 15%;
 
         // Translate before animate
-        .o-transform(translateY(5px));
+        @include o-transform(translateY(5px));
 
-        .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate-reverse);
-        .o-position-absolute(85%, auto, auto, 0%);
+        @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate-reverse);
+        @include o-position-absolute(85%, auto, auto, 0%);
 
         .o_reward_thumb_right {
             height: 40px;
             z-index: 1;
-            .o-position-absolute(0, auto, auto, 16%);
+            @include o-position-absolute(0, auto, auto, 16%);
         }
 
         .o_reward_msg {
@@ -153,21 +153,21 @@
             position: relative;
             font-family: sans-serif;
             text-align: left;
-            color: @reward-text-color;
+            color: $reward-text-color;
         }
 
         .o_reward_shadow_container {
-            .o-transform(~"translateY(0px) rotateZ(0)");
-            .o-animation(reward-float, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
+            @include o-transform(translateY(0px) rotateZ(0));
+            @include o-animation(reward-float, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
         }
 
         .o_reward_shadow {
-            .size(100%, 12px);
+            @include size(100%, 12px);
             background-color: #e7eaf0;
             border-radius: 100%;
-            .o-transform(~"scale(0.8) rotateZ(0)");
-            .o-animation(reward-scale, @reward-base-time, ease-in-out, @reward-base-time, infinite, alternate);
-            .o-position-absolute(auto, auto, -40px, 0);
+            @include o-transform(scale(0.8) rotateZ(0));
+            @include o-animation(reward-scale, $reward-base-time, ease-in-out, $reward-base-time, infinite, alternate);
+            @include o-position-absolute(auto, auto, -40px, 0);
         }
     }
 }
@@ -189,25 +189,25 @@
 
 @keyframes reward-jump {
     0% {
-        .o-transform(~"scale(0.5)");
+        @include o-transform(scale(0.5));
     }
     50% {
-        .o-transform(~"scale(1.05)");
+        @include o-transform(scale(1.05));
     }
     to {
-        .o-transform(~"scale(1)");
+        @include o-transform(scale(1));
     }
 }
 
 @keyframes reward-jump-reverse {
     0% {
-        .o-transform(~"scale(1)");
+        @include o-transform(scale(1));
     }
     50% {
-        .o-transform(~"scale(1.05)");
+        @include o-transform(scale(1.05));
     }
     to {
-        .o-transform(~"scale(0.5)");
+        @include o-transform(scale(0.5));
     }
 }
 
@@ -228,30 +228,30 @@
 
 @keyframes reward-float {
     from {
-        .o-transform(~"translateY(0px)");
+        @include o-transform(translateY(0px));
     }
     to {
-        .o-transform(~"translateY(5px)");
+        @include o-transform(translateY(5px));
     }
 }
 
 @keyframes reward-stars {
     from {
-        .o-transform(~"scale(0.3) rotate(0deg)");
+        @include o-transform(scale(0.3) rotate(0deg));
     }
     50% {
-        .o-transform(~"scale(1.0) rotate(20deg)");
+        @include o-transform(scale(1.0) rotate(20deg));
     }
     to {
-        .o-transform(~"scale(0.3) rotate(80deg)");
+        @include o-transform(scale(0.3) rotate(80deg));
     }
 }
 
 @keyframes reward-scale {
     from {
-        .o-transform(~"scale(0.8)");
+        @include o-transform(scale(0.8));
     }
     to {
-        .o-transform(~"scale(1.0)");
+        @include o-transform(scale(1.0));
     }
 }
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 0261806631a..5f40760c2c6 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -1,55 +1,55 @@
-.o-search-options-dropdown-custom-li() {
+@mixin o-search-options-dropdown-custom-li {
     margin: 3px 25px;
     width: auto;
     max-width: 250px;
 }
 
 .o_searchview {
-    .o-flex-display();
-    .o-flex-flow(row, wrap);
-    .o-align-items(flex-end);
+    @include o-flex-display;
+    @include o-flex-flow(row, wrap);
+    @include o-align-items(flex-end);
     position: relative;
     padding: 0 20px 1px 0;
 
     .o_searchview_facet {
-        @o-searchview-facet-remove-width: 18px;
+        $o-searchview-facet-remove-width: 18px;
 
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
         max-width: 100%;
-        .o-flex-display();
+        @include o-flex-display;
         position: relative;
         margin: 1px 3px 0 0;
 
         .o_searchview_facet_label {
-            .o-flex(0, 0, auto);
-            .o-text-overflow();
+            @include o-flex(0, 0, auto);
+            @include o-text-overflow;
             padding: 0 3px;
             color: white;
 
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex-display;
+            @include o-align-items(center);
         }
-            
+
         .o_facet_values {
-            padding: 0 @o-searchview-facet-remove-width 0 5px;
+            padding: 0 $o-searchview-facet-remove-width 0 5px;
             .o_facet_values_sep {
                 font-style: italic;
             }
         }
         .o_facet_remove {
-            .o-flex(0, 0, auto);
-            .o-flex-display();
-            .o-justify-content(center);
-            .o-align-items(center);
-            .o-position-absolute(0, 0, 0);
-            width: @o-searchview-facet-remove-width;
+            @include o-flex(0, 0, auto);
+            @include o-flex-display;
+            @include o-justify-content(center);
+            @include o-align-items(center);
+            @include o-position-absolute(0, 0, 0);
+            width: $o-searchview-facet-remove-width;
             cursor: pointer;
         }
     }
 
     .o_searchview_input {
         width: 100px;
-        .o-flex(1, 0, auto);
+        @include o-flex(1, 0, auto);
     }
 
     .o_searchview_more {
@@ -58,7 +58,7 @@
     }
 
     .o_searchview_autocomplete {
-        .o-position-absolute(100%, @left: auto);
+        @include o-position-absolute(100%, $left: auto);
         width: 100%;
 
         li {
@@ -75,14 +75,14 @@
                     background-color: inherit;
                 }
                 &.o-expand, &.o-expanded { // caret
-                    .o-position-absolute(@left: 6px);
+                    @include o-position-absolute($left: 6px);
                     padding: 3px;
                 }
                 &.o-expand:before {
-                    .o-caret-right;
+                    @include o-caret-right;
                 }
                 &.o-expanded:before {
-                    .o-caret-down;
+                    @include o-caret-down;
                 }
             }
         }
@@ -101,18 +101,18 @@
 
     display: inline-block;
     cursor: pointer;
-    .user-select(none);  // Prevent text selection when toggling the dropdowns
+    @include user-select(none);  // Prevent text selection when toggling the dropdowns
     > a { // dropdown togglers
-        color: @odoo-main-text-color;
+        color: $odoo-main-text-color;
         &:hover {
             text-decoration: none;
             font-weight: bold;
-            color: darken(@odoo-main-text-color, 10%);
+            color: darken($odoo-main-text-color, 10%);
         }
     }
     &.open > a {
         font-weight: bold;
-        color: darken(@odoo-main-text-color, 10%);
+        color: darken($odoo-main-text-color, 10%);
     }
 }
 
@@ -122,33 +122,33 @@
     .o_closed_menu {
         position: relative;
         a:before {
-            .o-caret-right;
-            .o-position-absolute(@top: 50%, @left: 10px);
-            margin-top: (-@caret-width-base);
+            @include o-caret-right;
+            @include o-position-absolute($top: 50%, $left: 10px);
+            margin-top: (-$caret-width-base);
         }
     }
     .o_open_menu {
         position: relative;
         a:before {
-            .o-caret-down;
-            .o-position-absolute(@top: 50%, @left: 10px);
-            margin-top: (-@caret-width-base);
+            @include o-caret-down;
+            @include o-position-absolute($top: 50%, $left: 10px);
+            margin-top: (-$caret-width-base);
         }
     }
 
     // Filters
     .o_filters_menu {
-        .o-selected-li;
-        
-        max-height: ~"calc(100vh - 125px)";
+        @include o-selected-li;
+
+        max-height: calc(100vh - 125px);
         overflow: auto;
 
         .o_filter_condition {
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
             margin-bottom: 8px;
             .o_or_filter { // or between conditions
                 display: none;  // hidden for the first condition
-                .o-position-absolute(@top: 7px, @left: -18px);
+                @include o-position-absolute($top: 7px, $left: -18px);
             }
         }
         .o_filter_condition + .o_filter_condition {
@@ -161,31 +161,31 @@
         }
         .o_searchview_extended_prop_value { // date fields: datepicker position
             .datepickerbutton {
-                .o-position-absolute(3px, -20px);
+                @include o-position-absolute(3px, -20px);
                 cursor: pointer;
             }
         }
         .o_searchview_extended_delete_prop { // delete condition button position
-            .o-position-absolute(3px, -18px);
+            @include o-position-absolute(3px, -18px);
             cursor: pointer;
         }
         .o_add_filter_menu { // apply and add buttons
             display: none;  // Needed by the webclient
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
         }
     }
 
     // Group By
     .o_group_by_menu {
-        .o-selected-li;
-        
-        max-height: ~"calc(100vh - 125px)";
+        @include o-selected-li;
+
+        max-height: calc(100vh - 125px);
         overflow: auto;
 
         .divider {display: none;} // hide the divider by default (no group)
         .o_add_group { // add button
             display: none;  // Needed by the webclient
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
         }
     }
 
@@ -193,15 +193,15 @@
     .o_favorites_menu {
         max-height: 75vh;
         overflow-y: auto;
-        .o-selected-li;
-        
-        max-height: ~"calc(100vh - 125px)";
+        @include o-selected-li;
+
+        max-height: calc(100vh - 125px);
         overflow: auto;
 
         .divider {display: none;} // hide the divider by default (no favorite)
         .o-searchview-custom-private, .o-searchview-custom-public {
             .o-remove-filter {
-                .o-position-absolute(50%, 12px);
+                @include o-position-absolute(50%, 12px);
                 margin-top: -6px;
                 cursor: pointer;
             }
@@ -214,7 +214,7 @@
         }
         .o_save_name { // save button
             display: none; // hidden by default
-            .o-search-options-dropdown-custom-li;
+            @include o-search-options-dropdown-custom-li;
         }
     }
 }
diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss
index 9c263976e4d..e5b378e6e41 100644
--- a/addons/web/static/src/scss/search_view_extra.scss
+++ b/addons/web/static/src/scss/search_view_extra.scss
@@ -1,21 +1,21 @@
 .o_searchview {
     background-color: white;
     border: 1px solid #ccc;
-    border-radius: @border-radius-base;
+    border-radius: $border-radius-base;
     padding: 1px 25px 3px 5px;
 
     .o_searchview_facet {
-        border: 1px solid @gray-light;
-        background: lighten(@odoo-brand-primary, 35%);
+        border: 1px solid $gray-light;
+        background: lighten($odoo-brand-primary, 35%);
 
         .o_searchview_facet_label {
-            background-color: @gray-light;
+            background-color: $gray-light;
         }
 
         .o_facet_remove {
-            color: @gray-light;
+            color: $gray-light;
             &:hover {
-                color: @gray;
+                color: $gray;
             }
         }
     }
@@ -25,10 +25,10 @@
         padding: 4px 0 0 0;
     }
     .o_searchview_more {
-        .o-position-absolute(@top: 6px, @right: 5px);
+        @include o-position-absolute($top: 6px, $right: 5px);
     }
     .o_searchview_autocomplete li.o-selection-focus {
-        background-color: @odoo-brand-primary;
+        background-color: $odoo-brand-primary;
         > a {
             color: white;
         }
@@ -38,6 +38,6 @@
 // Search options: inputs and selects style
 .o_search_options {
     input[type="text"], select {
-        .form-control();
+        @extend .form-control; // FIXME was a mixin before scss convertion
     }
 }
diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss
index e071bf04a40..79fb0b60fb7 100644
--- a/addons/web/static/src/scss/tooltip.scss
+++ b/addons/web/static/src/scss/tooltip.scss
@@ -7,17 +7,17 @@
     .tooltip-inner {
         max-width: 300px; // fallback for browsers which do not support "vw" unit
         max-width: 100vw;
-        background-color: @odoo-tooltip-background-color;
-        color: @odoo-tooltip-color;
-        border-radius: @border-radius-base;
-        box-shadow: 0px 0px 1px 1px @odoo-brand-secondary;
+        background-color: $odoo-tooltip-background-color;
+        color: $odoo-tooltip-color;
+        border-radius: $border-radius-base;
+        box-shadow: 0px 0px 1px 1px $odoo-brand-secondary;
 
         padding: 5px;
 
         text-align: left;
 
         .oe_tooltip_string {
-            background-color: @odoo-brand-primary;
+            background-color: $odoo-brand-primary;
             color: white;
             font-weight: bold;
             padding: 5px;
@@ -42,18 +42,18 @@
     }
     &.top, &.top-left, &.top-right {
         .tooltip-arrow {
-            border-top-color: @odoo-tooltip-arrow-color!important;
+            border-top-color: $odoo-tooltip-arrow-color!important;
         }
     }
     &.bottom, &.bottom-left, &.bottom-right {
         .tooltip-arrow {
-            border-bottom-color: @odoo-tooltip-arrow-color!important;
+            border-bottom-color: $odoo-tooltip-arrow-color!important;
         }
     }
     &.left .tooltip-arrow {
-        border-left-color: @odoo-tooltip-arrow-color!important;
+        border-left-color: $odoo-tooltip-arrow-color!important;
     }
     &.right .tooltip-arrow {
-        border-right-color: @odoo-tooltip-arrow-color!important;
+        border-right-color: $odoo-tooltip-arrow-color!important;
     }
 }
diff --git a/addons/web/static/src/scss/ui.scss b/addons/web/static/src/scss/ui.scss
index 0a387331031..8911b4f10ab 100644
--- a/addons/web/static/src/scss/ui.scss
+++ b/addons/web/static/src/scss/ui.scss
@@ -3,9 +3,9 @@
 }
 
 .o_text_overflow {
-    .o-text-overflow();
+    @include o-text-overflow;
 }
 
 .ui-autocomplete {
-    z-index: @zindex-modal + 1;
+    z-index: $zindex-modal + 1;
 }
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index e89da21b4f6..6db15976bd5 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -5,53 +5,53 @@
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------
-.o-webclient-padding(@top: 0px, @right: @odoo-horizontal-padding, @bottom: 0px, @left: @odoo-horizontal-padding) {
-    padding-top: @top;
-    padding-right: @right;
-    padding-bottom: @bottom;
-    padding-left: @left;
+@mixin o-webclient-padding($top: 0px, $right: $odoo-horizontal-padding, $bottom: 0px, $left: $odoo-horizontal-padding) {
+    padding-top: $top;
+    padding-right: $right;
+    padding-bottom: $bottom;
+    padding-left: $left;
 }
 
 // ------------------------------------------------------------------
 // Caret
 // ------------------------------------------------------------------
-.utils-caret-boilerplate() {
+@mixin utils-caret-boilerplate {
     content: "";
     display: inline-block;
     width: 0;
     height: 0;
     vertical-align: middle;
 }
-.o-caret-down(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
+@mixin o-caret-down($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
     border-bottom: 0;
-    border-left: @caret-width solid transparent;
-    border-right: @caret-width solid transparent;
-    border-top: @caret-width solid;
+    border-left: $caret-width solid transparent;
+    border-right: $caret-width solid transparent;
+    border-top: $caret-width solid;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-.o-caret-up(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
-    border-bottom: @caret-width solid;
-    border-left: @caret-width solid transparent;
-    border-right: @caret-width solid transparent;
+@mixin o-caret-up($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid;
+    border-left: $caret-width solid transparent;
+    border-right: $caret-width solid transparent;
     border-top: 0;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-.o-caret-left(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
-    border-bottom: @caret-width solid transparent;
+@mixin o-caret-left($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid transparent;
     border-left: 0;
-    border-right: @caret-width solid;
-    border-top: @caret-width solid transparent;
+    border-right: $caret-width solid;
+    border-top: $caret-width solid transparent;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
-.o-caret-right(@caret-width: @caret-width-base) {
-    .utils-caret-boilerplate;
-    border-bottom: @caret-width solid transparent;
-    border-left: @caret-width solid;
+@mixin o-caret-right($caret-width: $caret-width-base) {
+    @include utils-caret-boilerplate;
+    border-bottom: $caret-width solid transparent;
+    border-left: $caret-width solid;
     border-right: 0;
-    border-top: @caret-width solid transparent;
+    border-top: $caret-width solid transparent;
     -moz-transform: scale(0.9999); // Smooth the caret on firefox
 }
 
@@ -59,7 +59,7 @@
 // Vendor prefixes
 // ------------------------------------------------------------------
 // Flex
-.o-flex-display() {
+@mixin o-flex-display {
     display: -ms-flexbox;
     display: -moz-box;
     display: -webkit-box;
@@ -67,7 +67,7 @@
 
     display: flex;
 }
-.o-inline-flex-display() {
+@mixin o-inline-flex-display {
     display: -ms-inline-flexbox;
     display: -moz-inline-box;
     display: -webkit-inline-box;
@@ -75,66 +75,66 @@
 
     display: inline-flex;
 }
-.o-flex-flow(@direction, @wrap) {
-    -ms-flex-flow: @direction @wrap;
-    -moz-flex-flow: @direction @wrap;
-    -webkit-flex-flow: @direction @wrap;
+@mixin o-flex-flow($direction, $wrap) {
+    -ms-flex-flow: $direction $wrap;
+    -moz-flex-flow: $direction $wrap;
+    -webkit-flex-flow: $direction $wrap;
 
-    flex-flow: @direction @wrap;
+    flex-flow: $direction $wrap;
 }
-.o-flex(@grow, @schrink, @basis) {
-    -ms-flex: @grow @schrink @basis;
-    -moz-flex: @grow @schrink @basis;
-    -webkit-box-flex: @grow;
-    -webkit-flex: @grow @schrink @basis;
+@mixin o-flex($grow, $schrink, $basis) {
+    -ms-flex: $grow $schrink $basis;
+    -moz-flex: $grow $schrink $basis;
+    -webkit-box-flex: $grow;
+    -webkit-flex: $grow $schrink $basis;
 
-    flex: @grow @schrink @basis;
+    flex: $grow $schrink $basis;
 }
-.o-justify-content(@justify) {
-    -moz-justify-content: @justify;
-    -webkit-justify-content: @justify;
+@mixin o-justify-content($justify) {
+    -moz-justify-content: $justify;
+    -webkit-justify-content: $justify;
 
-    justify-content: @justify;
+    justify-content: $justify;
 }
-.o-align-content(@align) {
-    -webkit-align-content: @align;
+@mixin o-align-content($align) {
+    -webkit-align-content: $align;
 
-    align-content: @align;
+    align-content: $align;
 }
-.o-align-items(@align) {
-    -webkit-align-items: @align;
+@mixin o-align-items($align) {
+    -webkit-align-items: $align;
 
-    align-items: @align;
+    align-items: $align;
 }
-.o-align-self(@align) {
-    -webkit-align-self: @align;
+@mixin o-align-self($align) {
+    -webkit-align-self: $align;
 
-    align-self: @align;
+    align-self: $align;
 }
 
 // Background-size
-.o-background-size(@size) {
-    -webkit-background-size: @size;
-    -moz-background-size: @size;
-    -o-background-size: @size;
-    background-size: @size;
+@mixin o-background-size($size) {
+    -webkit-background-size: $size;
+    -moz-background-size: $size;
+    -o-background-size: $size;
+    background-size: $size;
 }
 
 // ------------------------------------------------------------------
 // Dropdowns
 // ------------------------------------------------------------------
-.o-selected-li() {
+@mixin o-selected-li {
     li {
         position: relative;
         > a {
-            color: @odoo-main-text-color;
+            color: $odoo-main-text-color;
             &:hover {
-                color: darken(@odoo-main-text-color, 10%);
+                color: darken($odoo-main-text-color, 10%);
             }
         }
         &.selected {
             > a {
-                color: darken(@odoo-main-text-color, 10%);
+                color: darken($odoo-main-text-color, 10%);
                 font-weight: bold;
                 &:before {
                     font-family: FontAwesome;
@@ -150,68 +150,68 @@
 // ------------------------------------------------------------------
 // Select Appearance
 // ------------------------------------------------------------------
-.o-appearance(@value) {
-    -webkit-appearance: @value;
-    -moz-appearance: @value;
-    appearance: @value;
+@mixin o-appearance($value) {
+    -webkit-appearance: $value;
+    -moz-appearance: $value;
+    appearance: $value;
 }
 
 // ------------------------------------------------------------------
 // Transform
 // ------------------------------------------------------------------
-.o-transform-origin(@x: 50%, @y: 50%, @z: 0) {
-    -ms-transform-origin: @x @y @z;
-    -webkit-transform-origin: @x @y @z;
-    -moz-transform-origin: @x @y @z;
-    transform-origin: @x @y @z;
+@mixin o-transform-origin($x: 50%, $y: 50%, $z: 0) {
+    -ms-transform-origin: $x $y $z;
+    -webkit-transform-origin: $x $y $z;
+    -moz-transform-origin: $x $y $z;
+    transform-origin: $x $y $z;
 }
 
 // ------------------------------------------------------------------
 // Animation
 // ------------------------------------------------------------------
-.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) {
-    -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
-    animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state;
+@mixin o-animation($name: none, $duration: 0s, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: none, $play-state: running) {
+    -webkit-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    -moz-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    -o-animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
+    animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode $play-state;
 }
 
 // ------------------------------------------------------------------
 // Transition
 // ------------------------------------------------------------------
-.o-transition(@property: all, @duration: 0s, @timing-function: ease, @transition-delay: 0s) {
-    -webkit-transition: @property @duration @timing-function @transition-delay;
-    -moz-transition: @property @duration @timing-function @transition-delay;
-    -o-transition: @property @duration @timing-function @transition-delay;
-    transition: @property @duration @timing-function @transition-delay;
+@mixin o-transition($property: all, $duration: 0s, $timing-function: ease, $transition-delay: 0s) {
+    -webkit-transition: $property $duration $timing-function $transition-delay;
+    -moz-transition: $property $duration $timing-function $transition-delay;
+    -o-transition: $property $duration $timing-function $transition-delay;
+    transition: $property $duration $timing-function $transition-delay;
 }
 
 // ------------------------------------------------------------------
 // Columns
 // ------------------------------------------------------------------
-.o-columns(@width: auto, @col: auto) {
-    -webkit-columns: @width @col;
-    -moz-columns: @width @col;
-    columns: @width @col;
+@mixin o-columns($width: auto, $col: auto) {
+    -webkit-columns: $width $col;
+    -moz-columns: $width $col;
+    columns: $width $col;
 }
 
 // ------------------------------------------------------------------
 // Position absolute
 // ------------------------------------------------------------------
-.o-position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto) {
+@mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
-    top: @top;
-    left: @left;
-    bottom: @bottom;
-    right: @right;
+    top: $top;
+    left: $left;
+    bottom: $bottom;
+    right: $right;
 }
 
 // ------------------------------------------------------------------
 // Text overflow
 // ------------------------------------------------------------------
-.o-text-overflow(@display: inline-block, @max-width: 100%) {
-    display: @display;
-    max-width: @max-width;
+@mixin o-text-overflow($display: inline-block, $max-width: 100%) {
+    display: $display;
+    max-width: $max-width;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -221,54 +221,63 @@
 // ------------------------------------------------------------------
 // Gradients
 // ------------------------------------------------------------------
-.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) {
+@mixin o-linear-gradient($deg: 45deg, $start-color: #555, $end-color: #333) {
     background-repeat: repeat-x;
-    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color);
-    background-image: -o-linear-gradient(@deg, @start-color, @end-color);
-    background-image: linear-gradient(@deg, @start-color, @end-color);
+    background-image: -webkit-linear-gradient($deg, $start-color, $end-color);
+    background-image: -o-linear-gradient($deg, $start-color, $end-color);
+    background-image: linear-gradient($deg, $start-color, $end-color);
 }
-.o-vertical-gradient(@startColor: #555, @endColor: #333) {
-    background-color: mix(@startColor, @endColor);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
-    background-image: -webkit-linear-gradient(top, @startColor, @endColor);
-    background-image: -moz-linear-gradient(top, @startColor, @endColor);
-    background-image: -ms-linear-gradient(top, @startColor, @endColor);
-    background-image: -o-linear-gradient(top, @startColor, @endColor);
-    background-image: linear-gradient(to bottom, @startColor, @endColor);
+@mixin o-vertical-gradient($startColor: #555, $endColor: #333) {
+    background-color: mix($startColor, $endColor);
+    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
+    background-image: -webkit-linear-gradient(top, $startColor, $endColor);
+    background-image: -moz-linear-gradient(top, $startColor, $endColor);
+    background-image: -ms-linear-gradient(top, $startColor, $endColor);
+    background-image: -o-linear-gradient(top, $startColor, $endColor);
+    background-image: linear-gradient(to bottom, $startColor, $endColor);
 }
-.o-skew-gradient(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background: -moz-linear-gradient(135deg, @endColor, @startColor);
-    background: -o-linear-gradient(135deg, @startColor, @endColor);
-    background: -webkit-gradient(linear, left top, right bottom, from(@startColor), to(@endColor));
-    background: -ms-linear-gradient(top, @startColor, @endColor);
+@mixin o-skew-gradient($startColor: #555, $endColor: #333) {
+    background-color: $endColor;
+    background: -moz-linear-gradient(135deg, $endColor, $startColor);
+    background: -o-linear-gradient(135deg, $startColor, $endColor);
+    background: -webkit-gradient(linear, left top, right bottom, from($startColor), to($endColor));
+    background: -ms-linear-gradient(top, $startColor, $endColor);
 }
 
 // ------------------------------------------------------------------
 // Transform
 // ------------------------------------------------------------------
-.o-transform(@transform) {
-    -webkit-transform: @transform;
-    -moz-transform: @transform;
-    -ms-transform: @transform;
-    -o-transform: @transform;
-    transform: @transform;
+@mixin o-transform($transform) {
+    -webkit-transform: $transform;
+    -moz-transform: $transform;
+    -ms-transform: $transform;
+    -o-transform: $transform;
+    transform: $transform;
 }
 
 // ------------------------------------------------------------------
 // Hovering effects
 // ------------------------------------------------------------------
-.o-hover-opacity(@default-opacity: 0.5, @hover-opacity: 1) {
-    opacity: @default-opacity;
+@mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) {
+    opacity: $default-opacity;
 
     &:hover, &:focus, &.focus {
-        opacity: @hover-opacity;
+        opacity: $hover-opacity;
     }
 }
-.o-hover-text-color(@default-color: @text-color, @hover-color: @link-color) {
-    color: @default-color;
+@mixin o-hover-text-color($default-color: $text-color, $hover-color: $link-color) {
+    color: $default-color;
 
     &:hover, &:focus, &.focus {
-        color: @hover-color;
+        color: $hover-color;
     }
 }
+
+//------------------------------------------------------------------------------
+// Colors
+//------------------------------------------------------------------------------
+
+@function o-get-most-contrast($color, $c1, $c2) {
+    $brightness: brightness($color);
+    @return if(abs($brightness - brightness($c1)) > abs($brightness - brightness($c2)), $c1, $c2);
+}
diff --git a/addons/web/static/src/scss/variables.scss b/addons/web/static/src/scss/variables.scss
index 1b4d2f09468..20180488042 100644
--- a/addons/web/static/src/scss/variables.scss
+++ b/addons/web/static/src/scss/variables.scss
@@ -4,89 +4,79 @@
 ///
 
 // Font sizes
-@odoo-font-size-base: 13px;
+$odoo-font-size-base: 13px;
 
 // Colors
-@odoo-brand-primary: #7c7bad;
-@odoo-brand-optional: #7c7bad;
-@odoo-brand-secondary: #f0eeee;
-@odoo-brand-lightsecondary: #e2e2e0;
-@odoo-color-silver: #F9F9F9;
-@odoo-color-silver-dark: #E5E5E5;
-@odoo-color-silver-darker: #d9d7d7;
-
-// Define @gray-lighter-dark as a minor bootstrap @gray-lighter variation used
+$odoo-brand-primary: #7c7bad;
+$odoo-brand-optional: #7c7bad;
+$odoo-brand-secondary: #f0eeee;
+$odoo-brand-lightsecondary: #e2e2e0;
+$odoo-color-silver: #F9F9F9;
+$odoo-color-silver-dark: #E5E5E5;
+$odoo-color-silver-darker: #d9d7d7;
+
+// Define $gray-lighter-dark as a minor bootstrap $gray-lighter variation used
 // for design purposes only (e.g. cards' borders). We avoid to overwrite the
-// default @gray-light because it is deeply used by bootstrap to define muted
+// default $gray-light because it is deeply used by bootstrap to define muted
 // elements.
-@gray-lighter-dark: @odoo-color-silver-dark;
-@gray-lighter-darker: @odoo-color-silver-darker;
+$gray-lighter-dark: $odoo-color-silver-dark;
+$gray-lighter-darker: $odoo-color-silver-darker;
 
-@odoo-color-pink: #875A7B; // Enterprise @odoo-brand-primary
-@odoo-main-color-muted: #a8a8a8;
-@odoo-main-text-color: #4c4c4c;
+$odoo-color-pink: #875A7B; // Enterprise $odoo-brand-primary
+$odoo-main-color-muted: #a8a8a8;
+$odoo-main-text-color: #4c4c4c;
 
-@odoo-view-background-color: white;
-@odoo-shadow-color: #303030;
+$odoo-view-background-color: white;
+$odoo-shadow-color: #303030;
 
-@odoo-webclient-background-color: @odoo-color-silver;
-@odoo-control-panel-background-color: @odoo-color-silver;
-@odoo-form-lightsecondary: #ccc;
+$odoo-webclient-background-color: $odoo-color-silver;
+$odoo-control-panel-background-color: $odoo-color-silver;
+$odoo-form-lightsecondary: #ccc;
 
-@odoo-list-footer-color: @odoo-main-text-color;
-@odoo-list-footer-bg-color: #eee;
-@odoo-list-footer-font-weight: bold;
+$odoo-list-footer-color: $odoo-main-text-color;
+$odoo-list-footer-bg-color: #eee;
+$odoo-list-footer-font-weight: bold;
 
-@odoo-tooltip-background-color: black;
-@odoo-tooltip-color: white;
-@odoo-tooltip-arrow-color: black;
-@odoo-tooltip-text-color: #777777;
-@odoo-tooltip-title-text-color: #4c4c4c;
+$odoo-tooltip-background-color: black;
+$odoo-tooltip-color: white;
+$odoo-tooltip-arrow-color: black;
+$odoo-tooltip-text-color: #777777;
+$odoo-tooltip-title-text-color: #4c4c4c;
 
 // UI custom colors for tags, kanban records' colors, ...)
-@odoo-nb-ui-color: 12;
-@odoo-color-0: @gray-light;
-@odoo-color-1: #F06050;
-@odoo-color-2: #F4A460;
-@odoo-color-3: #F7CD1F;
-@odoo-color-4: #6CC1ED;
-@odoo-color-5: #814968;
-@odoo-color-6: #EB7E7F;
-@odoo-color-7: #2C8397;
-@odoo-color-8: #475577;
-@odoo-color-9: #D6145F;
-@odoo-color-10: #30C381;
-@odoo-color-11: #9365B8;
+$odoo-nb-ui-color: 12;
+$odoo-colors: $gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
+              #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
 
 // Layout
-@screen-xs-min: 475px;
-@screen-xxs-max: (@screen-xs-min - 1);
+$screen-xs-min: 475px;
+$screen-xxs-max: ($screen-xs-min - 1);
 
-@screen-xl-min: 1534px;
-@screen-lg-max: (@screen-xl-min - 1);
+$screen-xl-min: 1534px;
+$screen-lg-max: ($screen-xl-min - 1);
 
-@odoo-form-group-cols: 12;
-@odoo-form-spacing-unit: 5px;
-@odoo-horizontal-padding: 16px;
-@odoo-innergroup-rpadding: 45px;
-@odoo-dropdown-hpadding: 20px;
+$odoo-form-group-cols: 12;
+$odoo-form-spacing-unit: 5px;
+$odoo-horizontal-padding: 16px;
+$odoo-innergroup-rpadding: 45px;
+$odoo-dropdown-hpadding: 20px;
 
-@border-radius-base: 3px;
+$border-radius-base: 3px;
 
-@odoo-sheet-vpadding: 24px;
+$odoo-sheet-vpadding: 24px;
 
 // Needed for having no spacing between sheet and mail body in mass_mailing:
 // Different required cancel paddings between web and web_enterprise
-@odoo-sheet-cancel-tpadding: 0px;
-@odoo-sheet-cancel-hpadding: @odoo-horizontal-padding;
-@odoo-sheet-cancel-bpadding: @odoo-horizontal-padding;
+$odoo-sheet-cancel-tpadding: 0px;
+$odoo-sheet-cancel-hpadding: $odoo-horizontal-padding;
+$odoo-sheet-cancel-bpadding: $odoo-horizontal-padding;
 
-@odoo-avatar-size: 90px;
+$odoo-avatar-size: 90px;
 
-@odoo-statusbar-height: 33px;
-@odoo-statusbar-arrow-width: @odoo-statusbar-height/3;
-@odoo-statusbar-disabled-bg: lighten(@odoo-brand-lightsecondary, 7%);
+$odoo-statusbar-height: 33px;
+$odoo-statusbar-arrow-width: $odoo-statusbar-height/3;
+$odoo-statusbar-disabled-bg: lighten($odoo-brand-lightsecondary, 7%);
 
-@odoo-label-font-size-factor: 0.8;
-@odoo-navbar-height: 34px;
-@odoo-navbar-inverse-link-hover-bg: @navbar-inverse-link-active-bg;
+$odoo-label-font-size-factor: 0.8;
+$odoo-navbar-height: 34px;
+$odoo-navbar-inverse-link-hover-bg: $navbar-inverse-link-active-bg;
diff --git a/addons/web/static/src/scss/views.scss b/addons/web/static/src/scss/views.scss
index 0c7936fc570..790cec7746d 100644
--- a/addons/web/static/src/scss/views.scss
+++ b/addons/web/static/src/scss/views.scss
@@ -1,6 +1,6 @@
 /**
  * This file regroups the rules which apply on elements which are shared between
- * all renderers. For field default rules, see the fields.less file.
+ * all renderers. For field default rules, see the fields.scss file.
  */
 
 // Invisible modifier (can be inside the view, the button area, ...)
@@ -9,7 +9,7 @@
 }
 
 // Status
-// This should normally be put in fields.less but these classes are used outside
+// This should normally be put in fields.scss but these classes are used outside
 // of `.o_field_widget` so it needs to be placed at an upper level.
 .o_status {
     display: inline-block;
@@ -18,13 +18,13 @@
     border-radius: 6px;
     vertical-align: middle;
 
-    background-color: @gray-lighter-dark;
+    background-color: $gray-lighter-dark;
 
     &.o_status_green {
-        background-color: @brand-success;
+        background-color: $brand-success;
     }
     &.o_status_red {
-        background-color: @brand-danger;
+        background-color: $brand-danger;
     }
 }
 
@@ -40,10 +40,10 @@
 
 // No content helper
 .o_view_nocontent {
-    .o-position-absolute(20%, 0, 0, 0);        
+    @include o-position-absolute(20%, 0, 0, 0);
     pointer-events: none;
     z-index: 1;
-    
+
     .o_nocontent_help {
         pointer-events: auto;
         max-width: 650px;
@@ -51,12 +51,12 @@
         padding: 15px;
         z-index: 1000;
         text-align: center;
-        color: @odoo-tooltip-text-color;
+        color: $odoo-tooltip-text-color;
         font-size: 115%;
 
         > p:first-of-type {
             margin-top: 0;
-            color: @odoo-tooltip-title-text-color;
+            color: $odoo-tooltip-title-text-color;
             font-weight: bold;
             font-size: 125%;
         }
@@ -65,7 +65,7 @@
             cursor: pointer;
         }
 
-        .o-init-image() {
+        @mixin o-init-image {
             content: "";
             display: block;
             margin: auto;
@@ -73,20 +73,20 @@
         }
 
         .o_view_nocontent_smiling_face:before {
-            .o-init-image();
-            .size(120px, 140px);
+            @include o-init-image;
+            @include size(120px, 140px);
             background: transparent url(/web/static/src/img/smiling_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_neutral_face:before {
-            .o-init-image();
-            .size(120px, 140px);
+            @include o-init-image;
+            @include size(120px, 140px);
             background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
         }
 
         .o_view_nocontent_empty_folder:before {
-            .o-init-image();
-            .size(120px, 80px);
+            @include o-init-image;
+            @include size(120px, 80px);
             margin-top: 30px;
             margin-bottom: 30px;
             background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
@@ -94,8 +94,8 @@
 
         .o_empty_custom_dashboard {
             min-height: 327px;
-            margin-left: -@grid-gutter-width/2;
-            margin-top: -@grid-gutter-width/2;
+            margin-left: -$grid-gutter-width/2;
+            margin-top: -$grid-gutter-width/2;
             padding: 100px 0 0 137px;
             background: transparent url(/web/static/src/img/graph_background.png) no-repeat 0 0;
         }
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index 5179552b3b6..257e81bc89a 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -1,20 +1,20 @@
-@nb-calendar-colors: 24;
+$nb-calendar-colors: 24;
 
 @keyframes backgroundfade {
-    from {background-color: fade(@odoo-brand-primary, 50%);}
+    from {background-color: rgba($odoo-brand-primary, 0.5);}
     to {background-color: #f5f5f5;}
 }
 
 .o_calendar_container {
     height: 100%;
-    .o-webclient-padding(@top: @odoo-horizontal-padding/2, @bottom: @odoo-horizontal-padding/2);
-    .o-flex-display();
+    @include o-webclient-padding($top: $odoo-horizontal-padding/2, $bottom: $odoo-horizontal-padding/2);
+    @include o-flex-display;
 
-    .calendar_color_loop(@index) when (@index < @nb-calendar-colors+1) {
-        .o_calendar_color_@{index} {
+    @for $index from 1 through $nb-calendar-colors {
+        .o_calendar_color_#{$index} {
             color: #0D0D0D;
-            background-color: spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
-            border-color:  spin(rgb(255, 192, 192), 360/(@nb-calendar-colors+1) * @index);
+            background-color: adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
+            border-color:  adjust-hue(rgb(255, 192, 192), (360/($nb-calendar-colors+1) * $index) * 1deg);
             opacity: 0.7;
             &.o_event_hightlight {
                 font-weight: bold;
@@ -24,30 +24,23 @@
                 color: #666 !important;
             }
         }
-        .calendar_color_loop(@index + 1);
-    }
-    .calendar_color_loop(1);
-
-    .underline_color_loop(@index) when (@index < @nb-calendar-colors+1) {
-        .o_underline_color_@{index} {
-            border-bottom: 4px solid spin(rgba(255, 192, 192, 0.7), 360/(@nb-calendar-colors+1) * @index);
+        .o_underline_color_#{$index} {
+            border-bottom: 4px solid adjust-hue(rgba(255, 192, 192, 0.7), (360/($nb-calendar-colors+1) * $index) * 1deg);
         }
-        .underline_color_loop(@index + 1);
     }
-    .underline_color_loop(1);
 
     .o_calendar_view {
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         min-width: 0;
 
         .o_calendar_widget {
             height: 100%;
-            background-color: @odoo-view-background-color;
+            background-color: $odoo-view-background-color;
             * {
                 z-index: 0; // FIXME
             }
             .fc-week-number, .fc-widget-header {
-                background-color: lighten(@odoo-brand-secondary, 30%);
+                background-color: lighten($odoo-brand-secondary, 30%);
             }
             .o_avatar_square {
                 border-radius: 5px;
@@ -71,19 +64,19 @@
     }
 
     .o_calendar_sidebar_container {
-        .o-flex(0, 0, @odoo-horizontal-padding);
+        @include o-flex(0, 0, $odoo-horizontal-padding);
         position: relative;
 
         &.o_sidebar_hidden {
-            margin-right: -@odoo-horizontal-padding; // hack to display the toggler in the gutter
+            margin-right: -$odoo-horizontal-padding; // hack to display the toggler in the gutter
             .o_calendar_sidebar_toggler {
                 padding: 4px;
-                color: darken(@odoo-webclient-background-color, 30%);
+                color: darken($odoo-webclient-background-color, 30%);
             }
         }
 
         .o_calendar_sidebar_toggler {
-            .o-position-absolute(@top: 0, @right: 0);
+            @include o-position-absolute($top: 0, $right: 0);
             cursor: pointer;
             padding: 6px;
             z-index: 1;
@@ -95,7 +88,7 @@
         .o_calendar_sidebar {
             width: 250px;
             margin-left: 8px;
-            background: @odoo-view-background-color;
+            background: $odoo-view-background-color;
         }
 
         .ui-datepicker {
@@ -106,18 +99,18 @@
             padding: 0;
 
             .ui-widget-header {
-                .o-flex-display();
+                @include o-flex-display;
                 background: none;
-                background-color: lighten(@odoo-brand-secondary, 30%);
+                background-color: lighten($odoo-brand-secondary, 30%);
                 border-radius: 0;
 
                 .ui-datepicker-prev, .ui-datepicker-next {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                     position: static;
                     cursor: pointer;
                     padding: 2px;
                     text-align: center;
-                    color: @odoo-main-text-color;
+                    color: $odoo-main-text-color;
                     &.ui-state-hover {
                         background: none;
                         border: none;
@@ -142,7 +135,7 @@
                     }
                 }
                 .ui-datepicker-title {
-                    .o-flex(0, 0, auto);
+                    @include o-flex(0, 0, auto);
                     order: 2;
                     display: inline-block;
                     margin: 0 10px;
@@ -151,31 +144,31 @@
             table {
                 td {
                     padding: 0 2px 2px 0;
-                    background-color: @odoo-view-background-color;
+                    background-color: $odoo-view-background-color;
                     a {
                         border: none;
                         background: none;
-                        background-color: lighten(@odoo-brand-secondary, 40%);
+                        background-color: lighten($odoo-brand-secondary, 40%);
                         text-align: center;
                     }
                 }
                 .ui-state-default {
-                    color: @odoo-brand-primary;
+                    color: $odoo-brand-primary;
                     &:hover {
                         background: none;
-                        background-color: fade(@odoo-brand-primary, 50%);
-                        border-color: @odoo-brand-primary;
-                        color: @odoo-view-background-color;
+                        background-color: rgba($odoo-brand-primary, 0.5);
+                        border-color: $odoo-brand-primary;
+                        color: $odoo-view-background-color;
                     };
                 }
                 .ui-state-active {
                     background: none;
-                    background-color: @odoo-brand-primary;
-                    color: @odoo-view-background-color;
+                    background-color: $odoo-brand-primary;
+                    color: $odoo-view-background-color;
                 }
                 .o_selected_range.o_color {
                     background: none;
-                    background-color: @odoo-brand-primary;
+                    background-color: $odoo-brand-primary;
                     animation: backgroundfade 3s forwards;
                 }
             }
@@ -213,7 +206,7 @@
         padding: 0;
     }
 }
-@media (max-width: @screen-xs-max) {
+@media (max-width: $screen-xs-max) {
     .o_control_panel {
         .o_calendar_button_today {
             float: right;
diff --git a/addons/web/static/src/scss/webclient.scss b/addons/web/static/src/scss/webclient.scss
index 1de198d282b..d4bd0b4e0f2 100644
--- a/addons/web/static/src/scss/webclient.scss
+++ b/addons/web/static/src/scss/webclient.scss
@@ -3,19 +3,19 @@
 // ------------------------------------------------------------------
 .o_web_client {
     position: relative; // normally useless but required by bootstrap-datepicker
-    background-color: @odoo-webclient-background-color;
+    background-color: $odoo-webclient-background-color;
 }
 
 // ------------------------------------------------------------------
 // Misc. widgets
 // ------------------------------------------------------------------
-@notification-error-bg-color: #F16567;
-@notification-info-bg-color: #FCFBEA;
+$notification-error-bg-color: #F16567;
+$notification-info-bg-color: #FCFBEA;
 .o_notification_manager {
     width: 300px;
     max-width: 100%;
 
-    .o-position-absolute(@navbar-height, 0px);
+    @include o-position-absolute($navbar-height, 0px);
     z-index: 1100; // Bootstrap modal z-index is 1050
 
     .o_notification {
@@ -24,19 +24,19 @@
 
         opacity: 0;
 
-        background-color: @notification-info-bg-color;
-        box-shadow: 0px 0px 5px 1px @odoo-main-text-color;
+        background-color: $notification-info-bg-color;
+        box-shadow: 0px 0px 5px 1px $odoo-main-text-color;
 
         position: relative;
         .o_close {
-            .o-position-absolute(5px, 5px);
+            @include o-position-absolute(5px, 5px);
             color: rgba(0, 0, 0, 0.3);
             text-decoration: none;
         }
 
         .o_notification_title {
-            .o-flex-display();
-            .o-align-items(center);
+            @include o-flex-display;
+            @include o-align-items(center);
 
             border-bottom: 1px solid rgba(0, 0, 0, 0.1);
             padding: 10px 10px 10px 20px;
@@ -56,7 +56,7 @@
 
         &.o_error {
             color: white;
-            background-color: @notification-error-bg-color;
+            background-color: $notification-error-bg-color;
         }
     }
 }
@@ -103,30 +103,30 @@ div.o_boolean_toggle {
     }
 
     > input:checked + .slider {
-        background-color: @odoo-brand-optional;
+        background-color: $odoo-brand-optional;
 
         &:before {
-            .translate(14px; 0px);
+            @include translate(14px, 0px);
         }
     }
 }
 
 // Full bg colors (bootstrap extension)
 .bg-success-full {
-    background-color: @brand-success;
+    background-color: $brand-success;
 }
 .bg-warning-full {
-    background-color: @brand-warning;
+    background-color: $brand-warning;
 }
 .bg-danger-full {
-    background-color: @brand-danger;
+    background-color: $brand-danger;
 }
 .bg-info-full {
-    background-color: @brand-info;
+    background-color: $brand-info;
 }
 
 .o_web_accesskey_overlay {
-    font-family: @font-family-sans-serif;
+    font-family: $font-family-sans-serif;
     position: absolute;
     width: 100%;
     height: 100%;
@@ -137,4 +137,4 @@ div.o_boolean_toggle {
     justify-content: center;
     display: flex;
     align-items: center;
-}
\ No newline at end of file
+}
diff --git a/addons/web/static/src/scss/webclient_extra.scss b/addons/web/static/src/scss/webclient_extra.scss
index 82798437672..701cfe2a9b3 100644
--- a/addons/web/static/src/scss/webclient_extra.scss
+++ b/addons/web/static/src/scss/webclient_extra.scss
@@ -7,8 +7,8 @@
     outline: none;
 }
 .o_input {
-    border: 1px solid @odoo-form-lightsecondary;
-    border-radius: @border-radius-base;
+    border: 1px solid $odoo-form-lightsecondary;
+    border-radius: $border-radius-base;
     padding: 2px 4px;
     color: #1f1f1f;
 
@@ -29,7 +29,7 @@ select {
     top: 0;
     right: 50%;
     padding: 4px 12px;
-    background-color: @odoo-color-pink;
+    background-color: $odoo-color-pink;
     color: white;
     text-align: center;
     border-top: none;
@@ -41,6 +41,6 @@ select {
 // User menu in navbar
 //------------------------------------------------------------------------------
 #oe_main_menu_navbar .oe_user_menu_placeholder .o_user_menu .oe_topbar_name {
-    .o-text-overflow();
+    @include o-text-overflow;
     max-width: 150px;
 }
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index f876d8b3527..14892617b5e 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -1,8 +1,8 @@
-@odoo-submenu-width: 220px;
+$odoo-submenu-width: 220px;
 
 .o_web_client {
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     overflow: hidden;
 
     &.o_fullscreen {
@@ -16,7 +16,7 @@
 
 
     .navbar {
-        .o-flex(0, 0, auto);
+        @include o-flex(0, 0, auto);
 
         li > a {
             padding: 4px 8px;
@@ -31,20 +31,20 @@
     }
 
     > .o_main {
-        .o-flex(1, 1, auto);
-        .o-flex-display();
+        @include o-flex(1, 1, auto);
+        @include o-flex-display;
         min-height: 0; // Allow flex to shrink this element as much as it wants
         height: 100%;
 
         .o_sub_menu {
-            .o-flex(0, 0, @odoo-submenu-width);
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
-            border-right: 1px solid darken(@odoo-control-panel-background-color, 20%);
-            background-color: @odoo-control-panel-background-color;
+            @include o-flex(0, 0, $odoo-submenu-width);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
+            border-right: 1px solid darken($odoo-control-panel-background-color, 20%);
+            background-color: $odoo-control-panel-background-color;
 
             .o_sub_menu_logo {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 text-align: center;
                 position: relative;
 
@@ -68,20 +68,20 @@
             }
 
             .o_sub_menu_content {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 height:100%;
                 overflow-y: auto;
 
                 .oe_secondary_menu_section {
                     font-weight: bold;
                     margin-left: 8px;
-                    color: @odoo-brand-optional;
+                    color: $odoo-brand-optional;
                 }
                 .oe_secondary_submenu {
                     margin: 3px 0px 10px;
                     line-height: 1.1em;
                     >li:not(.active) > a {
-                        color: @odoo-main-text-color;
+                        color: $odoo-main-text-color;
                     }
                     > li > a {
                         padding: 4px 4px 4px 18px;
@@ -98,7 +98,7 @@
                         }
                     }
                     .oe_menu_text {
-                        .o-text-overflow();
+                        @include o-text-overflow;
                         max-width: 85%;
                         margin-top: 1px;
                     }
@@ -129,34 +129,34 @@
             }
 
             .o_sub_menu_footer {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
                 text-align: center;
 
                 > a {
                     font-weight: bold;
                     > span {
-                        color: @odoo-color-pink;
+                        color: $odoo-color-pink;
                     }
                 }
             }
         }
 
         .o_main_content {
-            .o-flex(1, 1, auto);
-            .o-flex-display();
-            .o-flex-flow(column, nowrap);
+            @include o-flex(1, 1, auto);
+            @include o-flex-display;
+            @include o-flex-flow(column, nowrap);
 
             .o_control_panel {
-                .o-flex(0, 0, auto);
+                @include o-flex(0, 0, auto);
             }
             .o_content {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 height: 100%;
                 overflow: auto;
                 position: relative;
 
                 > .o_view_controller {
-                    .o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
+                    @include o-position-absolute(0, 0, 0, 0);  // Get the 100% height of its flex parent
                     height: 100%;
                 }
             }