[MERGE] *: use SCSS as language for design (instead of LESS)

The main reason this is done is to prepare the migration to bootstrap 4.
It has other advantages though, like speed to compute the css and more
convenient language features (if/else/maps/...).

Detailed information about this merge can be found in the merge's
sub-commits.

8 files changed, 922 insertions, 920 deletions

diff --git a/addons/web_editor/static/src/js/widgets/ace.js b/addons/web_editor/static/src/js/widgets/ace.js
index d5da96d2977..a92c56cae05 100644
--- a/addons/web_editor/static/src/js/widgets/ace.js
+++ b/addons/web_editor/static/src/js/widgets/ace.js
@@ -12,7 +12,7 @@ var session = require('web.session');
 var _t = core._t;
 
 /**
- * Formats a content-check result (@see checkXML, checkLESS).
+ * Formats a content-check result (@see checkXML, checkSCSS).
  *
  * @param {boolean} isValid
  * @param {integer} [errorLine] needed if isValid is false
@@ -65,12 +65,12 @@ function formatXML(xml) {
     return window.vkbeautify.xml(xml, 4);
 }
 /**
- * Checks the syntax validity of some LESS.
+ * Checks the syntax validity of some SCSS.
  *
- * @param {string} less
+ * @param {string} scss
  * @returns {Object} @see _getCheckReturn
  */
