First SASS stylesheet - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the compiled CSS output?

Given this SASS code, what is the exact CSS output after compilation?

SASS

$primary-color: #3498db;

.button {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

A

.button {
  background-color: #3498db;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

B

.button {
  background-color: $primary-color;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

C

.button {
  background-color: blue;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

D

.button {
  background-color: #3498db;
  color: black;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

💡 Hint

Remember that variables in SASS are replaced with their values during compilation.

SASS variables like $primary-color are replaced with their assigned values (#3498db) in the compiled CSS. The rest of the properties remain unchanged.

❓ layout

intermediate

How does this nested SASS code render in CSS?

What is the compiled CSS output of this nested SASS code?

SASS

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
    color: #333;
  }
}

A

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
}
a {
  text-decoration: none;
  color: #333;
}

B

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
  color: #333;
}

C

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    text-decoration: none;
    color: #333;
  }
}

D

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
}
.nav a {
  text-decoration: none;
  color: #333;
}

💡 Hint

Nested selectors in SASS compile to combined selectors with parent references.

SASS nesting compiles by prefixing nested selectors with their parent selectors. So ul, li, and a inside .nav become .nav ul, .nav li, and .nav a respectively.

❓ selector

advanced

Which CSS selector is generated by this SASS code?

What is the CSS selector generated by this SASS snippet?

SASS

.card {
  &-header {
    font-weight: bold;
  }
  &-body {
    padding: 1rem;
  }
}

A

.card {
  -header {
    font-weight: bold;
  }
  -body {
    padding: 1rem;
  }
}

B

.card &-header {
  font-weight: bold;
}
.card &-body {
  padding: 1rem;
}

C

.card-header {
  font-weight: bold;
}
.card-body {
  padding: 1rem;
}

D

.card-header-body {
  font-weight: bold;
  padding: 1rem;
}

💡 Hint

The & symbol in SASS represents the parent selector.

Using &-header inside .card creates a selector by appending '-header' to '.card', resulting in '.card-header'. Same for &-body producing '.card-body'.

❓ accessibility

advanced

How to improve accessibility with SASS variables?

Which SASS code snippet best supports easy color contrast adjustments for accessibility?

A

$background-color: #fff;

body {
  color: #333;
  background-color: $background-color;
}

B

body {
  color: #333;
  background-color: #fff;
}

C

$text-color: #333;

body {
  color: $text-color;
  background-color: #fff;
}

D

$text-color: #333;
$background-color: #fff;

body {
  color: $text-color;
  background-color: $background-color;
}

💡 Hint

Using variables for both text and background colors allows easy updates for contrast.

Defining both text and background colors as variables lets you adjust them together to maintain good contrast, improving accessibility.

🧠 Conceptual

expert

What is the output of this SASS code with mixins and nesting?

Given this SASS code, what is the compiled CSS output?

SASS

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

.container {
  @include flex-center;
  height: 100vh;
  .box {
    width: 10rem;
    height: 10rem;
    background: red;
  }
}

A

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container .box {
  width: 10rem;
  height: 10rem;
  background: red;
}

B

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box {
  width: 10rem;
  height: 10rem;
  background: red;
}

C

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .box {
    width: 10rem;
    height: 10rem;
    background: red;
  }
}

D

.container {
  @include flex-center;
  height: 100vh;
}
.container .box {
  width: 10rem;
  height: 10rem;
  background: red;
}

💡 Hint

Mixins insert their CSS properties where included. Nested selectors compile with parent prefixes.

The mixin flex-center adds flexbox properties inside .container. The nested .box becomes .container .box in CSS with its own styles.