You are definitely bored searching and trying to edit or look into the vast and never-ending stylesheet. So in Sass, we can make separate Sass files and import them into one main Sass.

Sass allows us to Cleanly organize and interconnect stylesheets together and write cleaner Styling Code.

Like any package, we import to use the methods and hidden code to make our code clean.

Partials

Partials refer to the global or constant values we would repeatedly use in code in a file and also in another file. Sass allows the reusability of Styles. First, the code which is to be reused across all the stylesheets should be declared in a .scss file.

Refer to the blog to declare variables and other scss code

Folder Structure:

styles/
  |_ main.scss
  |_ _variables.scss
  |_ _mixins.scss
  |_ base/
      |_ _reset.scss
      |_ _typography.scss
  |_ components/
      |_ _buttons.scss
      |_ _cards.scss

Example:

The file name would be something variable.scss

$primary-Color: blue;

Importing

Now here the partials declared are imported. The file we will be importing the style from should be clearly defined. @import is used to import the stylesheet. The stylesheet we are importing in is components/cards.scss . so the path goes backwards.

 @import "./../variable"

h1{
  color: $primary-Color;
}

So that style of property will be inherited here. This will help us reuse styles and organize large application stylesheets in order to make it easy for developers to debug errors, fix them, and make changes in stylesheets. What if the client wants to change the theme color of the application? That is where Sass comes into play.

In the above code where we are importing the stylesheet, there is no need to specify the extension of that file. Sass will understand that it is a Sass file.