Include `.scss` file in another `.scss` file?

sass scss-lint
osherdo picture osherdo · Aug 2, 2016 · Viewed 36k times · Source

How can I Include .scss file in another .scss file? I was trying to write this in a file: app.scss:

@include('buttons');
@include('dropzone');

body {

    background: $primaryColor;
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
    height: 100%; /* Cover all (100%) of the container for the body with its content */
    padding-top: 70px;
} /* more css code here */

and it returns an error : invalid css after @import

I try to include 2 other scss files inside the main scss file, so it will be all compiled to one css file eventually. How is it possible?

Answer

Mertcan Diken picture Mertcan Diken · Aug 2, 2016

You can import it like this;

@import "../../_variables";

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

According to your directories and it will do what you want.

Related questions

how to include sass file in reactjs

I use browserify to transform my code now getting error while the sass files were getting imported @import parse error Can any one help me to sort this issue how to use and integrate

Read More
How can I use the key name instead of value in map-get?

I am trying to create a function that simply enables me to output the key name and key value of a simple two-dimensional map in CSS: $people: ( "Hellen": ( age: "34", sex: "female" ), "Patrick": ( age: "23", sex: "male" ), "George": ( age: "10", sex: "male" ), "Vicky": ( …

Read More
What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More