diff --git a/app/assets/javascripts/admin/components/email-styles-editor.js.es6 b/app/assets/javascripts/admin/components/email-styles-editor.js.es6
index 75811ec41c1..c0b6c732e98 100644
--- a/app/assets/javascripts/admin/components/email-styles-editor.js.es6
+++ b/app/assets/javascripts/admin/components/email-styles-editor.js.es6
@@ -4,6 +4,11 @@ import computed from "ember-addons/ember-computed-decorators";
 export default Component.extend({
   editorId: Ember.computed.reads("fieldName"),
 
+  @computed("fieldName")
+  currentEditorMode(fieldName) {
+    return fieldName === "css" ? "scss" : fieldName;
+  },
+
   @computed("fieldName", "styles.html", "styles.css")
   resetDisabled(fieldName) {
     return (
diff --git a/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs b/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs
index 883149644d2..e03feb7cb7b 100644
--- a/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs
+++ b/app/assets/javascripts/admin/templates/components/email-styles-editor.hbs
@@ -9,7 +9,7 @@
   </div>
 </div>
 
-{{ace-editor content=editorContents mode=fieldName editorId=editorId}}
+{{ace-editor content=editorContents mode=currentEditorMode editorId=editorId}}
 
 <div class='admin-footer'>
   <div class='buttons'>
diff --git a/app/models/email_style.rb b/app/models/email_style.rb
index 6d460ccbd19..d02de6a59a3 100644
--- a/app/models/email_style.rb
+++ b/app/models/email_style.rb
@@ -17,6 +17,10 @@ class EmailStyle
     SiteSetting.email_custom_css || default_css
   end
 
+  def compiled_css
+    SiteSetting.email_custom_css_compiled || self.class.default_css_compiled
+  end
+
   def default_html
     self.class.default_template
   end
@@ -34,4 +38,8 @@ class EmailStyle
   def self.default_css
     ''
   end
+
+  def self.default_css_compiled
+    ''
+  end
 end
diff --git a/app/services/email_style_updater.rb b/app/services/email_style_updater.rb
index d0fb9186365..d13e84b78d6 100644
--- a/app/services/email_style_updater.rb
+++ b/app/services/email_style_updater.rb
@@ -10,26 +10,39 @@ class EmailStyleUpdater
   end
 
   def update(attrs)
+    if attrs.has_key?(:html) && !attrs[:html].include?('%{email_content}')
+      @errors << I18n.t(
+        'email_style.html_missing_placeholder',
+        placeholder: '%{email_content}'
+      )
+    end
+
+    if attrs.has_key?(:css)
+      begin
+        compiled_css = SassC::Engine.new(attrs[:css], style: :compressed).render
+      rescue SassC::SyntaxError => e
+        # @errors << I18n.t('email_style.css_syntax_error')
+        @errors << e.message[0...(e.message.index("\n"))]
+      end
+    end
+
+    return false unless @errors.empty?
+
     if attrs.has_key?(:html)
       if attrs[:html] == EmailStyle.default_template
         SiteSetting.remove_override!(:email_custom_template)
       else
-        if !attrs[:html].include?('%{email_content}')
-          @errors << I18n.t(
-            'email_style.html_missing_placeholder',
-            placeholder: '%{email_content}'
-          )
-        else
-          SiteSetting.email_custom_template = attrs[:html]
-        end
+        SiteSetting.email_custom_template = attrs[:html]
       end
     end
 
     if attrs.has_key?(:css)
       if attrs[:css] == EmailStyle.default_css
         SiteSetting.remove_override!(:email_custom_css)
+        SiteSetting.remove_override!(:email_custom_css_compiled)
       else
         SiteSetting.email_custom_css = attrs[:css]
+        SiteSetting.email_custom_css_compiled = compiled_css
       end
     end
 
diff --git a/config/site_settings.yml b/config/site_settings.yml
index d4ca816af7a..6a44f4b6099 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -1044,6 +1044,9 @@ email:
   email_custom_css:
     default: ""
     hidden: true
+  email_custom_css_compiled:
+    default: ""
+    hidden: true
   email_total_attachment_size_limit_kb:
     default: 0
     max: 51200
diff --git a/lib/email/styles.rb b/lib/email/styles.rb
index b3ee7041037..9354f52666b 100644
--- a/lib/email/styles.rb
+++ b/lib/email/styles.rb
@@ -36,7 +36,7 @@ module Email
     def custom_styles
       return @custom_styles unless @custom_styles.nil?
 
-      css = EmailStyle.new.css
+      css = EmailStyle.new.compiled_css
       @custom_styles = {}
 
       if !css.blank?
diff --git a/spec/integration/email_style_spec.rb b/spec/integration/email_style_spec.rb
index e035aec1028..bfe08f16a33 100644
--- a/spec/integration/email_style_spec.rb
+++ b/spec/integration/email_style_spec.rb
@@ -6,6 +6,7 @@ describe EmailStyle do
   before do
     SiteSetting.email_custom_template = "<body><h1>FOR YOU</h1><div>%{email_content}</div></body>"
     SiteSetting.email_custom_css = 'h1 { color: red; } div.body { color: #FAB; }'
+    SiteSetting.email_custom_css_compiled = SiteSetting.email_custom_css
   end
 
   after do
@@ -93,6 +94,7 @@ describe EmailStyle do
     context 'with some bad css' do
       before do
         SiteSetting.email_custom_css = '@import "nope.css"; h1 {{{ size: really big; '
+        SiteSetting.email_custom_css_compiled = SiteSetting.email_custom_css
       end
 
       it "can render the html" do
diff --git a/spec/services/email_style_updater_spec.rb b/spec/services/email_style_updater_spec.rb
index 3ef6f1c7ea9..82281de7dd2 100644
--- a/spec/services/email_style_updater_spec.rb
+++ b/spec/services/email_style_updater_spec.rb
@@ -7,6 +7,12 @@ describe EmailStyleUpdater do
   let(:default_html) { File.read("#{Rails.root}/app/views/email/default_template.html") }
   let(:updater) { EmailStyleUpdater.new(admin) }
 
+  def expect_settings_to_be_unset
+    expect(SiteSetting.email_custom_template).to_not be_present
+    expect(SiteSetting.email_custom_css).to_not be_present
+    expect(SiteSetting.email_custom_css_compiled).to_not be_present
+  end
+
   describe 'update' do
     it 'can change the settings' do
       expect(
@@ -17,20 +23,20 @@ describe EmailStyleUpdater do
       ).to eq(true)
       expect(SiteSetting.email_custom_template).to eq('For you: %{email_content}')
       expect(SiteSetting.email_custom_css).to eq('h1 { color: blue; }')
+      expect(SiteSetting.email_custom_css_compiled.strip).to eq('h1{color:blue}')
     end
 
     it 'will not store defaults' do
       updater.update(html: default_html, css: '')
-      expect(SiteSetting.email_custom_template).to_not be_present
-      expect(SiteSetting.email_custom_css).to_not be_present
+      expect_settings_to_be_unset
     end
 
     it 'can clear settings if defaults given' do
       SiteSetting.email_custom_template = 'For you: %{email_content}'
       SiteSetting.email_custom_css = 'h1 { color: blue; }'
+      SiteSetting.email_custom_css_compiled = 'h1{color:blue}'
       updater.update(html: default_html, css: '')
-      expect(SiteSetting.email_custom_template).to_not be_present
-      expect(SiteSetting.email_custom_css).to_not be_present
+      expect_settings_to_be_unset
     end
 
     it 'fails if html is missing email_content' do
@@ -41,6 +47,14 @@ describe EmailStyleUpdater do
           placeholder: '%{email_content}'
         )
       )
+      expect_settings_to_be_unset
+    end
+
+    it 'fails if css is not valid scss' do
+      expect(updater.update(html: 'For you: %{email_content}', css: 'h1 { color: blue;')).to eq(false)
+      expect(updater.errors).to_not be_empty
+      expect(updater.errors.first).to include('Invalid CSS after')
+      expect_settings_to_be_unset
     end
   end
 end