Use SCSS code in different files for one project

Question

Recently I visited a website which uses different files for its LESS files; it uses a file for variables, another one for mixin and so on and at the end, it use these files together. For example, it uses the variables in variables file in mixin files.

How can I do the same thing but for scss files?

Answer 1

You can build a construct like this:

_variables.scss:

$color: blue;
$text: "woohooo";

_utils.scss

@mixin awesome-stuff
{
  /*magic*/
}

app.scss

@import "variables";
@import "utils"

p
{
  color: $color;
  @include awesome-stuff;
}

But that is only one way to do it and it depends on the needs of your project.

Answer 2

Use the @import directive to include separate files.

Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.