SASS Partials and Modules 1 — Questions and Answers
Question 1: What is a Sass partial?
- A Sass file prefixed with an underscore that is not compiled independently (Correct answer)
- A partially compiled Sass file
- A file with incomplete styles
- A Sass file loaded after the main stylesheet
Correct answer: A Sass file prefixed with an underscore that is not compiled independently
Sass partials are files named with a leading underscore (e.g., `_variables.scss`) that are only included via `@use` or `@import`.
Question 2: How do you import a Sass partial named `_buttons.scss`?
- @use 'buttons'; (Correct answer)
- @use '_buttons.scss';
- @import 'buttons.css';
- @include 'buttons';
Correct answer: @use 'buttons';
When using `@use`, you omit the leading underscore and `.scss` extension in the path.
Question 3: What is the key advantage of `@use` over `@import` in Sass?
- It scopes variables and mixins to a namespace, avoiding global pollution (Correct answer)
- It is faster to compile
- It supports CSS files directly
- It runs code at compile time
Correct answer: It scopes variables and mixins to a namespace, avoiding global pollution
`@use` loads Sass files as modules with their own namespaces, preventing conflicts between files.
Question 4: How do you access a variable from a `@use`d module?
- module-name.$variable (Correct answer)
- $module-name.variable
- @module-name.$variable
- module-name::$variable
Correct answer: module-name.$variable
Members from `@use`d modules are accessed using dot notation: `namespace.$variable`.
Question 5: What does `@forward` do in Sass?
- Re-exports members of one module so they are accessible from another file (Correct answer)
- Forwards styles to a child selector
- Imports and immediately outputs a partial
- Passes arguments to a mixin
Correct answer: Re-exports members of one module so they are accessible from another file
`@forward` makes a module's members available when another file uses the forwarding module.
Question 6: Why is `@import` deprecated in modern Sass?
- It pollutes the global scope and can cause duplicate output (Correct answer)
- It is slower than `@use`
- It does not support variables
- It only works with CSS files
Correct answer: It pollutes the global scope and can cause duplicate output
`@import` makes all variables, mixins, and functions global, leading to conflicts and repeated file loading.
SASS Partials and Modules 1
What is a Sass partial?