SASS | Use variables across multiple files
Last Updated :
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 partials
Example 1: Below example illustrates above approach.
SASS files
$primary: #00ff40 ;
$secondary: #f44336 ;
$tretiary: #03a9f4 ;
$tera: #ffeb3b ;
$dark: #000000 ;
$grey: #919191 ;
$light: #dddddd ;
$white: #FFFFFF ;
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;
}
div{
padding : {
top : 20px ;
left : 10px ;
right : 10px ;
bottom : 20px ;
}
h 1 {
color : $secondary !important ;
align-items: center ;
}
}
@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
Example 2:Below example illustrates above approach.
SASS file: style.scss
@mixin google-font($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
Example 3:
Below example illustrates above approach.
SASS files
$purple:Purple;
$white: white ;
button{
color :$ white ;
border-color :$ purple ;
background-color :$ purple ;
padding : 10px ;
}
@forward 'library' as lib-*;
$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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...