From ebebfe2ba20809e1f59d01fabc21bfe268cbea52 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 14 Jul 2017 09:41:46 -0700
Subject: [PATCH] Add SCSS style guide. (#12850)

---
 STYLEGUIDE.md                    |  1 +
 style_guides/css_style_guide.md  | 16 ++++++++++++++++
 style_guides/scss_style_guide.md | 16 ++++++++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 style_guides/scss_style_guide.md

diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md
index a71ad9cce0183..f9108ba16797b 100644
--- a/STYLEGUIDE.md
+++ b/STYLEGUIDE.md
@@ -7,6 +7,7 @@ recommended for the development of all Kibana plugins.
 - [Angular](style_guides/angular_style_guide.md)
 - [React](style_guides/react_style_guide.md)
 - [CSS](style_guides/css_style_guide.md)
+- [SCSS](style_guides/scss_style_guide.md)
 - [HTML](style_guides/html_style_guide.md)
 - [API](style_guides/api_style_guide.md)
 - [Architecture](style_guides/architecture_style_guide.md)
diff --git a/style_guides/css_style_guide.md b/style_guides/css_style_guide.md
index 61822d3217e3f..2c73f52f38f44 100644
--- a/style_guides/css_style_guide.md
+++ b/style_guides/css_style_guide.md
@@ -1,6 +1,22 @@
 
 # CSS Style Guide
 
+## Original style guide
+
+Our style guide is an extension of [CSS Guidelines by Harry Roberts](https://cssguidelin.es/). The rules we especially focus on are:
+
+* [Multiple files](https://cssguidelin.es/#multiple-files)
+* [Indenting](https://cssguidelin.es/#indenting)
+* [Commenting](https://cssguidelin.es/#commenting)
+* [Naming conventions](https://cssguidelin.es/#naming-conventions) (see "Naming convention", below, for exceptions)
+* [CSS selectors](https://cssguidelin.es/#css-selectors)
+* [Specificity](https://cssguidelin.es/#specificity)
+* [Architectural principles](https://cssguidelin.es/#architectural-principles)
+
+Please see the [SCSS Style Guide](scss_style_guide.md) for additional rules pertaining to SCSS.
+
+## Contents
+
 - [CSS Style Guide](#css-style-guide)
   - [Selecting elements](#selecting-elements)
   - [Using the preprocessor](#using-the-preprocessor)
diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md
new file mode 100644
index 0000000000000..9d27e27fa6c33
--- /dev/null
+++ b/style_guides/scss_style_guide.md
@@ -0,0 +1,16 @@
+
+# SCSS Style Guide
+
+## Original style guide
+
+Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sass-guidelin.es/). The rules we especially focus on are:
+
+* [Syntax & formatting](https://sass-guidelin.es/#syntax--formatting) (exceptions below)
+* [Naming conventions](https://sass-guidelin.es/#naming-conventions) (see the [CSS Style Guide](css_style_guide.md) for infomation on exceptions)
+* [Variables](https://sass-guidelin.es/#variables)
+* [Mixins](https://sass-guidelin.es/#mixins)
+
+## Syntax and formatting
+
+The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using
+hex values.
\ No newline at end of file