Yogesh Chauhan's Blog

How SCSS (Sass) finds a module without a file extension?

in SCSS on May 20, 2021

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:


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.

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
A few HTML coding standards from WordPressHTMLWhat is a “promise” in JavaScript?JavaScriptHow to define visibility for a property in PHP?PHPA Quick Guide to Object-Oriented Programming in PHPPHPWhat does useEffect do in React?ReactHow to link/add CSS file to HTML Document?CSS