YogeshChauhan . com

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:


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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to render lists inside a component in React?ReactHow to set the permissions on all files and folders in Mac?MiscHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftHow to define variables in SCSS (Sass)?SCSSHere’s what we can do with PHP date() functionPHPHow to get the height and width of an element using JavaScript?JavaScript