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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      /* _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';

      chevron_right

      
      

      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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

      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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

      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




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.