In SassScript, loading another stylesheet or modules is very similar to CSS. We can do that via @import or @use rules.
So far using SassScript, we have trashed many boring CSS code writing techniques. Why not take it to one step forward?
This time it’s about how we load files in SCSS (Sass). It gets redundant to write down the file extensions every time we want to import a stylesheet/module. Sass has a solution to this problem.
You don’t need to write out an absolute URL for each stylesheet/module you load in Sass.
Sass’s module finding algorithm is very smart when it comes to finding a module, which makes a developer’s job way easier and a bit less time consuming if you are developing a library.
For e.g. if you just write out this code in SCSS (Sass):
@use "fonts"
Then your SassScript will search for fonts.scss, fonts.sass, or fonts.css and load whichever one is present.
SassScript loads a stylesheet by URL and not by the file path so forward slashes will work on every operating systems!
Load Paths
Sass allows users to change the load paths.
In SassScript “Load Paths” is the path on the filesystem that SassScript will look for, to locate the modules.
For example if you set the load path like this:
modules/abc/sass
Sass will use the relative path by default to load the modules but no relative path exists then Sass will use load paths.
and if you want to add file named “fonts” from that folder then all you need to do is just add this code:
@use "fonts"
That will load “modules/abc/sass/fonts.scss” file into the stylesheet.
SassScript doesn’t require you to use “./” for relative paths, instead the relative paths are always available.
file extensions import Modules sass
