SASS Modules and Imports 1 — Questions and Answers
Question 1: What is the modern Sass directive for loading a module?
- @import
- @load
- @use (Correct answer)
- @require
Correct answer: @use
The `@use` directive is the modern replacement for `@import` in Sass, providing namespaced access to variables, mixins, and functions.
Question 2: Why is `@use` preferred over `@import` in modern Sass?
- @use is faster to compile
- @use provides namespacing and avoids global namespace pollution (Correct answer)
- @use supports more file types
- @use works without a build step
Correct answer: @use provides namespacing and avoids global namespace pollution
`@use` loads a Sass file as a namespace, preventing variable/mixin name collisions and making dependencies explicit.
Question 3: How do you access a variable from a `@use`-loaded module?
- $variable
- $module.$variable (Correct answer)
- @module.$variable
- module.$variable
Correct answer: $module.$variable
Variables from a `@use`d module are accessed using the namespace prefix: `$module.$variable`.
Question 4: How do you give a custom namespace to a `@use` import?
- @use 'file' namespace 'alias'
- @use 'file' as alias (Correct answer)
- @use 'file' -> alias
- @use alias from 'file'
Correct answer: @use 'file' as alias
The `as` keyword assigns a custom namespace: `@use 'file' as alias` lets you use `alias.$variable` instead of `file.$variable`.
Question 5: What does `@use 'file' as *` do in Sass?
- Imports all members into the global namespace (no prefix) (Correct answer)
- Loads all files in the directory
- Makes all members private
- Exports all members from the current file
Correct answer: Imports all members into the global namespace (no prefix)
Using `as *` loads all public members into the global namespace without a prefix, similar to the old `@import` behavior.
Question 6: What is a Sass partial file?
- A file that only contains mixins
- A file prefixed with `_` that is not compiled to CSS on its own (Correct answer)
- A file that is only half-complete
- A file that contains only variables
Correct answer: A file prefixed with `_` that is not compiled to CSS on its own
Partial files are Sass files whose names start with an underscore (e.g., `_variables.scss`); they are meant to be imported but not compiled independently.
SASS Modules and Imports 1
What is the modern Sass directive for loading a module?