Open In App

SASS | Use variables across multiple files

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report
  • 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



    Last Updated : 30 Jan, 2020
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
    Similar Reads