Why SASS exists - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why was SASS created?

Which of the following best explains why SASS was created?

A To add programming features like variables and functions to CSS, making stylesheets easier to maintain and reuse.

B To replace HTML with a new markup language that supports styling.

C To convert JavaScript code into CSS automatically.

D To make CSS files load faster by compressing them into binary format.

💡 Hint

Think about what CSS lacks that makes writing large stylesheets difficult.

SASS was created to extend CSS with features like variables, nesting, and functions. This helps developers write cleaner and more manageable stylesheets.

🧠 Conceptual

intermediate

What problem does SASS solve in CSS?

Which problem in CSS does SASS primarily address?

A Missing support for images and fonts in stylesheets.

B Inability to create animations in CSS.

C Lack of dynamic features like variables and mixins to avoid repetition.

D No way to write comments in CSS files.

💡 Hint

Think about how SASS helps reduce repeated code.

CSS does not have variables or reusable blocks, so SASS introduces these features to reduce repetition and make styles easier to update.

📝 Syntax

advanced

SASS Variable Usage

What is the correct way to declare and use a variable in SASS?

SASS

$primary-color: #3498db;
.button {
  background-color: ???;
}

A background-color: $primary-color;

B background-color: var(primary-color);

C background-color: #primary-color;

D background-color: $primaryColor;

💡 Hint

SASS variables start with a special symbol and are used directly by name.

In SASS, variables start with a dollar sign ($) and are used by writing their name with the $ symbol.

❓ layout

advanced

Nesting in SASS

What is the output CSS of this SASS code?

.nav {
  ul {
    margin: 0;
  }
}

A

ul {
  margin: 0;
}

B

.nav ul {
  margin: 0;
}

C

ul .nav {
  margin: 0;
}

D

.nav {
  ul {
    margin: 0;
  }
}

💡 Hint

Nesting in SASS combines selectors by placing the nested selector inside the parent.

SASS nesting compiles to combined selectors where the nested selector is appended to the parent selector.

❓ accessibility

expert

SASS and Accessibility: Color Variables

How can using SASS variables improve accessibility in a website's color scheme?

A SASS variables allow colors to change randomly to keep the site interesting.

B SASS variables automatically check color contrast and fix accessibility issues.

C Using variables in SASS disables color contrast warnings in browsers.

D By defining color variables, you can easily adjust colors site-wide to maintain good contrast for readability.

💡 Hint

Think about how changing one variable affects all uses of that color.

Using variables for colors lets developers update colors everywhere by changing one value, helping maintain consistent and accessible contrast.