From b1dbc1b733c5e72e4461cef9f6d28576da4b81f0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 27 Feb 2018 12:40:18 -0500
Subject: [PATCH] docs(breaking): update theming changes to account for sass
 imports

---
 BREAKING.md | 68 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 0f2a36f41b..a5e6dcbb89 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -21,10 +21,10 @@ A list of the breaking changes introduced in Ionic Angular v4.
 - [Option](#option)
 - [Radio](#radio)
 - [Range](#range)
-- [Sass](#sass)
 - [Segment](#segment)
 - [Select](#select)
 - [Text/Typography](#text-typography)
+- [Theming](#theming)
 - [Toolbar](#toolbar)
 
 
@@ -751,25 +751,6 @@ These have been renamed to the following:
 ```
 
 
-## Sass
-
-Sass variables for changing the cordova statusbar have been renamed to app:
-
-**Old Usage Example:**
-
-```css
-$cordova-ios-statusbar-padding:   20px;
-$cordova-md-statusbar-padding:    20px;
-```
-
-**New Usage Example:**
-
-```css
-$app-ios-statusbar-padding:   20px;
-$app-md-statusbar-padding:    20px;
-```
-
-
 ## Segment
 
 The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.
@@ -855,6 +836,53 @@ Typography should now be written as an `<ion-text>` element. Previously the `ion
 </p>
 ```
 
+
+## Theming
+
+### Including Sass
+
+Previously all `scss` files in the `src` directory were imported. Now each `scss` file should be included for the component via Angular's `styleUrls` metadata. View [Angular's Component Styles](https://angular.io/guide/component-styles) for more information.
+
+This means that any styles wrapped with a page should now be removed since they will automatically be scoped to the component.
+
+**Old Usage Example:**
+
+```scss
+page-schedule {
+  p {
+    color: red;
+  }
+}
+```
+
+**New Usage Example:**
+
+```scss
+p {
+  color: red;
+}
+```
+
+
+### Sass Variables
+
+Sass variables for changing the cordova statusbar have been renamed to app:
+
+**Old Usage Example:**
+
+```css
+$cordova-ios-statusbar-padding:   20px;
+$cordova-md-statusbar-padding:    20px;
+```
+
+**New Usage Example:**
+
+```css
+$app-ios-statusbar-padding:   20px;
+$app-md-statusbar-padding:    20px;
+```
+
+
 ## Toolbar
 
 ### Attributes Renamed