Override Global SASS Variables in Ionic v3 Applications

Instructor: [00:00] When styling Ionic components, it's best to see if there is an existing SASS variable that you can set directly. Here, we have the basics of a login form. Two inputs and a login button. As you can see, the alignment of the two inputs does not match the left edge of the button. Let's fix that.

[00:18] To move the inputs over, we need to understand what is causing them to be shifted to the right. Opening Chrome's dev tools and using the elements inspector, we can select each of the DOM elements until we find it's the Ion item that is introducing the padding left that is shifting our inputs over.

[00:37] Now, we could directly override these values, but I want to change this value globally in my application. To do this, first I'm going to see if the Ionic framework has exposed a SASS variable for this attribute.

[00:50] If you go to the API section for that component, there is a listing of some of the SASS variable to use for that component. Since I do not see anything about padding or margins, I'm going to navigate over to the overriding SASS variables page.

[01:05] This page contains a listing of all the SASS variables used in Ionic. I'm going to search on item-md. This list new filters the variables for us. There's the exact name of the SASS variable we need, item-md-padding-left. The iOS-specific value would be item-ios-padding-left.

[01:34] We can also see the default value is 16 pixels, the same value we saw when we were inspecting the DOM. As you can tell, the naming scheme is pretty straightforward. We probably could have guessed the name of this variable if we really tried.

[01:49] Let's switch back to our code. We can set these two values in our variables.scss file. Saving them, and now, our two inputs are aligned to the left of the button. Ionic has exposed almost all their styling elements as SASS variables, making it fairly easy to apply custom styling to any of your components.