This video is available to students only

Adding Base Styles

In this lesson, we're going to create our base file

Adding base styles#

Before we write our Navigation component, let's create another file called \_base.scss inside our sass directory. This file will have all our fixed variables. We will put our responsive breakpoints here, the colours we want to use, fonts etc. We need the breakpoints when we are designing the components by ourselves. Otherwise, Ant design can take care of its elements. We can delete the App.css file, since we're going to use SASS in our project for styling.

Now inside the \_base.scss file, let's write html and set the box-sizing to be border box. If we set box-sizing: border-box; on an element, padding and border are included in the width and height of the element which is exactly what we want. Now I want to use the font, Lato, so let's create our first variable, $font-primary, and give it a value, "Lato". The variables in sass are prefixed with a dollar sign. To be able to load Lato, we need to paste the link in the index.html file. You can copy the link in the script from below.

index.html

base.scss

Start a new discussion. All notification go to the author.