Table of contents
Hello World. Let's continue learning about SASS and modules in SASS.
In the previous article we learned about nesting and variables. Let's have a look at modules and how they can be used to better structure the styling.
Introduction
SASS Modules are similar to libraries which can be of two types, built in and user-defined. These modules can contain things like styling, functions, mixins, and variables to be used in other SASS files. This makes it easier to
- reuse SASS code instead of rewriting the same utilities in multiple files.
- maintain splitting SASS code into multiple files making it easier to maintain the code. SASS Partials are files that can be used as modules. These partial files begin with an underscore in their name, for example
_partial.scss
.
Partials
Partials are files that are not meant to be compiled, only imported, which means that the SASS compiler doesn't create a corresponding CSS file for a partial SASS file. When importing a partial we can ignore the underscore in the name.
@import
Rule
SASS imports are similar to CSS imports but are resolved during compilation instead of making a new request for the CSS files.
Let's have a look at how to use SASS imports.
In the below table we can see two partial files used to style code blocks and lists, these partials can be imported into the style.scss
file to be used in the webpage. When compiled down to CSS we can see that the partials aren't compiled but only the style.scss
file is compiled down to style.css
and includes the styling from both the partials that are imported.
SCSS | CSS |
---|
|
|
These imports work well but there are known drawbacks of this system that lead to the deprecation of this syntax. The reasons for its deprecation are listed as follows:
- Everything is globally accessible once imported
- Prefixes are required to prevent namespace collisions.
To move away from this syntax, the @use
rule has been introduced in SASS. Let's have a look at it in the next section.
@use
Rule
Modules with the @use
rule can be imported easily using @use <module_name>
;
SCSS | CSS |
---|
|
|
The difference is using @use
comes into picture when trying to access different members like functions and mixins. @use
is namespaced which means that the import name is used to reference the members.
SCSS | CSS |
---|
|
|
The namespaces are automatically defined by the file name but these can be aliased as per a user's requirement. The following example describes how to alias the modules.
SCSS | CSS |
---|
|
|
@use
can be combined with @forward
to make modules easier to use.
Let's have a look at the @forward
rule in the next section.
@forward
Rule
This rule is used to load stylesheets and make its members available when a sheet is loaded using the @use
rule. This allows a user to organize their SCSS across multiple files and load all of it using a single entry point file.
Suppose we have a folder structure as listed below.
scss
├── base
│ ├── _colors.scss
│ ├── _index.scss
│ └── _mixins.scss
└── style.scss
We can use the @forward
rule to load all of our SCSS from the abstract folder into our main folder through the single entry point that is the _index.scss
The table below illustrates the use of @forward
to group all of the SCSS in the base folder and expose it to be used in the style.scss
file.
SCSS | CSS |
---|
|
|
The advantage of using @forward
is the ability to control the visibility of an SCSS's stylesheet members. The keywords show
and hide
can be used to accomplish this. show
informs SCSS to expose only the members listed after it. hide
informs SCSS to hide all the members listed after it and expose the rest.
The same example as the @forward
rule is listed below and herein we are asking the rule to hide the variable $radius
and expose the mixin rounded
while forwarding the members.
SCSS | CSS |
---|
|
|
Conclusion
We've just learned how SCSS modules work and can be used to structure and organize our files to make it easier to hold larger SCSS projects. Modules make it easier to handle a bigger collection of SCSS stylesheets. Let's have a look at some more features that SASS provides in the next post.