diff --git a/Makefile b/Makefile
index aea82dd33..12e520810 100644
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,12 @@
 NPM = npm
 BROWSERIFY = ./node_modules/.bin/browserify
+NODE_SASS = ./node_modules/.bin/node-sass
 UGLIFYJS = ./node_modules/.bin/uglifyjs
 EXORCIST = ./node_modules/.bin/exorcist
 CLEANCSS = ./node_modules/.bin/cleancss
-CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css recording.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css
+STYLES_MAIN = css/main.scss
+STYLES_BUNDLE = css/all.bundle.css
+STYLES_DESTINATION = css/all.css
 DEPLOY_DIR = libs
 BROWSERIFY_FLAGS = -d
 OUTPUT_DIR = .
@@ -45,7 +48,9 @@ deploy-lib-jitsi-meet:
 	$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
 	$(DEPLOY_DIR)
 deploy-css:
-	(cd css; cat $(CSS_FILES)) | $(CLEANCSS) > css/all.css
+	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
+	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
+	rm $(STYLES_BUNDLE)
 
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
diff --git a/css/main.css b/css/_base.scss
similarity index 98%
rename from css/main.css
rename to css/_base.scss
index 67c58e045..8ecc084c8 100644
--- a/css/main.css
+++ b/css/_base.scss
@@ -14,10 +14,7 @@ html, body{
 }
 
 html, body, input, textarea, keygen, select, button {
-    font-family:    'open_sanslight',
-                    'Helvetica Neue',
-                    Helvetica,
-                    sans-serif !important;
+    font-family: $baseFontFamily !important;
 }
 
 .right-panel {
diff --git a/css/chat.css b/css/_chat.scss
similarity index 100%
rename from css/chat.css
rename to css/_chat.scss
diff --git a/css/_contact_list.scss b/css/_contact_list.scss
new file mode 100644
index 000000000..6e69a9637
--- /dev/null
+++ b/css/_contact_list.scss
@@ -0,0 +1,62 @@
+#contactlist {
+    display: none;
+    background-color: black;
+    cursor: default;
+
+    > div.title {
+        text-align: left;
+        padding: 7px 10px;
+        margin: 2px;
+        color: #21B9FC;
+        font-size: 11pt;
+        border-bottom: 1px solid #676767;
+
+        > span {
+            margin-left: 5px;
+        }
+    }
+
+    > ul#contacts {
+        position: absolute;
+        top: 31px;
+        bottom: 0px;
+        width: 100%;
+        margin: 0px;
+        padding: 0px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+}
+
+#contacts {
+
+    >li {
+        list-style-type: none;
+        text-align: left;
+        color: #FFF;
+        font-size: 10pt;
+        padding: 7px 10px;
+        margin: 2px;
+
+        > p {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0px;
+        }
+    }
+}
+
+
+.avatar {
+    padding: 0px;
+    margin-right: 10px;
+    vertical-align: middle;
+    font-size: 22pt;
+    border-radius: 20px;
+    max-height: 30px;
+    max-width: 30px;
+}
\ No newline at end of file
diff --git a/css/feedback.css b/css/_feedback.scss
similarity index 100%
rename from css/feedback.css
rename to css/_feedback.scss
diff --git a/css/font-awesome.css b/css/_font-awesome.scss
similarity index 100%
rename from css/font-awesome.css
rename to css/_font-awesome.scss
diff --git a/css/font.css b/css/_font.scss
similarity index 100%
rename from css/font.css
rename to css/_font.scss
diff --git a/css/jitsi_popover.css b/css/_jitsi_popover.scss
similarity index 100%
rename from css/jitsi_popover.css
rename to css/_jitsi_popover.scss
diff --git a/css/jquery-impromptu.css b/css/_jquery-impromptu.scss
similarity index 100%
rename from css/jquery-impromptu.css
rename to css/_jquery-impromptu.scss
diff --git a/css/jquery.contextMenu.css b/css/_jquery.contextMenu.scss
similarity index 100%
rename from css/jquery.contextMenu.css
rename to css/_jquery.contextMenu.scss
diff --git a/css/keyboard-shortcuts.css b/css/_keyboard-shortcuts.scss
similarity index 100%
rename from css/keyboard-shortcuts.css
rename to css/_keyboard-shortcuts.scss
diff --git a/css/login_menu.css b/css/_login_menu.scss
similarity index 100%
rename from css/login_menu.css
rename to css/_login_menu.scss
diff --git a/css/modaldialog.css b/css/_modaldialog.scss
similarity index 100%
rename from css/modaldialog.css
rename to css/_modaldialog.scss
diff --git a/css/notice.css b/css/_notice.scss
similarity index 100%
rename from css/notice.css
rename to css/_notice.scss
diff --git a/css/overlay.css b/css/_overlay.scss
similarity index 100%
rename from css/overlay.css
rename to css/_overlay.scss
diff --git a/css/popover.css b/css/_popover.scss
similarity index 100%
rename from css/popover.css
rename to css/_popover.scss
diff --git a/css/popup_menu.css b/css/_popup_menu.scss
similarity index 100%
rename from css/popup_menu.css
rename to css/_popup_menu.scss
diff --git a/css/recording.css b/css/_recording.scss
similarity index 100%
rename from css/recording.css
rename to css/_recording.scss
diff --git a/css/settingsmenu.css b/css/_settingsmenu.scss
similarity index 100%
rename from css/settingsmenu.css
rename to css/_settingsmenu.scss
diff --git a/css/toastr.css b/css/_toastr.scss
similarity index 100%
rename from css/toastr.css
rename to css/_toastr.scss
diff --git a/css/unsupported_browser.css b/css/_unsupported_browser.scss
similarity index 96%
rename from css/unsupported_browser.css
rename to css/_unsupported_browser.scss
index 16df46bbd..e1407b7b0 100644
--- a/css/unsupported_browser.css
+++ b/css/_unsupported_browser.scss
@@ -3,7 +3,7 @@ body {
     height:100%;
     background-color: white;
     color: #424242;
-    font-family: 'open_sanslight', 'Helvetica Neue', Helvetica, sans-serif;
+    font-family: $baseFontFamily;
     font-size: 28px;
     margin:0;
     padding:0;
diff --git a/css/_variables.scss b/css/_variables.scss
new file mode 100644
index 000000000..0a53602d0
--- /dev/null
+++ b/css/_variables.scss
@@ -0,0 +1,5 @@
+/**
+*   Style variables
+*/
+
+$baseFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
\ No newline at end of file
diff --git a/css/videolayout_default.css b/css/_videolayout_default.scss
similarity index 100%
rename from css/videolayout_default.css
rename to css/_videolayout_default.scss
diff --git a/css/welcome_page.css b/css/_welcome_page.scss
similarity index 100%
rename from css/welcome_page.css
rename to css/_welcome_page.scss
diff --git a/css/contact_list.css b/css/contact_list.css
deleted file mode 100644
index 3dd0fbc69..000000000
--- a/css/contact_list.css
+++ /dev/null
@@ -1,58 +0,0 @@
-#contactlist {
-    display: none;
-    background-color: black;
-    cursor: default;
-}
-
-#contactlist>div.title {
-    text-align: left;
-    padding: 7px 10px;
-    margin: 2px;
-    color: #21B9FC;
-    font-size: 11pt;
-    border-bottom: 1px solid #676767;
-}
-
-#contactlist>div.title>span {
-    margin-left: 5px;
-}
-
-#contactlist>ul#contacts {
-    position: absolute;
-    top: 31px;
-    bottom: 0px;
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-#contacts>li {
-    list-style-type: none;
-    text-align: left;
-    color: #FFF;
-    font-size: 10pt;
-    padding: 7px 10px;
-    margin: 2px;
-}
-
-#contacts>li>p {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0px;
-}
-
-.avatar {
-    padding: 0px;
-    margin-right: 10px;
-    vertical-align: middle;
-    font-size: 22pt;
-    border-radius: 20px;
-    max-height: 30px;
-    max-width: 30px;
-}
-
-#contactlist .clickable {
-    cursor: pointer;
-}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
new file mode 100644
index 000000000..3185d20e0
--- /dev/null
+++ b/css/main.scss
@@ -0,0 +1,36 @@
+/* Variables BEGIN */
+
+@import 'variables';
+
+/* Variables END */
+
+/* Fonts BEGIN */
+
+@import 'font';
+@import 'font-awesome';
+
+/* Fonts END */
+
+/* Modules BEGIN */
+
+@import 'toastr';
+@import 'base';
+@import 'overlay';
+@import 'videolayout_default';
+@import 'jquery-impromptu';
+@import 'modaldialog';
+@import 'notice';
+@import 'popup_menu';
+@import 'recording';
+@import 'login_menu';
+@import 'popover';
+@import 'jitsi_popover';
+@import 'contact_list';
+@import 'chat';
+@import 'welcome_page';
+@import 'settingsmenu';
+@import 'feedback';
+@import 'jquery.contextMenu';
+@import 'keyboard-shortcuts';
+
+/* Modules END */
\ No newline at end of file
diff --git a/package.json b/package.json
index fe9fcbd40..d83b6e334 100644
--- a/package.json
+++ b/package.json
@@ -35,16 +35,17 @@
     "jws": "*"
   },
   "devDependencies": {
+    "babel-polyfill": "*",
+    "babel-preset-es2015": "*",
+    "babelify": "*",
     "browserify": "11.1.x",
     "browserify-shim": "^3.8.10",
+    "clean-css": "*",
     "exorcist": "*",
     "jshint": "2.8.0",
+    "node-sass": "^3.8.0",
     "precommit-hook": "3.0.0",
-    "uglify-js": "2.4.24",
-    "clean-css": "*",
-    "babelify": "*",
-    "babel-preset-es2015": "*",
-    "babel-polyfill": "*"
+    "uglify-js": "2.4.24"
   },
   "license": "Apache-2.0",
   "scripts": {
@@ -57,13 +58,18 @@
   "browserify": {
     "transform": [
       "browserify-shim",
-      ["babelify", {
-        "ignore": "node_modules"
-      }]
+      [
+        "babelify",
+        {
+          "ignore": "node_modules"
+        }
+      ]
     ]
   },
   "babel": {
-    "presets": ["es2015"]
+    "presets": [
+      "es2015"
+    ]
   },
   "browser": {
     "jquery": "./node_modules/jquery/dist/jquery.js",
@@ -102,7 +108,7 @@
       "depends": "jquery:jQuery"
     },
     "jquery-contextmenu": {
-        "depends": "jquery:jQuery"
+      "depends": "jquery:jQuery"
     },
     "autosize": {
       "depends": "jquery:jQuery"