Prepare for your next front-end development interview with these Top 50 SASS Interview Questions and Answers.
1. What is SASS?
SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that extends CSS with features like variables, nested rules, mixins, functions, and more.
2. How is SASS different from CSS?
SASS adds advanced features such as variables, nesting, mixins, and functions, which are not available in standard CSS.
3. What are the advantages of using SASS?
Code reusability, modular architecture, cleaner syntax, variables, and support for logical constructs.
4. What is SCSS?
SCSS is the newer syntax of SASS which uses the syntax of CSS. Files use .scss extension.
5. Explain the difference between .sass and .scss..sass uses indentation-based syntax, while .scss uses curly braces and semicolons like CSS.
6. How do you install SASS?
Using npm: npm install -g sass
7. What are variables in SASS? Give an example.
Variables store reusable values. Example:
$primary-color: blue;
body {
color: $primary-color;
}
8. How do you use mixins in SASS?
@mixin border-radius($radius) {
border-radius: $radius;
}
div {
@include border-radius(10px);
}
9. What is the purpose of @include and @mixin?@mixin defines a reusable block of styles, and @include imports it where needed.
10. What are SASS functions? Give examples.
Functions return values and can be reused. Example:
@function px-to-rem($px) {
@return $px / 16 * 1rem;
}
11. How does nesting work in SASS?
SASS allows nesting selectors inside one another:
nav {
ul {
li {
a { color: blue; }
}
}
}
12. What is the use of @import in SASS?
To import partials or other SASS files into a file.
13. What is the difference between @import and @use?@import is older and combines code globally. @use is modular and avoids duplication.
14. What is @extend in SASS?
Used to inherit the styles of one selector into another.
%button {
padding: 10px;
}
.btn {@extend %button;}
15. Explain the use of partials in SASS.
Partials are SASS files prefixed with _ and used with @import or @use.
16. What are control directives in SASS?
Used for conditional and loop logic: @if, @for, @each, @while.
17. What does @if do in SASS?
Used to write conditional logic.
@if $theme == dark {
body { background: black; }
}
18. How can you use @for loop in SASS?
@for $i from 1 through 3 {
.col-#{$i} { width: 100px * $i; }
}
19. Explain @each with an example.
Iterates over lists/maps:
@each $color in red, blue, green {
.text-#{$color} { color: $color; }
}
20. What is the @while directive used for?
Repeats a block of code as long as a condition is true.
$i: 1;
@while $i < 4 {
.item-#{$i} { width: 100px * $i; }
$i: $i + 1;
}
21. What are maps in SASS?
Key-value pairs, like:
$theme: (primary: blue, secondary: green);
22. How do you merge two SASS maps?
Use map-merge($map1, $map2).
23. How can you make functions reusable in SASS?
Define using @function and call them in stylesheets.
24. What is interpolation in SASS?
Used to insert variables into strings: #{$var}
25. How do you organize your SASS project files?
Using a modular structure: _variables.scss, _mixins.scss, _base.scss, _components.scss, etc.
26. What is a SASS placeholder selector?
Selector starting with % used with @extend.
27. Explain the concept of DRY in relation to SASS.
Don’t Repeat Yourself: reuse code via mixins, variables, functions.
28. How does SASS help in responsive design?
Variables and mixins allow consistent breakpoints and media queries.
29. How does SASS handle inheritance?
Using @extend and placeholder selectors.
30. How can you debug SASS code?
Use source maps and browser developer tools.
31. What are silent classes or placeholders in SASS?
Classes starting with %, not compiled unless extended.
32. Can you call a mixin inside another mixin?
Yes, mixins can be nested.
33. What is the difference between @function and @mixin?@function returns values; @mixin returns CSS blocks.
34. What does !global mean in SASS?
Declares a variable as global inside a local scope.
35. How do you compile SASS into CSS?
Using CLI: sass input.scss output.css
36. What are the limitations of SASS?
Requires compilation, learning curve, and may introduce complexity.
37. What is the difference between @forward and @use?@forward re-exports modules; @use imports with a namespace.
38. How does the module system work in SASS?
Files can import other files using @use and @forward with encapsulated scopes.
39. How do you resolve naming conflicts between modules?
By using namespace prefixes or aliases in @use.
40. What are SASS modules?
Files imported with @use or @forward to promote modularity.
41. What are some popular frameworks built with SASS?
Bootstrap (v4+), Foundation, Bulma.
42. What is the significance of meta.load-css() in SASS?
Dynamically load other stylesheets.
43. How can you write a recursive function in SASS?
Using @function that calls itself conditionally.
44. How can SASS be integrated with build tools like Webpack or Gulp?
Use sass-loader in Webpack or gulp-sass in Gulp pipelines.
45. What is a SASS transpiler?
Tool that converts SASS to CSS (e.g., Dart Sass).
46. What are some best practices in SASS for maintainability?
Use partials, naming conventions, modular architecture, and minimal nesting.
47. Can you use SASS with React or Angular? How?
Yes. Import .scss files in components or configure build tools.
48. How does SASS improve performance over plain CSS?
Reduces code duplication and simplifies maintenance but doesn’t directly affect runtime performance.
49. What is tree shaking in relation to SASS modules?
Avoids unused code in output when using @use instead of @import.
50. What’s new in the latest version of SASS?
Improvements in @use, @forward, module system, and better error messages.
