SASS | Use variables across multiple files

30 Jan, 2020
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 partialsTo 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.csshtml,
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;
}

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' ;

/* 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 CSSTo 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");
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);

/* 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 ModulesTo 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 filesfilename.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.cssbutton{
     color: white;
     border-color:indigo;
     background-color:indigo;
     padding :10px;
}

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 filesfilename.import.scss which as@forward "filename" as filename-*;

@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
Picked
SASS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?
How to set input type date in dd-mm-yyyy format using HTML ?
Roadmap to Learn JavaScript For Beginners