-var checkLESS = (function () {
+var checkSCSS = (function () {
     var mapping = {
         '{': '}', '}': '{',
         '(': ')', ')': '(',
@@ -79,17 +79,17 @@ var checkLESS = (function () {
     var openings = ['{', '(', '['];
     var closings = ['}', ')', ']'];
 
-    return function (less) {
+    return function (scss) {
         var stack = [];
         var line = 1;
-        for (var i = 0 ; i < less.length ; i++) {
-            if (_.contains(openings, less[i])) {
-                stack.push(less[i]);
-            } else if (_.contains(closings, less[i])) {
-                if (stack.pop() !== mapping[less[i]]) {
-                    return _getCheckReturn(false, line, _t("Unexpected ") + less[i]);
+        for (var i = 0 ; i < scss.length ; i++) {
+            if (_.contains(openings, scss[i])) {
+                stack.push(scss[i]);
+            } else if (_.contains(closings, scss[i])) {
+                if (stack.pop() !== mapping[scss[i]]) {
+                    return _getCheckReturn(false, line, _t("Unexpected ") + scss[i]);
                 }
-            } else if (less[i] === '\n') {
+            } else if (scss[i] === '\n') {
                 line++;
             }
         }
@@ -100,14 +100,14 @@ var checkLESS = (function () {
     };
 })();
 /**
- * Formats some LESS so that it has proper indentation and structure.
+ * Formats some SCSS so that it has proper indentation and structure.
  *
- * @todo Right now, this does return the given LESS content, untouched.
- * @param {string} less
- * @returns {string} formatted less
+ * @todo Right now, this does return the given SCSS content, untouched.
+ * @param {string} scss
+ * @returns {string} formatted scss
  */
-function formatLESS(less) {
-    return less;
+function formatSCSS(scss) {
+    return scss;
 }
 
 /**
@@ -120,7 +120,7 @@ var ViewEditor = Widget.extend({
         '/web/static/lib/ace/ace.js',
         [
             '/web/static/lib/ace/mode-xml.js',
-            '/web/static/lib/ace/mode-less.js',
+            '/web/static/lib/ace/mode-scss.js',
             '/web/static/lib/ace/theme-monokai.js'
         ]
     ],
@@ -128,7 +128,7 @@ var ViewEditor = Widget.extend({
         'click .o_ace_type_switcher_choice': '_onTypeChoice',
         'change .o_res_list': '_onResChange',
         'click .js_include_bundles': '_onIncludeBundlesChange',
-        'click .js_include_all_less': '_onIncludeAllLessChange',
+        'click .js_include_all_scss': '_onIncludeAllSCSSChange',
         'click button[data-action=save]': '_onSaveClick',
         'click button[data-action=reset]': '_onResetClick',
         'click button[data-action=format]': '_onFormatClick',
@@ -145,13 +145,13 @@ var ViewEditor = Widget.extend({
      *        xml_id or id of the view whose linked resources have to be loaded.
      * @param {Object} [options]
      * @param {string|integer} [options.initialResID]
-     *        a specific view ID / LESS URL to load on start (otherwise the main
+     *        a specific view ID / SCSS URL to load on start (otherwise the main
      *        view ID associated with the specified viewKey will be used)
      * @param {string} [options.position=right]
      * @param {boolean} [options.doNotLoadViews=false]
-     * @param {boolean} [options.doNotLoadLess=false]
+     * @param {boolean} [options.doNotLoadSCSS=false]
      * @param {boolean} [options.includeBundles=false]
-     * @param {boolean} [options.includeAllLess=false]
+     * @param {boolean} [options.includeAllSCSS=false]
      * @param {string[]} [options.defaultBundlesRestriction]
      */
     init: function (parent, viewKey, options) {
@@ -161,19 +161,19 @@ var ViewEditor = Widget.extend({
         this.options = _.defaults({}, options, {
             position: 'right',
             doNotLoadViews: false,
-            doNotLoadLess: false,
+            doNotLoadSCSS: false,
             includeBundles: false,
-            includeAllLess: false,
+            includeAllSCSS: false,
             defaultBundlesRestriction: [],
         });
 
-        this.resources = {xml: {}, less: {}};
-        this.editingSessions = {xml: {}, less: {}};
+        this.resources = {xml: {}, scss: {}};
+        this.editingSessions = {xml: {}, scss: {}};
         this.currentType = 'xml';
 
         // Alias
         this.views = this.resources.xml;
-        this.less = this.resources.less;
+        this.scss = this.resources.scss;
     },
     /**
      * Loads everything the ace library needs to work.
@@ -202,10 +202,10 @@ var ViewEditor = Widget.extend({
 
         this.$lists = {
             xml: this.$('#ace-view-list'),
-            less: this.$('#ace-less-list')
+            scss: this.$('#ace-scss-list')
         };
         this.$includeBundlesArea = this.$('.oe_include_bundles');
-        this.$includeAllLessArea = this.$('.o_include_all_less');
+        this.$includeAllSCSSArea = this.$('.o_include_all_scss');
         this.$viewID = this.$('#ace-view-id > span');
 
         this.$formatButton = this.$('button[data-action=format]');
@@ -226,11 +226,11 @@ var ViewEditor = Widget.extend({
         var initType;
         if (this.options.initialResID) {
             initResID = this.options.initialResID;
-            initType = (_.isString(initResID) && initResID[0] === '/') ? 'less' : 'xml';
+            initType = (_.isString(initResID) && initResID[0] === '/') ? 'scss' : 'xml';
         } else {
-            if (!this.options.doNotLoadLess) {
-                initResID = this.sorted_less[0][1][0].url; // first bundle, less files, first one
-                initType = 'less';
+            if (!this.options.doNotLoadSCSS) {
+                initResID = this.sortedSCSS[0][1][0].url; // first bundle, scss files, first one
+                initType = 'scss';
             }
             if (!this.options.doNotLoadViews) {
                 if (typeof this.viewKey === "number") {
@@ -249,9 +249,9 @@ var ViewEditor = Widget.extend({
             this._displayResource(initResID, initType);
         }
 
-        if (!this.sorted_views.length || !this.sorted_less.length) {
+        if (!this.sortedViews.length || !this.sortedSCSS.length) {
             _.defer((function () {
-                this._switchType(this.sorted_views.length ? 'xml' : 'less');
+                this._switchType(this.sortedViews.length ? 'xml' : 'scss');
                 this.$typeSwitcherBtn.parent('.btn-group').addClass('hidden');
             }).bind(this));
         }
@@ -319,7 +319,7 @@ var ViewEditor = Widget.extend({
      * Initializes a text editor for the specified resource.
      *
      * @private
-     * @param {integer|string} resID - the ID/URL of the view/less file
+     * @param {integer|string} resID - the ID/URL of the view/scss file
      * @param {string} [type] (default to the currently selected one)
      * @returns {ace.EditSession}
      */
@@ -339,13 +339,13 @@ var ViewEditor = Widget.extend({
         return editingSession;
     },
     /**
-     * Forces the view/less file identified by its ID/URL to be displayed in the
+     * Forces the view/scss file identified by its ID/URL to be displayed in the
      * editor. The method will update the resource select DOM element as well if
      * necessary.
      *
      * @private
      * @param {integer|string} resID
-     * @param {string} [type] - the type of resource (either 'xml' or 'less')
+     * @param {string} [type] - the type of resource (either 'xml' or 'scss')
      */
     _displayResource: function (resID, type) {
         if (type) {
@@ -361,23 +361,23 @@ var ViewEditor = Widget.extend({
         if (this.currentType === 'xml') {
             this.$viewID.text(_.str.sprintf(_t("Template ID: %s"), this.views[resID].xml_id));
         } else {
-            this.$viewID.text(_.str.sprintf(_t("Less file: %s"), resID));
+            this.$viewID.text(_.str.sprintf(_t("SCSS file: %s"), resID));
         }
         this.$lists[this.currentType].select2('val', resID);
 
-        this.$resetButton.toggleClass('hidden', this.currentType === 'xml' || !this.less[resID].customized);
+        this.$resetButton.toggleClass('hidden', this.currentType === 'xml' || !this.scss[resID].customized);
     },
     /**
      * Formats the current resource being vizualized.
-     * (@see formatXML, formatLESS)
+     * (@see formatXML, formatSCSS)
      *
      * @private
      */
     _formatResource: function () {
         var res = this.aceEditor.getValue();
-        var check = (this.currentType === 'xml' ? checkXML : checkLESS)(res);
+        var check = (this.currentType === 'xml' ? checkXML : checkSCSS)(res);
         if (check.isValid) {
-            this.aceEditor.setValue((this.currentType === 'xml' ? formatXML : formatLESS)(res));
+            this.aceEditor.setValue((this.currentType === 'xml' ? formatXML : formatSCSS)(res));
         } else {
             this._showErrorLine(check.error.line, check.error.message, this._getSelectedResource());
         }
@@ -386,7 +386,7 @@ var ViewEditor = Widget.extend({
      * Returns the currently selected resource data.
      *
      * @private
-     * @returns {integer|string} view ID or less file URL
+     * @returns {integer|string} view ID or scss file URL
      */
     _getSelectedResource: function () {
         var value = this.$lists[this.currentType].select2('val');
@@ -401,10 +401,10 @@ var ViewEditor = Widget.extend({
      */
     _loadResources: function () {
         // Reset resources
-        this.resources = {xml: {}, less: {}};
-        this.editingSessions = {xml: {}, less: {}};
+        this.resources = {xml: {}, scss: {}};
+        this.editingSessions = {xml: {}, scss: {}};
         this.views = this.resources.xml;
-        this.less = this.resources.less;
+        this.scss = this.resources.scss;
 
         // Load resources
         return this._rpc({
@@ -412,16 +412,16 @@ var ViewEditor = Widget.extend({
             params: {
                 key: this.viewKey,
                 get_views: !this.options.doNotLoadViews,
-                get_less: !this.options.doNotLoadLess,
+                get_scss: !this.options.doNotLoadSCSS,
                 bundles: this.options.includeBundles,
-                bundles_restriction: this.options.includeAllLess ? [] : this.options.defaultBundlesRestriction,
+                bundles_restriction: this.options.includeAllSCSS ? [] : this.options.defaultBundlesRestriction,
             },
         }).then((function (resources) {
-            _process_views.call(this, resources.views);
-            _process_less.call(this, resources.less);
+            _processViews.call(this, resources.views || []);
+            _processSCSS.call(this, resources.scss || []);
         }).bind(this));
 
-        function _process_views(views) {
+        function _processViews(views) {
             // Only keep the active views and index them by ID.
             _.extend(this.views, _.indexBy(_.filter(views, function (view) {
                 return view.active;
@@ -446,10 +446,10 @@ var ViewEditor = Widget.extend({
 
             // Assign the correct level based on children key and save a sorted array where
             // each view is followed by their children.
-            this.sorted_views = [];
+            this.sortedViews = [];
             function visit(view, level) {
                 view.level = level;
-                self.sorted_views.push(view);
+                self.sortedViews.push(view);
                 _.each(view.children, function (child) {
                     visit(child, level + 1);
                 });
@@ -459,20 +459,20 @@ var ViewEditor = Widget.extend({
             });
         }
 
-        function _process_less(less) {
-            // The received less data is already sorted by bundle and DOM order
-            this.sorted_less = less;
+        function _processSCSS(scss) {
+            // The received scss data is already sorted by bundle and DOM order
+            this.sortedSCSS = scss;
 
             // Store the URL ungrouped by bundle and use the URL as key (resource ID)
             var self = this;
-            _.each(less, function (bundleInfos) {
+            _.each(scss, function (bundleInfos) {
                 _.each(bundleInfos[1], function (info) { info.bundle_xmlid = bundleInfos[0].xmlid; });
-                _.extend(self.less, _.indexBy(bundleInfos[1], 'url'));
+                _.extend(self.scss, _.indexBy(bundleInfos[1], 'url'));
             });
         }
     },
     /**
-     * Forces the view/less file identified by its ID/URL to be reset to the way
+     * Forces the view/scss file identified by its ID/URL to be reset to the way
      * it was before the user started editing it.
      *
      * @todo views reset is not supported yet
@@ -490,36 +490,36 @@ var ViewEditor = Widget.extend({
             return $.Defered().reject(_t("Reseting views is not supported yet"));
         } else {
             return this._rpc({
-                route: '/web_editor/reset_less',
+                route: '/web_editor/reset_scss',
                 params: {
                     url: resID,
-                    bundle_xmlid: this.less[resID].bundle_xmlid,
+                    bundle_xmlid: this.scss[resID].bundle_xmlid,
                 },
             });
         }
     },
     /**
-     * Saves an unique LESS file.
+     * Saves an unique SCSS file.
      *
      * @private
      * @param {Object} session - contains the 'id' (url) and the 'text' of the
-     *                         LESS file to save.
+     *                         SCSS file to save.
      * @return {Deferred} status indicates if the save is finished or if an
      *                    error occured.
      */
-    _saveLess: function (session) {
+    _saveSCSS: function (session) {
         var def = $.Deferred();
 
         var self = this;
         this._rpc({
-            route: '/web_editor/save_less',
+            route: '/web_editor/save_scss',
             params: {
                 url: session.id,
-                bundle_xmlid: this.less[session.id].bundle_xmlid,
+                bundle_xmlid: this.scss[session.id].bundle_xmlid,
                 content: session.text,
             },
         }).then(function () {
-            self._toggleDirtyInfo(session.id, 'less', false);
+            self._toggleDirtyInfo(session.id, 'scss', false);
             def.resolve();
         }, function (source, error) {
             def.reject(session, error);
@@ -553,7 +553,7 @@ var ViewEditor = Widget.extend({
 
             this._showErrorLine();
             for (var i = 0 ; i < toSave[type].length && !errorFound ; i++) {
-                var check = (type === 'xml' ? checkXML : checkLESS)(toSave[type][i].text);
+                var check = (type === 'xml' ? checkXML : checkSCSS)(toSave[type][i].text);
                 if (!check.isValid) {
                     this._showErrorLine(check.error.line, check.error.message, toSave[type][i].id, type);
                     errorFound = toSave[type][i];
@@ -564,7 +564,7 @@ var ViewEditor = Widget.extend({
 
         var defs = [];
         _.each(toSave, (function (_toSave, type) {
-            defs = defs.concat(_.map(_toSave, (type === 'xml' ? this._saveView : this._saveLess).bind(this)));
+            defs = defs.concat(_.map(_toSave, (type === 'xml' ? this._saveView : this._saveSCSS).bind(this)));
         }).bind(this));
 
         return $.when.apply($, defs).fail((function (session, error) {
@@ -653,11 +653,11 @@ var ViewEditor = Widget.extend({
         }
     },
     /**
-     * Switches to the LESS or XML edition. Calling this method will adapt all
+     * Switches to the SCSS or XML edition. Calling this method will adapt all
      * DOM elements to keep the editor consistent.
      *
      * @private
-     * @param {string} type - either 'xml' or 'less'
+     * @param {string} type - either 'xml' or 'scss'
      */
     _switchType: function (type) {
         this.currentType = type;
@@ -665,9 +665,9 @@ var ViewEditor = Widget.extend({
         _.each(this.$lists, function ($list, _type) { $list.toggleClass('hidden', type !== _type); });
         this.$lists[type].change();
 
-        this.$includeBundlesArea.toggleClass('hidden', this.currentType === 'less' || !session.debug);
-        this.$includeAllLessArea.toggleClass('hidden', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
-        this.$formatButton.toggleClass('hidden', this.currentType === 'less');
+        this.$includeBundlesArea.toggleClass('hidden', this.currentType === 'scss' || !session.debug);
+        this.$includeAllSCSSArea.toggleClass('hidden', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
+        this.$formatButton.toggleClass('hidden', this.currentType === 'scss');
     },
     /**
      * Updates the select option DOM element associated with a particular resID
@@ -701,7 +701,7 @@ var ViewEditor = Widget.extend({
 
         var self = this;
         this.$lists.xml.empty();
-        _.each(this.sorted_views, function (view) {
+        _.each(this.sortedViews, function (view) {
             self.$lists.xml.append($('<option/>', {
                 value: view.id,
                 text: view.name,
@@ -711,19 +711,19 @@ var ViewEditor = Widget.extend({
             }));
         });
 
-        this.$lists.less.empty();
-        _.each(this.sorted_less, function (bundleInfos) {
+        this.$lists.scss.empty();
+        _.each(this.sortedSCSS, function (bundleInfos) {
             var $optgroup = $('<optgroup/>', {
                 label: bundleInfos[0].name,
-            }).appendTo(self.$lists.less);
-            _.each(bundleInfos[1], function (lessInfo) {
-                var name = lessInfo.url.substring(_.lastIndexOf(lessInfo.url, '/') + 1, lessInfo.url.length - 5);
+            }).appendTo(self.$lists.scss);
+            _.each(bundleInfos[1], function (scssInfo) {
+                var name = scssInfo.url.substring(_.lastIndexOf(scssInfo.url, '/') + 1, scssInfo.url.length - 5);
                 $optgroup.append($('<option/>', {
-                    value: lessInfo.url,
+                    value: scssInfo.url,
                     text: name,
-                    selected: currentId === lessInfo.url,
-                    'data-debug': lessInfo.url,
-                    'data-customized': lessInfo.customized
+                    selected: currentId === scssInfo.url,
+                    'data-debug': scssInfo.url,
+                    'data-customized': scssInfo.customized
                 }));
             });
         });
@@ -734,12 +734,12 @@ var ViewEditor = Widget.extend({
             formatSelection: _formatDisplay.bind(this, true),
         });
         this.$lists.xml.data('select2').dropdown.addClass('o_ace_select2_dropdown');
-        this.$lists.less.select2('destroy');
-        this.$lists.less.select2({
+        this.$lists.scss.select2('destroy');
+        this.$lists.scss.select2({
             formatResult: _formatDisplay.bind(this, false),
             formatSelection: _formatDisplay.bind(this, true),
         });
-        this.$lists.less.data('select2').dropdown.addClass('o_ace_select2_dropdown');
+        this.$lists.scss.data('select2').dropdown.addClass('o_ace_select2_dropdown');
 
         function _formatDisplay(isSelected, data) {
             var $elem = $(data.element);
@@ -791,14 +791,14 @@ var ViewEditor = Widget.extend({
         this._formatResource();
     },
     /**
-     * Called when the checkbox which indicates if all LESS should be included
+     * Called when the checkbox which indicates if all SCSS should be included
      * is toggled -> reloads the resources accordingly.
      *
      * @private
      * @param {Event} ev
      */
-    _onIncludeAllLessChange: function (ev) {
-        this.options.includeAllLess = $(ev.target).prop('checked');
+    _onIncludeAllSCSSChange: function (ev) {
+        this.options.includeAllSCSS = $(ev.target).prop('checked');
         this._loadResources().then(this._updateViewSelectDOM.bind(this));
     },
     /**
@@ -845,7 +845,7 @@ var ViewEditor = Widget.extend({
         this._saveResources();
     },
     /**
-     * Called when the user wants to switch from xml to less or vice-versa ->
+     * Called when the user wants to switch from xml to scss or vice-versa ->
      * adapt resources choices and displays a resource of that type.
      *
      * @private
diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less
deleted file mode 100644
index 99f6a474397..00000000000
--- a/addons/web_editor/static/src/less/web_editor.common.less
+++ /dev/null
@@ -1,308 +0,0 @@
-///
-/// This file regroups basic style rules for web_editor enable page edition and backend utils.
-///
-
-html, body {
-    width: 100%;
-    height: 100%;
-}
-
-.css_non_editable_mode_hidden {
-    display: none !important;
-}
-.editor_enable .css_editable_mode_hidden {
-    display: none !important;
-}
-.note-toolbar {
-    margin-left: 0 !important;
-}
-.note-popover .popover > .arrow {
-    display: none;
-}
-
-/* ----- GENERIC LAYOUTING HELPERS ---- */
-/* table */
-#wrapwrap, .o_editable {
-    // Only style editor-made tables (shop/portal/... tables are not supposed to
-    // use table-bordered...)
-    table.table.table-bordered {
-        table-layout: fixed;
-        td {
-            min-width: 20px;
-        }
-    }
-    @media (max-width: @screen-xs-max) {
-        .table-responsive > table.table {
-            table-layout: auto;
-        }
-    }
-}
-
-// Medias
-img.shadow {
-    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
-}
-img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
-    padding: 4px;
-}
-img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
-    padding: 8px;
-}
-img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
-    padding: 16px;
-}
-img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
-    padding: 32px;
-}
-
-.fa-6x {
-    font-size: 6em;
-}
-.fa-7x {
-    font-size: 7em;
-}
-.fa-8x {
-    font-size: 8em;
-}
-.fa-9x {
-    font-size: 9em;
-}
-.fa-10x {
-    font-size: 10em;
-}
-.fa.center-block {
-    text-align: center;
-}
-
-div.media_iframe_video {
-    margin: 0 auto;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-
-    iframe {
-        width: 100%;
-        height: 100%;
-        .o-position-absolute(@top: 0);
-        margin: 0 auto;
-        margin-left: -50%;
-    }
-    &.padding-small iframe {
-        padding: 4px;
-    }
-    &.padding-medium iframe {
-        padding: 8px;
-    }
-    &.padding-large iframe {
-        padding: 16px;
-    }
-    &.padding-xl iframe {
-        padding: 32px;
-    }
-
-    .media_iframe_video_size {
-        padding-bottom: 66.5%;
-        position: relative;
-        width: 100%;
-        height: 0;
-    }
-
-    .css_editable_mode_display {
-        .o-position-absolute();
-        width: 100%;
-        height: 100%;
-        display: none;
-        z-index: 2;
-    }
-}
-
-html[data-browser^="msie"] div.media_iframe_video iframe {
-    margin-left: 0;
-}
-
-@media (max-width: @screen-xs-max) {
-    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
-        -webkit-transform: none !important;
-        -moz-transform: none !important;
-        -ms-transform: none !important;
-        -o-transform: none !important;
-        transform: none !important;
-    }
-}
-
-// Fields
-address {
-    .fa.fa-mobile-phone {
-        margin: 0 3px 0 2px;
-    }
-    .fa.fa-file-text-o {
-        margin-right: 1px;
-    }
-}
-
-span[data-oe-type="monetary"] {
-    white-space: nowrap;
-}
-
-// Menus
-// TODO should not be here but used by web_studio so must stay here for now
-ul.oe_menu_editor {
-    .oe_menu_placeholder {
-        outline: 1px dashed #4183C4;
-    }
-    ul {
-        list-style: none;
-    }
-    li div {
-        cursor: move;
-    }
-}
-
-// Generate all spacings for all sizes
-.o-spacing-all(@factor: 1) {
-    // Generate vertical margin/padding classes used by the editor
-    .o-generate-spacings(256/8);
-    .o-generate-spacings(@n, @i: 0) when (@i =< @n) {
-        .o-vspacing(@i * 8);
-        .o-generate-spacings(@n, @i + 1);
-    }
-    .o-vspacing(4, @factor);
-
-    // 92px vertical margin is kept for compatibility
-    .o-vmargins(92, @factor);
-
-    // Some horizontal margin classes defined for convenience
-    // (and compatibility)
-    .o-hmargins(0, @factor);
-    .o-hmargins(4, @factor);
-    .o-hmargins(8, @factor);
-    .o-hmargins(16, @factor);
-    .o-hmargins(32, @factor);
-    .o-hmargins(64, @factor);
-}
-
-// Generate all spacings for one size, scalled by a given factor
-// (0 <= factor <= 1)
-.o-vspacing(@name, @factor: 1) {
-    .o-vmargins(@name, @factor);
-    .o-vpaddings(@name, @factor);
-}
-.o-vmargins(@name, @factor: 1) {
-    .o-vmargins-define(@name, @factor * @name);
-}
-.o-vpaddings(@name, @factor: 1) {
-    .o-vpaddings-define(@name, @factor * @name);
-}
-.o-hspacing(@name, @factor: 1) {
-    .o-hmargins(@name, @factor);
-    .o-hpaddings(@name, @factor);
-}
-.o-hmargins(@name, @factor: 1) {
-    .o-hmargins-define(@name, @factor * @name);
-}
-.o-hpaddings(@name, @factor: 1) {
-    .o-hpaddings-define(@name, @factor * @name);
-}
-
-// Generate all spacings for one size, given the name of the spacing and
-// intended size
-.o-vmargins-define(@name, @size: @name) {
-    .mt@{name} { margin-top: unit(@size, px)!important; }
-    .mb@{name} { margin-bottom: unit(@size, px)!important; }
-}
-.o-vpaddings-define(@name, @size: @name) {
-    .pt@{name} { padding-top: unit(@size, px)!important; }
-    .pb@{name} { padding-bottom: unit(@size, px)!important; }
-}
-.o-hmargins-define(@name, @size: @name) {
-    .ml@{name} { margin-left: unit(@size, px)!important; }
-    .mr@{name} { margin-right: unit(@size, px)!important; }
-}
-.o-hpaddings-define(@name, @size: @name) {
-    .pl@{name} { padding-left: unit(@size, px)!important; }
-    .pr@{name} { padding-right: unit(@size, px)!important; }
-}
-
-// Generate all margins
-.o-spacing-all();
-
-// Underline
-a.o_underline {
-    text-decoration: underline;
-    &:hover {
-        text-decoration: underline;
-    }
-}
-
-// Colors
-@gray-white: #fff;
-
-@color-alpha: #1cc1a9;
-@color-beta: #875A7B;
-@color-gamma: #BA3C3D;
-@color-delta: #0D6759;
-@color-epsilon: #0B2E59;
-
-// Greyscale transparent colours
-@color-black-25: fade(black, 25%);
-@color-black-50: fade(black, 50%);
-@color-black-75: fade(black, 75%);
-@color-white-25: fade(white, 25%);
-@color-white-50: fade(white, 50%);
-@color-white-75: fade(white, 75%);
-
-.o-create-color-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @content-color: @color) {
-    .bg-@{name} {
-        background-color: @color;
-        color: @complementary;
-        .text-muted {
-            color: fade(@complementary, 40%);
-        }
-    }
-    body .text-@{name} { // body to make the rules more important that bg-* ones
-        color: @content-color;
-    }
-}
-.o-create-color-btn-classes(@name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%), @border-color: darken(@color, 5%)) {
-    .btn-@{name} {
-        .button-variant(@complementary, @color, @border-color);
-    }
-}
-
-// Create classes for theme colors...
-.o-create-color-classes(alpha, @color-alpha);
-.o-create-color-classes(beta, @color-beta);
-.o-create-color-classes(gamma, @color-gamma);
-.o-create-color-classes(delta, @color-delta);
-.o-create-color-classes(epsilon, @color-epsilon);
-
-// ... and button classes
-.o-create-color-btn-classes(alpha, @color-alpha);
-.o-create-color-btn-classes(beta, @color-beta);
-.o-create-color-btn-classes(gamma, @color-gamma);
-.o-create-color-btn-classes(delta, @color-delta);
-.o-create-color-btn-classes(epsilon, @color-epsilon);
-
-// Create classes for UI colors
-.o-create-color-classes(primary, @brand-primary);
-.o-create-color-classes(success, @state-success-bg, @content-color: @state-success-text);
-.o-create-color-classes(info, @state-info-bg, @content-color: @state-info-text);
-.o-create-color-classes(warning, @state-warning-bg, @content-color: @state-warning-text);
-.o-create-color-classes(danger, @state-danger-bg, @content-color: @state-danger-text);
-
-// Create classes for greyscale colors
-.o-create-color-classes(~'black', @gray-base);
-.o-create-color-classes(~'gray-darker', @gray-darker);
-.o-create-color-classes(~'gray-dark', @gray-dark);
-.o-create-color-classes(~'gray', @gray);
-.o-create-color-classes(~'gray-light', @gray-light);
-.o-create-color-classes(~'gray-lighter', @gray-lighter);
-.o-create-color-classes(~'white', @gray-white);
-
-// Create classes for greyscale transparent colours
-.o-create-color-classes(~'black-25', @color-black-25);
-.o-create-color-classes(~'black-50', @color-black-50);
-.o-create-color-classes(~'black-75', @color-black-75);
-.o-create-color-classes(~'white-25', @color-white-25);
-.o-create-color-classes(~'white-50', @color-white-50);
-.o-create-color-classes(~'white-75', @color-white-75);
diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less
deleted file mode 100644
index 7b6f9565b4c..00000000000
--- a/addons/web_editor/static/src/less/web_editor.variables.less
+++ /dev/null
@@ -1,202 +0,0 @@
-///
-/// This files regroups the LESS variables and mixins which are specific to the editor.
-///
-
-@o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
-
-@o-we-color-dark: #2c2c36;
-@o-we-color-darker: darken(@o-we-color-dark, 2%);
-@o-we-color-divider: #33363e;
-@o-we-color-light: #4e525b;
-@o-we-color-normal: #50545d;
-@o-we-color-paper: #fcfcfc;
-@o-we-color-text-normal: #999999;
-@o-we-color-text-light: #d4d5d7;
-@o-we-color-danger: #e6586c;
-@o-we-color-warning: #f0ad4e;
-@o-we-color-success: #40ad67;
-@o-we-color-info: #6999a8;
-
-@o-we-sidebar-width: 210px;
-
-@o-we-tab-active-bg: #3D4048;
-
-// Transitions
-@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1);
-
-// ============    'Preview' component Mixins    ===============
-// Create a "preview" work-area to edit/customize specific elements
-
-.o-we-preview-box(@padding: 0px 25px 25px 25px, @color-text: white) {
-    padding: @padding;
-    border-top: 1px solid black;
-    border-bottom: 1px solid white;
-    .o-linear-gradient(-150deg, @o-we-color-dark, @o-we-color-darker);
-
-    color:  @color-text;
-}
-
-.o-we-preview-content() {
-    display: inline-block;
-    max-width: 100%;
-    overflow: hidden;
-    box-shadow: 0 0 15px 2px #000;
-}
-
-
-// ============    Preservetion mixins    ===============
-// Used to preserve web_editor and website UI from themes customizations
-
-.o-w-preserve-base() {
-    font-family: @o-we-font-family;
-    line-height: 1.42857143;
-    color: @o-we-color-divider;
-
-    .text-muted {
-        color: @o-we-color-text-normal;
-    }
-}
-
-.o-w-preserve-headings() {
-    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-        font-family: @o-we-font-family;
-        line-height: 1.42857143;
-        color: @o-we-color-dark;
-        font-weight: bold;
-    }
-}
-
-.o-w-preserve-links() {
-    a:not(.o_btn_preview) {
-        color: @odoo-brand-optional;
-
-        &:focus, &:active, &:focus:active {
-            outline: none!important;
-        }
-    }
-
-    .label {
-        &:hover a, a {
-            color: #fff;
-        }
-    }
-}
-
-.o-w-preserve-forms() {
-    .form-control {
-        height: 34px;
-        padding: 6px 12px;
-        font-size: 14px;
-        line-height: 1.42857143;
-        border: 1px solid @o-we-color-text-light;
-        color: #555;
-        background-color: #fff;
-        border-radius: 0;
-    }
-
-    .has-error {
-        .form-control {
-            border-color: @state-danger-text;
-        }
-    }
-
-    select.form-control {
-        .o-appearance(none);
-        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
-        background-position: 100% 65%;
-        background-repeat: no-repeat;
-    }
-}
-
-.o-w-preserve-modals() {
-    background: 0;
-
-    .modal-content {
-        border-radius: 0;
-        background-color: @o-we-color-paper;
-
-        .modal-body {
-            background-color: white;
-        }
-        .modal-footer {
-            text-align: left;
-        }
-    }
-}
-
-.o-w-preserve-tabs() {
-    .nav-tabs {
-        border-bottom: 1px solid @gray-lighter;
-
-        > li  {
-            > a {
-                line-height: 1.42857143;
-                color: @o-we-color-light;
-                &:hover {
-                    border-color: @gray-lighter;
-                }
-            }
-
-            &.active > a {
-                &, &:hover, &:focus {
-                    color: @o-we-color-normal;
-                    background-color: @o-we-color-paper;
-                    border-color: @gray-lighter;
-                    border-bottom-color: transparent;
-                }
-            }
-        }
-    }
-}
-
-.o-w-preserve-btn() {
-    .btn:not(.o_btn_preview) {
-        border-width: 1px;
-        border-radius: 0;
-        font-weight: normal;
-        .button-size(6px; 12px; 14px; 1.42857143; 0);
-
-        &.btn-primary {
-            .button-variant(white, @odoo-brand-optional, darken(@odoo-brand-optional,5%));
-        }
-        &.btn-default {
-            .button-variant(@o-we-color-normal, white, @o-we-color-text-light);
-        }
-        &.btn-link {
-            .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
-        }
-        &.btn-success {
-            .button-variant(white; @o-we-color-success; darken(@o-we-color-success, 5%));
-        }
-        &.btn-info {
-            .button-variant(white; @o-we-color-info; darken(@o-we-color-info, 5%));
-        }
-        &.btn-warning {
-            .button-variant(white; @o-we-color-warning; darken(@o-we-color-warning, 5%));
-        }
-        &.btn-danger {
-            .button-variant(white; @o-we-color-danger; darken(@o-we-color-danger, 5%));
-        }
-
-        &.btn-lg {
-            .button-size(10px; 16px; 18px; 1.3333333; 0);
-        }
-        &.btn-sm {
-            .button-size(5px; 10px; 12px; 1.5; 0);
-        }
-        &.btn-xs {
-            .button-size(1px; 5px; 12px; 1.5; 0);
-        }
-    }
-}
-
-.o-w-preserve-wells() {
-    .well {
-        padding: 19px;
-        margin-bottom: 20px;
-        background-color: @o-we-color-paper;
-        border: 1px solid darken(@o-we-color-paper,5%);
-        border-radius: 0;
-        .box-shadow(none);
-    }
-}
diff --git a/addons/web_editor/static/src/less/web_editor.backend.less b/addons/web_editor/static/src/scss/web_editor.backend.scss
index 7ddbaeaa7ce..7ddbaeaa7ce 100644
--- a/addons/web_editor/static/src/less/web_editor.backend.less
+++ b/addons/web_editor/static/src/scss/web_editor.backend.scss
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
new file mode 100644
index 00000000000..2d760ff3193
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -0,0 +1,271 @@
+///
+/// This file regroups basic style rules for web_editor enable page edition and backend utils.
+///
+
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+.css_non_editable_mode_hidden {
+    display: none !important;
+}
+.editor_enable .css_editable_mode_hidden {
+    display: none !important;
+}
+.note-toolbar {
+    margin-left: 0 !important;
+}
+.note-popover .popover > .arrow {
+    display: none;
+}
+
+/* ----- GENERIC LAYOUTING HELPERS ---- */
+/* table */
+#wrapwrap, .o_editable {
+    // Only style editor-made tables (shop/portal/... tables are not supposed to
+    // use table-bordered...)
+    table.table.table-bordered {
+        table-layout: fixed;
+        td {
+            min-width: 20px;
+        }
+    }
+    @media (max-width: $screen-xs-max) {
+        .table-responsive > table.table {
+            table-layout: auto;
+        }
+    }
+}
+
+// Medias
+img.shadow {
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+}
+img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small {
+    padding: 4px;
+}
+img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium {
+    padding: 8px;
+}
+img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large {
+    padding: 16px;
+}
+img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl {
+    padding: 32px;
+}
+
+.fa-6x {
+    font-size: 6em;
+}
+.fa-7x {
+    font-size: 7em;
+}
+.fa-8x {
+    font-size: 8em;
+}
+.fa-9x {
+    font-size: 9em;
+}
+.fa-10x {
+    font-size: 10em;
+}
+.fa.center-block {
+    text-align: center;
+}
+
+div.media_iframe_video {
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        @include o-position-absolute($top: 0);
+        margin: 0 auto;
+        margin-left: -50%;
+    }
+    &.padding-small iframe {
+        padding: 4px;
+    }
+    &.padding-medium iframe {
+        padding: 8px;
+    }
+    &.padding-large iframe {
+        padding: 16px;
+    }
+    &.padding-xl iframe {
+        padding: 32px;
+    }
+
+    .media_iframe_video_size {
+        padding-bottom: 66.5%;
+        position: relative;
+        width: 100%;
+        height: 0;
+    }
+
+    .css_editable_mode_display {
+        @include o-position-absolute;
+        width: 100%;
+        height: 100%;
+        display: none;
+        z-index: 2;
+    }
+}
+
+html[data-browser^="msie"] div.media_iframe_video iframe {
+    margin-left: 0;
+}
+
+@media (max-width: $screen-xs-max) {
+    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
+        -webkit-transform: none !important;
+        -moz-transform: none !important;
+        -ms-transform: none !important;
+        -o-transform: none !important;
+        transform: none !important;
+    }
+}
+
+// Fields
+address {
+    .fa.fa-mobile-phone {
+        margin: 0 3px 0 2px;
+    }
+    .fa.fa-file-text-o {
+        margin-right: 1px;
+    }
+}
+
+span[data-oe-type="monetary"] {
+    white-space: nowrap;
+}
+
+// Menus
+// TODO should not be here but used by web_studio so must stay here for now
+ul.oe_menu_editor {
+    .oe_menu_placeholder {
+        outline: 1px dashed #4183C4;
+    }
+    ul {
+        list-style: none;
+    }
+    li div {
+        cursor: move;
+    }
+}
+
+// Generate all spacings for all sizes
+@mixin o-spacing-all($factor: 1) {
+    // Generate vertical margin/padding classes used by the editor
+    @for $i from 0 through (256 / 8) {
+        @include o-vspacing($i * 8);
+    }
+    @include o-vspacing(4, $factor);
+
+    // 92px vertical margin is kept for compatibility
+    @include o-vmargins(92, $factor);
+
+    // Some horizontal margin classes defined for convenience
+    // (and compatibility)
+    @include o-hmargins(0, $factor);
+    @include o-hmargins(4, $factor);
+    @include o-hmargins(8, $factor);
+    @include o-hmargins(16, $factor);
+    @include o-hmargins(32, $factor);
+    @include o-hmargins(64, $factor);
+}
+
+// Generate all spacings for one size, scalled by a given factor
+// (0 <= factor <= 1)
+@mixin o-vspacing($name, $factor: 1) {
+    @include o-vmargins($name, $factor);
+    @include o-vpaddings($name, $factor);
+}
+@mixin o-vmargins($name, $factor: 1) {
+    @include o-vmargins-define($name, $factor * $name);
+}
+@mixin o-vpaddings($name, $factor: 1) {
+    @include o-vpaddings-define($name, $factor * $name);
+}
+@mixin o-hspacing($name, $factor: 1) {
+    @include o-hmargins($name, $factor);
+    @include o-hpaddings($name, $factor);
+}
+@mixin o-hmargins($name, $factor: 1) {
+    @include o-hmargins-define($name, $factor * $name);
+}
+@mixin o-hpaddings($name, $factor: 1) {
+    @include o-hpaddings-define($name, $factor * $name);
+}
+
+// Generate all spacings for one size, given the name of the spacing and
+// intended size
+@mixin o-vmargins-define($name, $size: $name) {
+    .mt#{$name} { margin-top: $size * 1px !important; }
+    .mb#{$name} { margin-bottom: $size * 1px !important; }
+}
+@mixin o-vpaddings-define($name, $size: $name) {
+    .pt#{$name} { padding-top: $size * 1px !important; }
+    .pb#{$name} { padding-bottom: $size * 1px !important; }
+}
+@mixin o-hmargins-define($name, $size: $name) {
+    .ml#{$name} { margin-left: $size * 1px !important; }
+    .mr#{$name} { margin-right: $size * 1px !important; }
+}
+@mixin o-hpaddings-define($name, $size: $name) {
+    .pl#{$name} { padding-left: $size * 1px !important; }
+    .pr#{$name} { padding-right: $size * 1px !important; }
+}
+
+// Generate all margins
+@include o-spacing-all;
+
+// Underline
+a.o_underline {
+    text-decoration: underline;
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+// Create classes for theme colors...
+@include o-create-color-classes(alpha, $color-alpha);
+@include o-create-color-classes(beta, $color-beta);
+@include o-create-color-classes(gamma, $color-gamma);
+@include o-create-color-classes(delta, $color-delta);
+@include o-create-color-classes(epsilon, $color-epsilon);
+
+// ... and button classes
+@include o-create-color-btn-classes(alpha, $color-alpha);
+@include o-create-color-btn-classes(beta, $color-beta);
+@include o-create-color-btn-classes(gamma, $color-gamma);
+@include o-create-color-btn-classes(delta, $color-delta);
+@include o-create-color-btn-classes(epsilon, $color-epsilon);
+
+// Create classes for UI colors
+@include o-create-color-classes(primary, $brand-primary);
+@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
+@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
+@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
+@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);
+
+// Create classes for greyscale colors
+@include o-create-color-classes('black', $gray-base);
+@include o-create-color-classes('gray-darker', $gray-darker);
+@include o-create-color-classes('gray-dark', $gray-dark);
+@include o-create-color-classes('gray', $gray);
+@include o-create-color-classes('gray-light', $gray-light);
+@include o-create-color-classes('gray-lighter', $gray-lighter);
+@include o-create-color-classes('white', $gray-white);
+
+// Create classes for greyscale transparent colours
+@include o-create-color-classes('black-25', $color-black-25);
+@include o-create-color-classes('black-50', $color-black-50);
+@include o-create-color-classes('black-75', $color-black-75);
+@include o-create-color-classes('white-25', $color-white-25);
+@include o-create-color-classes('white-50', $color-white-50);
+@include o-create-color-classes('white-75', $color-white-75);
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 76e86b98cb9..72e6dc56872 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -1,23 +1,38 @@
+// Mixins for buttons with alpha bg-color
+@mixin o-alpha-button-preview {
+    position: relative;
+    background-image: url('/web_editor/static/src/img/transparent.png');
+    background-size: 10px auto;
+    z-index: 1;
+
+    // Place an overlay that inherit the button's bg-color.
+    &::before {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background-color: inherit;
+    }
+}
 
 // TOP BAR (EDIT)
 #web_editor-top-edit {
-    .o-position-absolute(0, 0, auto, 0);
+    @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
-    height: @odoo-navbar-height;
-    z-index: @zindex-modal - 9;
+    height: $o-navbar-height;
+    z-index: $zindex-modal - 9;
 
     background-color: rgba(0,0,0,0);
-    .o-transition(background-color, 400ms, @o-we-md-ease);
-    font-family: @o-we-font-family;
+    @include o-transition(background-color, 400ms, $o-we-md-ease);
+    font-family: $o-we-font-family;
 
     form.navbar-form {
         height: 100%;
         z-index: 1060;
         margin: 0;
         padding: 0;
-        .o-position-absolute(@right: -@o-we-sidebar-width);
-        .o-transition(right, 0.4s, @o-we-md-ease);
-        border-left: 1px solid @o-we-color-divider;
+        @include o-position-absolute($right: -$o-we-sidebar-width);
+        @include o-transition(right, 0.4s, $o-we-md-ease);
+        border-left: 1px solid $o-we-color-divider;
         background-color: inherit;
 
         .btn-group {
@@ -30,27 +45,27 @@
             padding: 10px;
             line-height: 1.2;
             font-size: 13px;
-            font-family: @o-we-font-family;
+            font-family: $o-we-font-family;
 
-            .o-transition(all, 0.3s);
+            @include o-transition(all, 0.3s);
             border: none;
             border-radius: 0;
 
             .fa {
-                margin-right: @grid-gutter-width/4;
+                margin-right: $grid-gutter-width/4;
                 &.fa-times {
-                    color: @o-we-color-danger;
+                    color: $o-we-color-danger;
                 }
             }
 
             &.btn-primary {
-                .button-variant(white, @odoo-brand-primary, @odoo-brand-primary);
+                @include button-variant(white, $o-brand-primary, $o-brand-primary);
             }
             &.btn-default {
-                .button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+                @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 
                 &:hover {
-                    background: fade(black, 50%);
+                    background: rgba(black, 0.5);
                 }
             }
 
@@ -71,48 +86,45 @@
     padding: 4px;
 }
 html[lang] > body.editor_enable [data-oe-translation-state] {
-    @o-color-content-to-translate: rgb(255, 255, 90);
-    @o-color-translated-content: rgb(120, 215, 110);
-
-    background: fade(@o-color-content-to-translate, 50%)!important;
+    background: rgba($o-we-content-to-translate-color, 0.5)!important;
 
     &[data-oe-translation-state="translated"] {
-        background: fade(@o-color-translated-content, 50%)!important;
+        background: rgba($o-we-translated-content-color, 0.5)!important;
     }
     &.o_dirty {
-        background: fade(@o-color-translated-content, 25%)!important;
+        background: rgba($o-we-translated-content-color, 0.25)!important;
     }
 }
 
 // SNIPPET PANEL
 #oe_snippets {
-    .o-w-preserve-btn();
+    @include o-w-preserve-btn;
 
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
-    .o-position-absolute(0, auto, 0, -@o-we-sidebar-width);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
+    @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width);
     position: fixed;
-    width: @o-we-sidebar-width;
-    z-index: @zindex-modal - 9;
+    width: $o-we-sidebar-width;
+    z-index: $zindex-modal - 9;
 
-    font-family: Roboto, @font-family-sans-serif;
-    border-right: 1px solid @o-we-color-divider;
-    .o-transition(left, 400ms, @o-we-md-ease);
-    .o-linear-gradient(45deg, @o-we-color-normal, darken(@o-we-color-normal, 10%));
+    font-family: Roboto, $font-family-sans-serif;
+    border-right: 1px solid $o-we-color-divider;
+    @include o-transition(left, 400ms, $o-we-md-ease);
+    @include o-linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%));
     box-shadow: 0px 10px 10px -10px black inset;
 
     #snippets_menu {
-        .o-flex(0, 0, auto);
-        height: @odoo-navbar-height;
-        line-height: @odoo-navbar-height;
+        @include o-flex(0, 0, auto);
+        height: $o-navbar-height;
+        line-height: $o-navbar-height;
         margin: 0;
         padding: 0;
-        background: @o-we-color-dark;
+        background: $o-we-color-dark;
         text-align: center;
         font-weight: normal;
         font-size: 17px;
         color: white;
-        font-family: @o-we-font-family;
+        font-family: $o-we-font-family;
     }
 
     #o_scroll {
@@ -121,9 +133,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
         .o_panel_header {
             color: #999999;
-            .o-flex-display();
-            .o-align-items(center);
-            .o-justify-content(center);
+            @include o-flex-display;
+            @include o-align-items(center);
+            @include o-justify-content(center);
             padding: 3%;
             color: white;
             margin-bottom: 3%;
@@ -145,7 +157,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 margin: 0 0 6% 3%;
                 box-shadow: none;
                 background-color: transparent;
-                .user-select(none);
+                @include user-select(none);
 
                 cursor: pointer;
                 cursor: copy;
@@ -161,8 +173,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     }
 
                     &:hover .oe_snippet_thumbnail_img {
-                        .o-transition(transform, 200ms, ease);
-                        .scale(1.05);
+                        @include o-transition(transform, 200ms, ease);
+                        @include scale(1.05);
                     }
                 }
 
@@ -181,7 +193,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     }
                     .btn.o_install_btn {
                         display: none;
-                        .o-position-absolute(16px, 4px, auto, 4px);
+                        @include o-position-absolute(16px, 4px, auto, 4px);
                     }
                     &:hover .btn.o_install_btn {
                         display: block;
@@ -198,7 +210,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 .oe_snippet { // No root because can be drag and drop (and the helper is in the body)
     position: relative;
     width: 100px;
-    background-color: @o-we-color-normal;
+    background-color: $o-we-color-normal;
 
     > :not(.oe_snippet_thumbnail) {
         display: none!important;
@@ -210,7 +222,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         .oe_snippet_thumbnail_img {
             width: 100%;
             height: 0;
-            border: 1px solid @o-we-color-normal;
+            border: 1px solid $o-we-color-normal;
             padding-bottom: 75%;
             background-size: cover;
             background-position: center center;
@@ -223,12 +235,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         }
         .oe_snippet_thumbnail_title {
             display: block;
-            border: 1px solid @o-we-color-dark;
+            border: 1px solid $o-we-color-dark;
             padding: 5px;
             font-size: 12px;
             font-weight: 300;
             text-shadow: none;
-            color: @o-we-color-text-light;
+            color: $o-we-color-text-light;
         }
         &:hover .oe_snippet_thumbnail_title {
             color: white;
@@ -239,54 +251,50 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        background-color: fade(@odoo-brand-primary, 20%);
+        background-color: rgba($o-brand-primary, 0.2);
     }
 }
 #wrapwrap .oe_drop_zone {
-    background-color: fade(@odoo-brand-primary, 5%);
-    .o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate);
+    background-color: rgba($o-brand-primary, 0.05);
+    @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate);
 
     &.oe_insert {
-        @odoo-dropzone-size: 40px;
-        @odoo-dropzone-border-width: 2px;
-        @odoo-dropzone-border: @odoo-dropzone-border-width dashed @odoo-brand-primary;
-
         z-index: 999;
 
-        border: @odoo-dropzone-border;
+        border: $o-we-dropzone-border;
         border-top: none;
         border-bottom: none;
 
         position: relative;
         width: 100%;
-        height: @odoo-dropzone-size;
-        margin: -@odoo-dropzone-size/2 0;
+        height: $o-we-dropzone-size;
+        margin: (-$o-we-dropzone-size/2) 0;
 
-        .o-transition(margin, 400ms, linear);
+        @include o-transition(margin, 400ms, linear);
 
         &:after {
             content: "";
             display: block;
             width: 100%;
             height: 50%;
-            border-bottom: @odoo-dropzone-border;
+            border-bottom: $o-we-dropzone-border;
             box-sizing: content-box;
         }
 
         &.oe_vertical {
-            border: 2px dashed @odoo-brand-primary;
+            border: 2px dashed $o-brand-primary;
             border-left: none;
             border-right: none;
 
-            width: @odoo-dropzone-size;
+            width: $o-we-dropzone-size;
             float: left;
-            margin: 0 -@odoo-dropzone-size/2;
+            margin: 0 (-$o-we-dropzone-size/2);
 
             &:after {
                 width: 50%;
                 height: 100%;
                 border-bottom: none;
-                border-right: @odoo-dropzone-border;
+                border-right: $o-we-dropzone-border;
             }
         }
     }
@@ -294,20 +302,17 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 // MANIPULATORS
 #oe_manipulators {
-    @odoo-handle-edge-size: 1px;
-    @odoo-handle-border-width: 1px;
-
     position: relative;
 
     // SNIPPET MANIPULATORS
     .oe_overlay {
-        .o-position-absolute();
+        @include o-position-absolute;
         z-index: 1002;
         display: none;
         height: 0;
         background: transparent;
         text-align: center;
-        .o-transition(opacity, 400ms, linear);
+        @include o-transition(opacity, 400ms, linear);
         &.o_keypress {
             opacity: 0;
         }
@@ -317,8 +322,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
         // OVERLAY OPTIONS
         > .oe_overlay_options {
-            font-family: @o-we-font-family;
-            .o-position-absolute(@bottom: 0, @left: 0);
+            font-family: $o-we-font-family;
+            @include o-position-absolute($bottom: 0, $left: 0);
             width: 250px; // the parent oe_overlay has a width equal to the snippet width, the 250px is there to force the options to stay on one line without overriding bootstrap .btn-group
             text-align: left;
 
@@ -326,24 +331,22 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 white-space: nowrap;
 
                 .btn {
-                    @o-overlay-option-size: 25px;
-
                     display: inline-block;
-                    width: @o-overlay-option-size;
-                    height: @o-overlay-option-size;
+                    width: $o-we-overlay-option-size;
+                    height: $o-we-overlay-option-size;
                     padding: 0;
-                    border: 1px solid @o-we-color-dark;
-                    line-height: @o-overlay-option-size;
+                    border: 1px solid $o-we-color-dark;
+                    line-height: $o-we-overlay-option-size;
                     font-size: 11px;
                     border-radius: 0;
                     font-weight: normal;
 
-                    .o-transition(all, 400ms);
-                    color: @o-we-color-text-light;
-                    background-color: @o-we-color-light;
+                    @include o-transition(all, 400ms);
+                    color: $o-we-color-text-light;
+                    background-color: $o-we-color-light;
                     &:hover {
                         color: white;
-                        background-color: lighten(@o-we-color-dark, 10%);
+                        background-color: lighten($o-we-color-dark, 10%);
 
                         > .fa {
                             color: white;
@@ -352,24 +355,24 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
                     &.oe_snippet_remove {
                         color: white;
-                        background-color: @o-we-color-danger;
-                        border-color: darken(@o-we-color-danger, 20%);
+                        background-color: $o-we-color-danger;
+                        border-color: darken($o-we-color-danger, 20%);
 
                         > .fa {
                             color: white;
                         }
 
                         &:hover {
-                            background-color: darken(@o-we-color-danger, 20%);
+                            background-color: darken($o-we-color-danger, 20%);
                         }
                     }
                     &.oe_snippet_parent > i {
-                        .scaleX(-1);
+                        @include scaleX(-1);
                         font-size: 12px;
                     }
 
                     > .fa {
-                        color: @o-we-color-text-light;
+                        color: $o-we-color-text-light;
                     }
                 }
 
@@ -378,11 +381,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     .btn {
                         width: auto;
                         padding: 0 25px 0 5px;
-                        background-color: @o-we-color-dark;
+                        background-color: $o-we-color-dark;
                         text-transform: uppercase;
                         &:hover, &:active, &:focus {
-                            background-color: lighten(@o-we-color-dark, 5%);
-                            border-color: lighten(@o-we-color-dark, 10%);
+                            background-color: lighten($o-we-color-dark, 5%);
+                            border-color: lighten($o-we-color-dark, 10%);
                             color: white;
                         }
                         &:active, &:focus, &:active:focus {
@@ -392,22 +395,22 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                             content: "";
                             width: 7px;
                             height: 2px;
-                            background-color: @o-we-color-text-light;
-                            .o-position-absolute(46%);
-                            .o-transition(all, 0.3s);
+                            background-color: $o-we-color-text-light;
+                            @include o-position-absolute(46%);
+                            @include o-transition(all, 0.3s);
                         }
                         &:before {
                             right: 9px;
-                            .rotate(45deg);
+                            @include rotate(45deg);
                         }
                         &:after {
                             right: 5px;
-                            .rotate(-45deg);
+                            @include rotate(-45deg);
                         }
                     }
                     // Open menu
                     &.open .btn {
-                        background-color: @o-we-color-light;
+                        background-color: $o-we-color-light;
                         &:before, &:after {
                             width: 9px;
                         }
@@ -416,7 +419,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                             transform: translateX(5px) rotate(-45deg);
                         }
                         &:after {
-                            .rotate(45deg);
+                            @include rotate(45deg);
                         }
                     }
 
@@ -424,11 +427,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     .dropdown-menu {
                         margin: -1px 0 0 0;
                         padding: 0;
-                        border: 1px solid @o-we-color-dark;
+                        border: 1px solid $o-we-color-dark;
                         border-radius: 0;
-                        background-color: @o-we-color-light;
+                        background-color: $o-we-color-light;
                         a {
-                            color: @o-we-color-text-light;
+                            color: $o-we-color-text-light;
                             font-weight: normal;
                             font-size: 12px;
                             padding: 5px 35px 5px 20px;
@@ -437,7 +440,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                         > li {
                             position: relative;
                             &:hover {
-                                background-color: fadeOut(@o-we-color-dark, 50%);
+                                background-color: fadeOut($o-we-color-dark, 50%);
                                 > a {
                                     color: white;
                                     background: transparent;
@@ -455,22 +458,22 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                 }
                             }
                             &.dropdown-submenu:before {
-                                .o-position-absolute(@top: 10px, @right: 10px);
-                                .o-caret-right(3px);
-                                border-left-color: @o-we-color-text-light;
+                                @include o-position-absolute($top: 10px, $right: 10px);
+                                @include o-caret-right(3px);
+                                border-left-color: $o-we-color-text-light;
                             }
                             &.divider {
-                                background-color: @o-we-color-divider;
+                                background-color: $o-we-color-divider;
                                 margin: 0 8px;
                             }
                             &.active > a {
                                 color: white;
-                                background-color: fadeOut(@o-we-color-dark, 50%);
+                                background-color: fadeOut($o-we-color-dark, 50%);
                                 &:before {
-                                    .o-position-absolute(@top: 5px, @left: 5px);
+                                    @include o-position-absolute($top: 5px, $left: 5px);
                                     content: "\f00c";
                                     font-family: "FontAwesome";
-                                    color: @odoo-brand-optional;
+                                    color: $o-brand-optional;
                                 }
                             }
                             &.dropdown-header {
@@ -493,9 +496,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                     margin: 7px 0 4px 4px;
                                     &::before {
                                         content: "\f148";
-                                        .o-position-absolute(@top: 2px, @left: 8px);
+                                        @include o-position-absolute($top: 2px, $left: 8px);
                                         font-family: FontAwesome;
-                                        .scaleX(-1);
+                                        @include scaleX(-1);
                                     }
                                     ~ li:not(.dropdown-header) {
                                         a {
@@ -514,7 +517,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                 display: block;
                                 margin: 4px 35px 4px 20px;
                                 height: 1px;
-                                background: fade(@o-we-color-text-light, 10%);
+                                background: rgba($o-we-color-text-light, 0.1);
                             }
 
                             > a > i {
@@ -529,60 +532,57 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
         &.o_top_cover > .oe_overlay_options {
             bottom: auto;
-            top: @odoo-handle-border-width;
-            right: @odoo-handle-border-width;
+            top: $o-we-handle-border-width;
+            right: $o-we-handle-border-width;
         }
 
         // HANDLES
         > .o_handles {
-            @o-handles-offset-to-hide: 10000px;
-            @o-handless-accent-color: #00e2ff;
-            .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
+            @include o-position-absolute(-$o-we-handles-offset-to-hide, 0, auto, 0);
 
             &:hover > .o_handle {
-                background-color: fade(@o-handless-accent-color, 5%);
+                background-color: rgba($o-we-handles-accent-color, 0.05);
             }
 
             > .o_handle {
-                @o-handle-btn-size: 18px;
 
                 position: relative;
-                border: 0 solid @o-handless-accent-color;
-                .o-transition(background, 300ms);
+                border: 0 solid $o-we-handles-accent-color;
+                @include o-transition(background, 300ms);
 
                 &:hover, &.o_active {
-                    background-color: fade(@o-handless-accent-color, 20%);
+                    background-color: rgba($o-we-handles-accent-color, 0.2);
 
                     &:before {
                         content: '';
-                        .o-position-absolute(0, @left:50%);
+                        @include o-position-absolute(0, $left:50%);
                         width: 1px;
                         height: 100%;
                         margin-left: -1px;
-                        background-color: fade(@o-handless-accent-color, 50%);
+                        background-color: rgba($o-we-handles-accent-color, 0.5);
                     }
 
                     &.w:before {
-                        .o-position-absolute(50%, @left: 0);
+                        @include o-position-absolute(50%, $left: 0);
                         width: 100%;
                         height: 1px;
                     }
 
                     &:after {
-                        border-color: darken(@o-handless-accent-color, 10%);
-                        background-color: darken(@o-handless-accent-color, 20%);
+                        border-color: darken($o-we-handles-accent-color, 10%);
+                        background-color: darken($o-we-handles-accent-color, 20%);
                     }
                 }
 
                 &:after {
                     display: block;
-                    width: @o-handle-btn-size;
-                    height: @o-handle-btn-size;
-                    border: solid 1px darken(@o-handless-accent-color, 10%);
-                    line-height: @o-handle-btn-size - 2;
+                    width: $o-we-handles-btn-size;
+                    height: $o-we-handles-btn-size;
+                    border: solid 1px darken($o-we-handles-accent-color, 10%);
+                    line-height: $o-we-handles-btn-size - 2;
                     font-size: 14px;
                     font-family: FontAwesome;
-                    background-color: darken(@o-handless-accent-color, 20%);
+                    background-color: darken($o-we-handles-accent-color, 20%);
                     color: white;
                 }
                 &.w:after, &.e:after {
@@ -610,46 +610,46 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 }
 
                 &.w {
-                    .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
-                    width: @odoo-handle-edge-size;
-                    border-width: @odoo-handle-border-width;
+                    @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0);
+                    width: $o-we-handle-edge-size;
+                    border-width: $o-we-handle-border-width;
                     border-right-width: 0;
                     cursor: e-resize;
 
                     &:after {
-                        .o-position-absolute(@top: 50%, @left: 40%);
-                        margin-top: -@o-handle-btn-size/2;
+                        @include o-position-absolute($top: 50%, $left: 40%);
+                        margin-top: -$o-we-handles-btn-size/2;
                     }
                 }
                 &.e {
-                    .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto);
-                    width: @odoo-handle-edge-size;
-                    border-right-width: @odoo-handle-border-width;
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto);
+                    width: $o-we-handle-edge-size;
+                    border-right-width: $o-we-handle-border-width;
                     cursor: w-resize;
 
                     &:after {
-                        .o-position-absolute(@top: 50%, @right: 40%);
-                        margin-top: -@o-handle-btn-size/2;
+                        @include o-position-absolute($top: 50%, $right: 40%);
+                        margin-top: -$o-we-handles-btn-size/2;
                     }
                 }
                 &.n {
-                    .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
-                    border-top-width: @odoo-handle-border-width;
+                    @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0);
+                    border-top-width: $o-we-handle-border-width;
                     cursor: ns-resize;
 
                     &:after {
-                        .o-position-absolute(@left: 50%, @top: 40%);
-                        margin-left: -@o-handle-btn-size/2;
+                        @include o-position-absolute($left: 50%, $top: 40%);
+                        margin-left: -$o-we-handles-btn-size/2;
                     }
                 }
                 &.s {
-                    .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
-                    border-bottom-width: @odoo-handle-border-width;
+                    @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0);
+                    border-bottom-width: $o-we-handle-border-width;
                     cursor: ns-resize;
 
                     &:after {
-                        .o-position-absolute(@left: 50%, @bottom: 40%);
-                        margin-left: -@o-handle-btn-size/2;
+                        @include o-position-absolute($left: 50%, $bottom: 40%);
+                        margin-left: -$o-we-handles-btn-size/2;
                     }
                 }
 
@@ -686,12 +686,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
 
 // NOTE EDITOR
 .note-popover .popover {
-    height: @odoo-navbar-height;
+    height: $o-navbar-height;
     top: 0 !important;
     left: 0 !important;
     padding: 0;
-    margin: 0 0 0 @o-we-sidebar-width;
-    background-color: @o-we-color-dark;
+    margin: 0 0 0 $o-we-sidebar-width;
+    background-color: $o-we-color-dark;
     border-radius: 0;
     border-width: 0 1px;
     width: auto;
@@ -699,50 +699,50 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
     box-shadow: none;
 
     .popover-content {
-        height: @odoo-navbar-height;
+        height: $o-navbar-height;
         white-space: nowrap;
-        font-family: @o-we-font-family;
+        font-family: $o-we-font-family;
 
         h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-            font-family: @o-we-font-family;
+            font-family: $o-we-font-family;
         }
 
         .btn {
-            height: @odoo-navbar-height;
+            height: $o-navbar-height;
             border: none;
             border-radius: 0;
-            padding: @padding-base-vertical @padding-base-horizontal; // force this because of themes
-            background-color: @o-we-color-dark;
-            color: @o-we-color-text-normal;
+            padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes
+            background-color: $o-we-color-dark;
+            color: $o-we-color-text-normal;
             border-top: 2px solid transparent;
-            .o-transition(all, 0.3s);
+            @include o-transition(all, 0.3s);
 
             > .fa {
-                color: @o-we-color-text-normal;
+                color: $o-we-color-text-normal;
             }
 
             &:hover {
-                border-top: 2px solid @o-we-color-text-normal;
-                color: @o-we-color-text-light;
+                border-top: 2px solid $o-we-color-text-normal;
+                color: $o-we-color-text-light;
 
                 > .fa {
-                    color: @o-we-color-text-light;
+                    color: $o-we-color-text-light;
                 }
             }
 
             .o_image_alt {
-                .o-text-overflow(inline-block);
+                @include o-text-overflow(inline-block);
                 max-width: 100px;
             }
 
             &.active {
                 border-top: 2px solid white;
-                background-color: @o-we-color-dark;
-                color: @o-we-color-text-light;
+                background-color: $o-we-color-dark;
+                color: $o-we-color-text-light;
                 box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
 
                 > .fa {
-                    color: @o-we-color-text-light;
+                    color: $o-we-color-text-light;
                 }
             }
         }
@@ -752,7 +752,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             &.open, .btn-group.open {
                 .dropdown-toggle {
                     border-top: 2px solid white;
-                    background-color: @o-we-color-darker;
+                    background-color: $o-we-color-darker;
                     color: white;
                     box-shadow: none;
 
@@ -765,18 +765,18 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
         .dropdown-menu {
             margin: 0;
             border-radius: 0;
-            background-color: @o-we-color-darker;
-            color: @o-we-color-text-normal;
+            background-color: $o-we-color-darker;
+            color: $o-we-color-text-normal;
             > li > a {
                 width: 100%;
-                color: @o-we-color-text-light;
+                color: $o-we-color-text-light;
 
                 > .fa {
-                    color: @o-we-color-text-light;
+                    color: $o-we-color-text-light;
                 }
 
                 &:hover {
-                    background-color: @o-we-tab-active-bg;
+                    background-color: $o-we-tab-active-bg;
                     color: white;
 
                     > .fa {
@@ -793,7 +793,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             padding: 4px;
             border-radius: 2px;
             border: 1px solid #989898;
-            border-color: fadeOut(@o-we-color-text-normal, 0.5);
+            border-color: fadeOut($o-we-color-text-normal, 0.5);
         }
         .note-color-palette .note-color-row {
             height: auto!important;
@@ -808,7 +808,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                 float: left;
                 margin: 1px 1px 0 0;
                 border-color: black;
-                .o_alpha_button_preview();
+                @include o-alpha-button-preview;
 
                 &.o_small {
                     width: 16px;
@@ -876,10 +876,10 @@ table.colorpicker {
     }
 }
 .colorpicker {
-    background-color: @o-we-color-dark!important;
+    background-color: $o-we-color-dark!important;
 
     .o_colorpicker_sections {
-        border: 1px solid darken(@o-we-color-dark, 12%);
+        border: 1px solid darken($o-we-color-dark, 12%);
         border-width: 1px 0 0;
         font-size: 14px;
 
@@ -902,7 +902,7 @@ table.colorpicker {
                     padding: 5px 10px!important;
                     border-radius: 0;
                     background-color: transparent;
-                    color: darken(@o-we-color-text-light, 10%);
+                    color: darken($o-we-color-text-light, 10%);
                     > i.fa {
                         font-size: 20px;
                     }
@@ -917,7 +917,7 @@ table.colorpicker {
                     }
                 }
                 &.active > a {
-                    background-color: @o-we-tab-active-bg!important;
+                    background-color: $o-we-tab-active-bg!important;
                 }
             }
         }
@@ -927,7 +927,7 @@ table.colorpicker {
             margin-left: 50px;
             .tab-pane {
                 padding: 5px 10px;
-                background-color: @o-we-tab-active-bg;
+                background-color: $o-we-tab-active-bg;
             }
             &.o_unique_palette {
                 margin-left: 0;
@@ -946,7 +946,7 @@ table.colorpicker {
             display: block;
             width: 100%;
             height: 30px;
-            border: 1px solid @o-we-color-dark;
+            border: 1px solid $o-we-color-dark;
             border-radius: 3px;
             margin: 0 0 5px;
             padding: 0 20px;
@@ -954,15 +954,15 @@ table.colorpicker {
             font-size: 12px;
             font-weight: bold;
             text-align: left;
-            .o_alpha_button_preview();
+            @include o-alpha-button-preview;
 
             &:hover, &.selected {
-                box-shadow: 0px 0px 2px 2px @o-we-color-light;
+                box-shadow: 0px 0px 2px 2px $o-we-color-light;
             }
 
             &:after {
                 content: "A";
-                .o-position-absolute(0, 0);
+                @include o-position-absolute(0, 0);
                 width: 25px;
                 text-align: center;
                 font-size: 13px;
@@ -972,13 +972,13 @@ table.colorpicker {
             &.selected:after {
                 content: "\f00c";
                 font-family: "FontAwesome";
-                color: @brand-success;
+                color: $brand-success;
             }
 
             &[data-event="foreColor"] {
-                background-color: @o-we-color-normal;
+                background-color: $o-we-color-normal;
                 &:after {
-                    background-color: fade(white, 30%);
+                    background-color: rgba(white, 0.3);
                 }
             }
 
@@ -997,22 +997,22 @@ table.colorpicker {
     }
     .note-palette-title {
         padding: 10px 0px 10px 10px;
-        color: @o-we-color-text-light;
+        color: $o-we-color-text-light;
         font-weight: bold;
     }
     .palette-reset {
-        .o-position-absolute(0, 0);
+        @include o-position-absolute(0, 0);
         margin: 0;
         padding: 5px 10px 0;
         .note-color-reset {
             font-size: 20px!important;
-            color: desaturate(fade(@o-we-color-danger, 60%), 40%);
+            color: desaturate(rgba($o-we-color-danger, 0.6), 40%);
             margin: 1px 0 0;
             padding: 0;
             cursor: pointer;
             &:hover {
                 background: transparent!important;
-                color: @o-we-color-danger;
+                color: $o-we-color-danger;
             }
         }
     }
@@ -1020,18 +1020,18 @@ table.colorpicker {
 
 // ENTER IN EDIT MODE
 body.editor_enable {
-    padding-top: @odoo-navbar-height!important;
+    padding-top: $o-navbar-height!important;
 
     #web_editor-top-edit {
-        background-color: @o-we-color-dark;
+        background-color: $o-we-color-dark;
         form.navbar-form {
             right: 0;
         }
     }
 
     &.editor_has_snippets {
-        .o-transition(padding-left, 400ms, @o-we-md-ease);
-        padding-left: @o-we-sidebar-width!important;
+        @include o-transition(padding-left, 400ms, $o-we-md-ease);
+        padding-left: $o-we-sidebar-width!important;
 
         #oe_snippets {
             left: 0;
@@ -1040,7 +1040,7 @@ body.editor_enable {
 }
 
 #web_editor_inside_iframe {
-    background-color: @odoo-brand-secondary;
+    background-color: $o-brand-secondary;
 
     #wrapwrap {
         position: relative;
@@ -1065,31 +1065,15 @@ body.editor_enable {
     }
 }
 
-// Mixins for buttons with alpha bg-color
-.o_alpha_button_preview () {
-    position: relative;
-    background-image: url('/web_editor/static/src/img/transparent.png');
-    background-size: 10px auto;
-    z-index: 1;
-
-    // Place an overlay that inherit the button's bg-color.
-    &::before {
-        content: "";
-        .o-position-absolute(0, 0, 0, 0);
-        z-index: -1;
-        background-color: inherit;
-    }
-}
-
 // Animations
 @keyframes fadeInDownSmall {
     0% {
         opacity: 0;
-        .translate(0, -5px);
+        @include translate(0, -5px);
     }
     100% {
         opacity: 1;
-        .translate(0, 0);
+        @include translate(0, 0);
     }
 }
 @keyframes fadeInOut {
@@ -1107,17 +1091,14 @@ body.editor_enable {
     }
 }
 @keyframes inputHighlighter {
-    from { background: @odoo-brand-optional; }
+    from { background: $o-brand-optional; }
     to   { width: 0; background: transparent; }
 }
 
 // INPUTS
-@o-switch-size: 2ex;
-@o-switch-inactive-color: @gray-lighter;
-
 .o_switch {
-    .o-flex-display();
-    .o-align-items(center);
+    @include o-flex-display;
+    @include o-align-items(center);
     font-weight: normal;
     cursor: pointer;
 
@@ -1125,35 +1106,35 @@ body.editor_enable {
         display: none;
 
         + span {
-            background-color: @o-switch-inactive-color;
-            box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
+            background-color: $o-we-switch-inactive-color;
+            box-shadow: inset 0 0 0px 1px darken($o-we-switch-inactive-color,10%);
             border-radius: 100rem;
-            height: @o-switch-size;
-            width: @o-switch-size * 1.8;
+            height: $o-we-switch-size;
+            width: $o-we-switch-size * 1.8;
             margin-right: 0.5em;
             display: inline-block;
-            .transition(all 0.3s @o-we-md-ease);
+            @include transition(all 0.3s $o-we-md-ease);
 
             &:after {
                 content: "";
-                background: @o-we-color-paper;
+                background: $o-we-color-paper;
                 display: block;
-                width: @o-switch-size - 0.2;
-                height: @o-switch-size - 0.2;
+                width: $o-we-switch-size - 0.2;
+                height: $o-we-switch-size - 0.2;
                 margin-top: 0.1ex;
                 margin-left: 0.1ex;
                 border-radius: 100rem;
-                .transition(all 0.3s @o-we-md-ease);
-                box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
+                @include transition(all 0.3s $o-we-md-ease);
+                box-shadow: 0 1px 1px darken($o-we-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color,10%);
             }
         }
 
         &:checked + span {
             box-shadow: none;
-            .o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
+            @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%));
 
             &:after {
-                margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
+                margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1;
             }
         }
     }
@@ -1161,7 +1142,7 @@ body.editor_enable {
         > input {
             &:not(:checked) + span {
                 box-shadow: none;
-                .o-linear-gradient(0deg, lighten(@brand-danger, 5%), darken(@brand-danger, 5%));
+                @include o-linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%));
             }
         }
     }
@@ -1191,9 +1172,9 @@ body.editor_enable {
         color: #999;
         font-size: 18px;
         font-weight: normal;
-        .o-position-absolute(@top: 10px, @left: 5px);
+        @include o-position-absolute($top: 10px, $left: 5px);
         pointer-events: none;
-        .transition(0.2s ease all)
+        @include transition(0.2s ease all);
     }
 
     /* active state */
@@ -1210,9 +1191,9 @@ body.editor_enable {
         height: 2px;
         width: 0;
         bottom: 1px;
-        .o-position-absolute();
+        @include o-position-absolute;
         background: #5264AE;
-        .transition(0.2s ease all);
+        @include transition(0.2s ease all);
     }
     .bar:before {
         left: 50%;
@@ -1228,7 +1209,7 @@ body.editor_enable {
 
     /* HIGHLIGHTER ================================== */
     .highlight {
-        .o-position-absolute(@top: 25%, @left: 0);
+        @include o-position-absolute($top: 25%, $left: 0);
         height: 60%;
         width: 100px;
         pointer-events: none;
@@ -1237,94 +1218,93 @@ body.editor_enable {
 
     /* active state */
     input:focus ~ .highlight {
-        .animation(inputHighlighter 0.3s ease);
+        @include animation(inputHighlighter 0.3s ease);
     }
 }
 
 // DRAG&DROP ANIMATIONS
 .oe_snippet_body {
     opacity: 0;
-    .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+    @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards);
 }
 
 // ACE EDITOR
 .o_ace_view_editor {
-    @o-ace-color: #2F3129;
-    background: @o-ace-color;
+    background: $o-we-ace-color;
     color: white;
-    .o-flex-display();
-    .o-flex-flow(column, nowrap);
+    @include o-flex-display;
+    @include o-flex-flow(column, nowrap);
     opacity: 0.97;
 
     .o_ace_view_editor_title {
-        .o-flex(0, 0, auto);
-        .o-flex-display();
-        .o-align-items(center);
-        padding: @grid-gutter-width/4;
+        @include o-flex(0, 0, auto);
+        @include o-flex-display;
+        @include o-align-items(center);
+        padding: $grid-gutter-width/4;
 
         > .o_ace_type_switcher > button::after {
-            .o-caret-down();
+            @include o-caret-down;
             margin-left: 4px;
         }
 
         > * {
-            .o-flex(0, 0, auto);
-            margin: 0 @grid-gutter-width/4;
+            @include o-flex(0, 0, auto);
+            margin: 0 $grid-gutter-width/4;
 
             &.o_include_option {
-                .o-flex-display();
-                .o-align-items(center);
+                @include o-flex-display;
+                @include o-align-items(center);
                 font-size: 11px;
 
                 > .o_checkbox {
-                    margin-right: @grid-gutter-width/4;
+                    margin-right: $grid-gutter-width/4;
                 }
             }
 
             &.o_res_list {
-                .o-flex(1, 1, auto);
+                @include o-flex(1, 1, auto);
                 min-width: 60px;
             }
         }
     }
     #ace-view-id {
-        .o-flex(0, 0, auto);
-        padding: @grid-gutter-width/4 @grid-gutter-width/2;
-        background-color: lighten(@o-ace-color, 10%);
+        @include o-flex(0, 0, auto);
+        padding: $grid-gutter-width/4 $grid-gutter-width/2;
+        background-color: lighten($o-we-ace-color, 10%);
     }
     #ace-view-editor {
+        @mixin ace-line-error-mixin {
+            content: "";
+            z-index: 1000;
+            display: block;
+            background-color: $brand-danger;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
         height: 70%; // in case flex is not supported
-        .o-flex(1, 1, auto);
+        @include o-flex(1, 1, auto);
         .ace_gutter {
             cursor: ew-resize;
 
             .ace_gutter-cell.o_error {
                 position: relative;
                 &::after {
-                    .o-position-absolute(-100%, 0, -100%, 0);
-                    .ace-line-error-mixin();
+                    @include o-position-absolute(-100%, 0, -100%, 0);
+                    @include ace-line-error-mixin;
                 }
             }
         }
         .ace_resize_bar {
-            .o-position-absolute(@right: 0);
+            @include o-position-absolute($right: 0);
             width: 25px;
             height: 100%;
             cursor: ew-resize;
         }
         .ace_scroller.o_error::after {
-            .o-position-absolute(0, auto, 0, 0);
+            @include o-position-absolute(0, auto, 0, 0);
             width: 3px;
-            .ace-line-error-mixin();
-        }
-
-        .ace-line-error-mixin() {
-            content: "";
-            z-index: 1000;
-            display: block;
-            background-color: @brand-danger;
-            opacity: 0.5;
-            pointer-events: none;
+            @include ace-line-error-mixin;
         }
     }
 }
@@ -1372,24 +1352,24 @@ body .modal {
                         padding-right: 30px;
                     }
                     > span {
-                        .o-position-absolute(7px, 7px);
+                        @include o-position-absolute(7px, 7px);
                         font-size: 1.3em;
                     }
                 }
             }
 
             .well {
-                border-color: @gray-lighter;
+                border-color: $gray-lighter;
                 border-top-width: 0;
             }
 
             .o_existing_attachment_cell {
-                @odoo-border-image: 2px;
+                $o-border-image: 2px;
 
                 .o_existing_attachment_remove {
-                    .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
+                    @include o-position-absolute($o-border-image, 15px + $o-border-image);
                     padding: 3px 5px 5px 5px;
-                    background-color: fade(white, 80%);
+                    background-color: rgba(white, 0.8);
                     text-shadow: 0 0 1px white;
                     border-radius: 0 0 0 2px;
                     opacity: 0;
@@ -1397,13 +1377,13 @@ body .modal {
 
                     &:hover {
                         background-color: white;
-                        color: @o-we-color-danger;
+                        color: $o-we-color-danger;
                     }
                 }
                 .o_image {
-                    border: @odoo-border-image solid transparent;
+                    border: $o-border-image solid transparent;
                     cursor: pointer;
-                    .o-transition(opacity, 400ms);
+                    @include o-transition(opacity, 400ms);
 
                     &.o_webimage {
                         width: 100%;
@@ -1416,8 +1396,8 @@ body .modal {
                     }
                 }
                 &.o_selected .o_image {
-                    border-color: @odoo-brand-primary;
-                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
+                    border-color: $o-brand-primary;
+                    box-shadow: 0px 0px 2px 2px $o-brand-secondary;
                 }
                 &:hover .o_existing_attachment_remove {
                     opacity: 1;
@@ -1437,8 +1417,8 @@ body .modal {
 
                     &.o_selected {
                         cursor: auto;
-                        background-color: @o-we-color-paper;
-                        box-shadow: 0px 0px 0px 1px @o-we-color-success;
+                        background-color: $o-we-color-paper;
+                        box-shadow: 0px 0px 0px 1px $o-we-color-success;
                     }
                 }
             }
@@ -1458,11 +1438,11 @@ body .modal {
             // VIDEO TAB
             #editor-media-video .well {
                 padding: 0;
-                .o-flex-display();
-                .o-flex-flow(row, wrap);
+                @include o-flex-display;
+                @include o-flex-flow(row, wrap);
 
                 .o_video_dialog_form {
-                    .o-flex(1, 1, auto);
+                    @include o-flex(1, 1, auto);
                     min-width: 0;
                     padding: 20px;
 
@@ -1478,7 +1458,7 @@ body .modal {
                         }
 
                         > .o_validate_feedback {
-                            .o-position-absolute(auto, 10px, 10px);
+                            @include o-position-absolute(auto, 10px, 10px);
 
                             > .fa {
                                 display: none;
@@ -1495,12 +1475,12 @@ body .modal {
 
                 #video-preview {
                     position: relative;
-                    .o-flex(1, 0, 50%);
-                    .o-flex-display();
-                    .o-flex-flow(column, nowrap);
-                    .o-justify-content(center);
+                    @include o-flex(1, 0, 50%);
+                    @include o-flex-display;
+                    @include o-flex-flow(column, nowrap);
+                    @include o-justify-content(center);
 
-                    .o-we-preview-box(0 19px);
+                    @include o-we-preview-box(0 19px);
                     border: none;
 
                     .media_iframe_video {
@@ -1508,12 +1488,12 @@ body .modal {
                     }
 
                     .o_video_dialog_iframe {
-                        .o-we-preview-content();
+                        @include o-we-preview-content;
                         max-width: 100%;
                         max-height: 100%;
 
                         &.alert {
-                            .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
+                            @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards);
                             margin: 0 auto;
                         }
                     }
@@ -1527,7 +1507,7 @@ body .modal {
         margin: 15px 0;
 
         .help-control {
-            .o-position-absolute(15px, 15px);
+            @include o-position-absolute(15px, 15px);
         }
         .help {
             margin: 15px 0;
@@ -1539,22 +1519,22 @@ body .modal {
                 width: 120px;
                 height: 100px;
                 .bg {
-                    .o-position-absolute(0, 0, 0, 0);
+                    @include o-position-absolute(0, 0, 0, 0);
                     border: 1px dotted #888787;
                     background-image: url(/web/image);
                     background-position: center center;
-                    .o-background-size(cover);
+                    @include o-background-size(cover);
                 }
                 .el {
-                    .o-position-absolute(10px, 0, 10px, 0);
+                    @include o-position-absolute(10px, 0, 10px, 0);
                     border: 1px solid #222;
                 }
                 &.contain_bg {
                     .bg {
-                        .o-position-absolute(0, 12px, 20px, 12px);
+                        @include o-position-absolute(0, 12px, 20px, 12px);
                     }
                     .el {
-                        .o-position-absolute(0, 0, 20px, 0);
+                        @include o-position-absolute(0, 0, 20px, 0);
                     }
                 }
             }
@@ -1564,7 +1544,7 @@ body .modal {
         }
 
         .o_bg_img_opt_cover_edition {
-            .o-we-preview-box();
+            @include o-we-preview-box;
 
             h6 {
                 color: white;
@@ -1574,7 +1554,7 @@ body .modal {
                 position: relative;
                 background: white;
                 min-height: 10px;
-                .o-we-preview-content();
+                @include o-we-preview-content;
 
                 > img {
                     cursor: crosshair;
@@ -1586,8 +1566,8 @@ body .modal {
                 }
             }
             .o_bg_img_opt_ui_info {
-                .animation(fadeInOut 2s ease forwards);
-                .o-position-absolute(@bottom: 1px, @right: 0);
+                @include animation(fadeInOut 2s ease forwards);
+                @include o-position-absolute($bottom: 1px, $right: 0);
                 display: block;
                 padding: 3px 13px;
                 background-color: rgba(255, 255, 255, 0.8);
@@ -1603,11 +1583,11 @@ body .modal {
                 }
             }
             .grid {
-                .o-position-absolute(@top: 33.33%, @left: 0);
+                @include o-position-absolute($top: 33.33%, $left: 0);
                 display: block;
                 width: 100%;
                 height: 1px;
-                background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
+                background: fadeOut(lighten($o-brand-optional, 30%), 50%);
                 pointer-events: none;
                 &.grid-2 {
                     top: 66.66%
@@ -1626,7 +1606,7 @@ body .modal {
                 }
             }
             .o_focus_point {
-                .o-position-absolute(@top: 0, @left: 0);
+                @include o-position-absolute($top: 0, $left: 0);
                 width: 30px;
                 height: 30px;
                 border: 2px solid white;
@@ -1636,7 +1616,7 @@ body .modal {
                 box-shadow: 0 0 1px #333;
                 pointer-events: none;
                 &.o_with_transition {
-                    .o-transition(all, 0.2s);
+                    @include o-transition(all, 0.2s);
                 }
                 &:before {
                     pointer-events: none;
@@ -1651,7 +1631,7 @@ body .modal {
                     border-radius: 100em;
                     opacity: 1;
                     box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
-                    .o-transition(opacity, 0.2s);
+                    @include o-transition(opacity, 0.2s);
                 }
             }
         }
@@ -1669,7 +1649,7 @@ body .modal {
 
             input:checked + i::before {
                 content: "\f00c";
-                .o-position-absolute(@top: 6px, @left: 5px);
+                @include o-position-absolute($top: 6px, $left: 5px);
             }
 
             &.btn-link {
@@ -1681,7 +1661,7 @@ body .modal {
             }
         }
         .o_link_dialog_preview {
-            border-left: 1px solid @gray-lighter;
+            border-left: 1px solid $gray-lighter;
         }
     }
 }
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
new file mode 100644
index 00000000000..2d36b3e9756
--- /dev/null
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -0,0 +1,261 @@
+///
+/// This files regroups the variables and mixins which are specific to the editor.
+///
+
+$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default;
+
+$o-we-color-dark: #2c2c36 !default;
+$o-we-color-darker: darken($o-we-color-dark, 2%) !default;
+$o-we-color-divider: #33363e !default;
+$o-we-color-light: #4e525b !default;
+$o-we-color-normal: #50545d !default;
+$o-we-color-paper: #fcfcfc !default;
+$o-we-color-text-normal: #999999 !default;
+$o-we-color-text-light: #d4d5d7 !default;
+$o-we-color-danger: #e6586c !default;
+$o-we-color-warning: #f0ad4e !default;
+$o-we-color-success: #40ad67 !default;
+$o-we-color-info: #6999a8 !default;
+
+$o-we-sidebar-width: 210px !default;
+
+$o-we-tab-active-bg: #3D4048 !default;
+
+// Transitions
+$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;
+
+// Editor
+$o-we-dropzone-size: 40px !default;
+$o-we-dropzone-border-width: 2px !default;
+$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default;
+
+$o-we-handle-edge-size: 1px !default;
+$o-we-handle-border-width: 1px !default;
+$o-we-handles-offset-to-hide: 10000px !default;
+$o-we-handles-accent-color: #00e2ff !default;
+$o-we-handles-btn-size: 18px !default;
+
+$o-we-overlay-option-size: 25px !default;
+
+$o-we-ace-color: #2F3129 !default;
+
+$o-we-switch-size: 2ex !default;
+$o-we-switch-inactive-color: $o-we-color-paper !default;
+
+// ============    'Preview' component Mixins    ===============
+// Create a "preview" work-area to edit/customize specific elements
+
+@mixin o-we-preview-box($padding: 0px 25px 25px 25px, $color-text: white) {
+    padding: $padding;
+    border-top: 1px solid black;
+    border-bottom: 1px solid white;
+    @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker);
+
+    color:  $color-text;
+}
+
+@mixin o-we-preview-content {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    box-shadow: 0 0 15px 2px #000;
+}
+
+
+// ============    Preservetion mixins    ===============
+// Used to preserve web_editor and website UI from themes customizations
+
+@mixin o-w-preserve-base {
+    font-family: $o-we-font-family;
+    line-height: 1.42857143;
+    color: $o-we-color-divider;
+
+    .text-muted {
+        color: $o-we-color-text-normal;
+    }
+}
+
+@mixin o-w-preserve-headings {
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+        font-family: $o-we-font-family;
+        line-height: 1.42857143;
+        color: $o-we-color-dark;
+        font-weight: bold;
+    }
+}
+
+@mixin o-w-preserve-links {
+    a:not(.o_btn_preview) {
+        color: $o-brand-optional;
+
+        &:focus, &:active, &:focus:active {
+            outline: none!important;
+        }
+    }
+
+    .label {
+        &:hover a, a {
+            color: #fff;
+        }
+    }
+}
+
+@mixin o-w-preserve-forms {
+    .form-control {
+        height: 34px;
+        padding: 6px 12px;
+        font-size: 14px;
+        line-height: 1.42857143;
+        border: 1px solid $o-we-color-text-light;
+        color: #555;
+        background-color: #fff;
+        border-radius: 0;
+    }
+
+    .has-error {
+        .form-control {
+            border-color: $state-danger-text;
+        }
+    }
+
+    select.form-control {
+        @include o-appearance(none);
+        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
+        background-position: 100% 65%;
+        background-repeat: no-repeat;
+    }
+}
+
+@mixin o-w-preserve-modals {
+    background: 0;
+
+    .modal-content {
+        border-radius: 0;
+        background-color: $o-we-color-paper;
+
+        .modal-body {
+            background-color: white;
+        }
+        .modal-footer {
+            text-align: left;
+        }
+    }
+}
+
+@mixin o-w-preserve-tabs {
+    .nav-tabs {
+        border-bottom: 1px solid $gray-lighter;
+
+        > li  {
+            > a {
+                line-height: 1.42857143;
+                color: $o-we-color-light;
+                &:hover {
+                    border-color: $gray-lighter;
+                }
+            }
+
+            &.active > a {
+                &, &:hover, &:focus {
+                    color: $o-we-color-normal;
+                    background-color: $o-we-color-paper;
+                    border-color: $gray-lighter;
+                    border-bottom-color: transparent;
+                }
+            }
+        }
+    }
+}
+
+@mixin o-w-preserve-btn {
+    .btn:not(.o_btn_preview) {
+        border-width: 1px;
+        border-radius: 0;
+        font-weight: normal;
+        @include button-size(6px, 12px, 14px, 1.42857143, 0);
+
+        &.btn-primary {
+            @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%));
+        }
+        &.btn-default {
+            @include button-variant($o-we-color-normal, white, $o-we-color-text-light);
+        }
+        &.btn-link {
+            @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
+        }
+        &.btn-success {
+            @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%));
+        }
+        &.btn-info {
+            @include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%));
+        }
+        &.btn-warning {
+            @include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%));
+        }
+        &.btn-danger {
+            @include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%));
+        }
+
+        &.btn-lg {
+            @include button-size(10px, 16px, 18px, 1.3333333, 0);
+        }
+        &.btn-sm {
+            @include button-size(5px, 10px, 12px, 1.5, 0);
+        }
+        &.btn-xs {
+            @include button-size(1px, 5px, 12px, 1.5, 0);
+        }
+    }
+}
+
+@mixin o-w-preserve-wells {
+    .well {
+        padding: 19px;
+        margin-bottom: 20px;
+        background-color: $o-we-color-paper;
+        border: 1px solid darken($o-we-color-paper,5%);
+        border-radius: 0;
+        @include box-shadow(none);
+    }
+}
+
+// Edition colors
+
+// Colors
+$gray-white: #fff !default;
+
+$color-alpha: #1cc1a9 !default;
+$color-beta: #875A7B !default;
+$color-gamma: #BA3C3D !default;
+$color-delta: #0D6759 !default;
+$color-epsilon: #0B2E59 !default;
+
+// Greyscale transparent colours
+$color-black-25: rgba(black, 0.25) !default;
+$color-black-50: rgba(black, 0.5) !default;
+$color-black-75: rgba(black, 0.75) !default;
+$color-white-25: rgba(white, 0.25) !default;
+$color-white-50: rgba(white, 0.5) !default;
+$color-white-75: rgba(white, 0.75) !default;
+
+@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) {
+    .bg-#{$name} {
+        background-color: $color;
+        color: $complementary;
+        .text-muted {
+            color: rgba($complementary, 0.4);
+        }
+    }
+    body .text-#{$name} { // body to make the rules more important that bg-* ones
+        color: $content-color;
+    }
+}
+@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) {
+    .btn-#{$name} {
+        @include button-variant($complementary, $color, $border-color);
+    }
+}
+
+// Translations
+$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
+$o-we-translated-content-color: rgb(120, 215, 110) !default;
diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
index b95187bedf4..6687d65645d 100644
--- a/addons/web_editor/static/src/xml/ace.xml
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -8,22 +8,22 @@
                 <button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown">XML (HTML)</button>
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#" class="o_ace_type_switcher_choice" data-type="xml">XML (HTML)</a></li>
-                    <li><a href="#" class="o_ace_type_switcher_choice" data-type="less">LESS (CSS)</a></li>
+                    <li><a href="#" class="o_ace_type_switcher_choice" data-type="scss">SCSS (CSS)</a></li>
                 </ul>
             </div>
             <select id="ace-view-list" class="o_res_list"/>
-            <select id="ace-less-list" class="o_res_list hidden"/>
+            <select id="ace-scss-list" class="o_res_list hidden"/>
             <label class="o_include_option oe_include_bundles">
                 <div class="o_checkbox">
                     <input type="checkbox" class="js_include_bundles" t-att-checked="widget.options.includeBundles ? 'checked' : undefined"/><span/>
                 </div>
                 Include Asset Bundles
             </label>
-            <label class="o_include_option o_include_all_less hidden">
+            <label class="o_include_option o_include_all_scss hidden">
                 <div class="o_checkbox">
-                    <input type="checkbox" class="js_include_all_less" t-att-checked="widget.options.includeAllLess ? 'checked' : undefined"/><span/>
+                    <input type="checkbox" class="js_include_all_scss" t-att-checked="widget.options.includeAllSCSS ? 'checked' : undefined"/><span/>
                 </div>
-                Include All LESS Files
+                Include All SCSS Files
             </label>
             <div class="o_button_section">
                 <button data-action="save" type="submit" class="btn btn-sm btn-primary">Save</button>