Basic Sass Interview Questions
1. What is Sass?
Sass stands for Syntactically Awesome Style Sheets. It is a CSS preprocessor that extends CSS with features like variables, nesting, and mixins, compiling to standard CSS.[1][4][5]
2. Why use Sass over plain CSS?
Sass offers stability, power, and compatibility with CSS versions. It acts as syntactic sugar for CSS, enabling less code, reusable methods, and built-in functions like color manipulation.[1][3][5]
3. Who introduced Sass?
Sass was introduced by Natalie Weizenbaum in 2006 as an open-source CSS preprocessor interpreted into CSS.[1]
4. What are the main features of Sass?
Key features include nested syntax, variables, mixins, functions for color manipulation and math, and the ability to join multiple stylesheets into one.[1][3][5]
5. What data types does SassScript support?
SassScript supports numbers (e.g., 1, 10px), strings (e.g., “foo”), colors (e.g., blue, #04a3f9), booleans (true/false), nulls, lists (e.g., 1.5em Arial), and maps (e.g., (key1: value1)).[1]
6. What are the two syntaxes available in Sass?
Sass has indented syntax (.sass) and SCSS syntax (.scss), which is a superset of CSS and more widely used for its CSS-like structure.[2][4]
7. How do you declare a variable in Sass?
Variables are declared with $ followed by the name, like $primary-color: #04a3f9;. Use it as color: $primary-color;.[4][7]
8. What is nesting in Sass?
Nesting allows writing child selectors inside parent selectors for cleaner code, like:
nav {
ul {
margin: 0;
li { display: inline-block; }
}
}[4]
9. Explain the @import directive in Sass.
@import loads another Sass file as if its contents appeared in the current file, enabling modular stylesheets. Use @import "filename";.[4]
10. What command watches Sass files for changes?
Use sass --watch input.scss:output.css to automatically update CSS when Sass files change.[3]
Intermediate Sass Interview Questions
11. What are mixins in Sass?
Mixins are reusable code blocks defined with @mixin name { ... } and included using @include name;. They reduce repetition.[4]
12. Provide an example of a mixin for box-shadow.
Example:
@mixin box-shadow($color) {
box-shadow: 0 2px 4px $color;
}
.card { @include box-shadow(#333); }[4]
13. Explain the @if directive in Sass.
@if runs code only if a condition is true, with @else if and @else for alternatives. Example:
@if $width > 1000px {
.wide { width: 80%; }
} @else {
.narrow { width: 100%; }
}[1]
14. What are Sass functions?
Functions return values using @function name($param) { @return value; }. Sass has built-ins for math, colors, and strings.[2][4]
15. Write a Sass function to square a number.
Example:
@function square($num) {
@return $num * $num;
}
.result { font-size: square(12px); }[4]
16. What are color operations in Sass?
Color operations allow arithmetic on color components, like $color: #123456; lighten($color, 20%);.[3]
17. Explain list operations in Sass.
Lists are comma- or space-separated values. Use functions like nth($list, 1) to access items.[3]
18. What are boolean operations in Sass?
Use and, or, not for conditions, e.g., @if $light and not $dark { ... }.[3]
19. How do you create partials in Sass?
Partials are files starting with _, e.g., _variables.scss. Import with @import "variables"; without the underscore.[2][4]
20. What is the @extend directive?
@extend shares styles from another selector, promoting DRY code: .button { @extend .base-button; }.[4]
Advanced Sass Interview Questions
21. What are variable arguments in mixins?
Use @mixin name(...$args) to accept any number of arguments, accessed via $args.[3]
22. Explain Sass output styles.
Options: nested, expanded, compact, compressed. Use --style compressed for production minification.[3]
23. How do you handle comments in Sass?
// for single-line comments (not in compiled CSS), /* */ for multi-line (appears in CSS).[3]
24. Create a function for pixel-to-rem conversion (assume 16px base).
Example for a Flipkart project:
@function px-to-rem($px) {
@return ($px / 16) * 1rem;
}
.title { font-size: px-to-rem(24px); }[4]
25. What are disadvantages of Sass?
Learning curve for new features, potential compilation performance issues with complex nesting, and team consistency challenges.[1][2][5]
26. Scenario: Optimize Sass for a large Salesforce project.
Use partials for modules, @import efficiently, avoid deep nesting, and compile with –style compressed for performance.[2][4]
27. How do you debug Sass code?
Inspect compiled CSS in browser dev tools, use source maps (–sourcemap), and enable verbose compilation errors.[2][6]
28. Scenario: Build reusable button components for Atlassian using Sass.
Define mixins for variants:
@mixin button($variant: primary) {
@if $variant == primary {
background: blue;
}
}
.btn { @include button(primary); }[2]
29. Explain darken/lighten functions with example for Adobe workflow.
color: lighten(#333, 10%); brightens colors; useful for hover states in themes.[1][3]
30. Scenario: Implement a responsive grid in Sass for Swiggy app.
Use maps and loops:
$breakpoints: (small: 480px, medium: 768px);
@each $name, $width in $breakpoints {
@media (min-width: $width) {
.grid-#{$name} { display: grid; }
}
}[2]
