Sass @ import And Partials
Sass @ import Directive
Sass @ import directive provides a facility to import the related sass files into other sass files. Let us see its general syntax.
Sass always keeps the CSS code dry(don't repeat yourself). It will be possible due to write related code into separate files.
@import"headingText" will include headingText.scss or headingText.sass in the CSS ouput.Please keep in mind that the file name should not contain any file extension like .scss or .sass in the @import directive statement.
Example
@import "variables";
@import "colors";
@import "reset";
SCSS Syntax (headingInfo.scss):
h2{
color:red;
background-color:black;
}
SCSS Syntax (main.scss):
@import "headingInfo";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
CSS output:
Source Code
<style>
h2{
color:red;
background-color:black;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
</style>
Sass Partials
Saving the sass file with an underscore following by file name, will not be transpiled through the sass transpiler. This feature is known as a partial in Sass.
Sass Partial Syntax:
Example
_headingColors.scss
$primary: #EE87EE;
$secondary: #8169E1;
$lighttext: #7FBC8F;
Importing the partial file, omit the underscore .Sass understands that it should import the file _headingColors.scss
@import "headingColors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $primary;
}
CSS Output:
General Syntax
//_headingColors.scss
$primary: #EE87EE;
$secondary: #8169E1;
$lighttext: #7FBC8F;
//main.scss
@import "headingColors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $primary;
}
Source Code
<style>
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color:#EE87EE;
}
</style>
Web Tutorials
