SASS | Use variables across multiple files

To use variables across multiple files in SASS is carried out by @import rule of SASS.

@import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions.Such that combine all stylesheets together for compiled css.

It also imports URL such as frameworks like Bootstrap etc..

The @import no longer encouraged in future updates so prefer @use rule instead.

Syntax:

/* importing name and file path is /_file.scss */
@import 'file';

• Approach 1: Import multiple Sass partials
  • To import multiple sass partials with @import by adding @import followed by first filename within quotes then comma(, ) then followed by second filename within quotes end with semicolon

  • /* importing name and file path is /_file1.scss and  /_file2.scss */
    @import 'file1', 'file2' ;
    

  Example 1: Below example illustrates above approach.
  SASS files

  
  
  

  /* _colors.scss */
  $primary:#00ff40;
  $secondary: #f44336;
  $tretiary:#03a9f4;
  $tera: #ffeb3b;
  $dark:#000000;
  $grey:#919191;
  $light:#dddddd;
  $white:#FFFFFF;
  
  /* _std.scss */
  html,
  body,
  ul,
  ol {
      margin: 0;
      padding: 0;
  }
  body {
          color:$grey;
      font-family: Helvetica, sans-serif;
      background-image: url('/img/backimg.jpg');
      background-repeat: no-repeat;
        background-attachment: fixed;
    background-position: center;
    background-size: cover;
      }
  
  /*_section.scss*/
  
  div{
  
      padding: {
          top: 20px;
          left: 10px;
          right: 10px;
          bottom: 20px;
          }
      h1{
  
          color: $secondary !important;
          align-items: center;
  
      }
    }
  /* style.scss*/
  @import 'colors';
  @import 'std', 'section';

  Compiled CSS file: style.css

  html,
  body,
  ul,
  ol {
    margin: 0;
    padding: 0;
  }
  
  body {
    color: #919191;
    font-family: Helvetica, sans-serif;
    background-image: url("/img/backimg.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  
  div {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
  }
  
  div h1 {
    color: #f44336 !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  

• Approach 2: Import Plain CSS
  • To load Plain CSS with @import by following way:
  • @import followed by path of CSS file with extension .css wrapped within double quotes.
  • In case of URL path, complete URL specified within url(” “);

  • /* importing plain CSS*/
    @import "mytheme.css";
    @import "http://fonts.googleapis.com/css?family=Droid+Sans";
    @import url("http://fonts.googleapis.com/css?family=Droid+Sans");
    @import url(mytheme);
    @import "landscape" screen and (orientation: landscape);
    

  Example 2:Below example illustrates above approach.
  SASS file: style.scss

  
  
  

  @mixin google-font($family) {
    @import url("http://fonts.googleapis.com/css?family=#{$family}");
  }
  
  @include google-font("Serif Sans");

  Compiled CSS file: style.css

  @import url("http://fonts.googleapis.com/css?family=Serif Sans");

• Approach 3: Import Modules and configure Modules
  • To load modules and configure modules with @import by following way:
  • To make this easier.Sass also supports import-only files such as follows:
  • _filename.scss is imported to import only files
    filename.import.scss which as

    @forward "filename" as filename-*;
    

  • In case @use this method not recommended.
  • To configure modules, modules loaded through @import by defining global variables with respect to initial load of that module.

  Example 3:
  Below example illustrates above approach.
  SASS files

  /*_libray.scss */
  
  $purple:Purple;
  $white:white;
  button{
       color:$white;
       border-color:$purple;
       background-color:$purple;
       padding :10px;
  }
  
  /* _library.import.scss */
  
  @forward 'library' as lib-*;
  
  /* style.sass  */
  
  $lib-color: indigo;
  @import "library";

  Compiled CSS file: style.css

  button{
       color: white;
       border-color:indigo;
       background-color:indigo;
       padding :10px;
  }
  

Reference: https://sass-lang.com/documentation/at-rules/import