--description--

To pass the quiz, you must correctly answer at least 9 of the 10 questions below.

--quizzes--

--quiz--

--question--

--text--

What is a CSS framework?

--distractors--

A tool to fix CSS errors.

A tool to lint CSS files.

A formatter for CSS files.

--answer--

A library for CSS styles.

--question--

--text--

Which of the following is a popular utility-first CSS framework?

--distractors--

Template CSS

Loading CSS

Minimal CSS

--answer--

Tailwind CSS

--question--

--text--

What is a disadvantage of CSS frameworks?

--distractors--

Too few components.

No customization options.

Improved browser support.

--answer--

Can bloat CSS files.

--question--

--text--

What does SCSS stand for?

--distractors--

Super Cascading Style Sheets.

Structured CSS.

Simple CSS.

--answer--

Sassy CSS.

--question--

--text--

Which of the following is a feature of Sass?

--distractors--

Comments

CSS linting.

Inline CSS.

--answer--

Mixins

--question--

--text--

Which of the following is the correct way to use utility classes in Tailwind CSS?

--distractors--

<button class="color-blue text-color font-size allow-hover round-btn">
  Button
</button>

<button class="blue text font-size hover round-btn margin-full">
  Button
</button>

<button class="set-blue set-text set-font set-hover round-btn padding-full">
  Button
</button>

--answer--

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-full hover:bg-blue-700">
  Button
</button>

--question--

--text--

What are the two types of CSS frameworks?

--distractors--

Tablet first CSS frameworks and Component-based CSS frameworks.

Utility-first CSS frameworks and Lazy loading CSS frameworks.

Minimal CSS frameworks and Utility-first CSS frameworks.

--answer--

Utility-first CSS frameworks and Component-based CSS frameworks.

--question--

--text--

What is the file extension for SCSS?

--distractors--

.sass

.scsss

.css

--answer--

.scss

--question--

--text--

Which of the following is the correct way to define a variable in SCSS?

--distractors--

#primary-color: #3498eb;

header {
  background-color: #primary-color;
}

>primary-color: #3498eb;

header {
  background-color: >primary-color;
}

?primary-color: #3498eb;

header {
  background-color: ?primary-color;
}

--answer--

$primary-color: #3498eb;

header {
  background-color: $primary-color;
}

--question--

--text--

Which of the following is the correct way to define a mixin?

--distractors--

--mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

>mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

--answer--

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}