Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Override Global SASS Variables in Ionic Applications

    Chris GriffithChris Griffith

    Learn how to inspect your component to discover how the CSS is being applied, then see how to properly override the default values using Ionic's SASS variables.

    ionicIonic
    ^3.0.0
    scssSCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss