Why architecture matters at scale in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a variable for the primary color.

SASS

$primary-color: [1];

Drag options to blanks, or click blank then click option'

Acolor-primary

Bprimary-color

C#3498db

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names as values instead of actual colors.

Forgetting the # in hex color codes.

The variable $primary-color should be assigned a valid color value like #3498db. This allows consistent use of the primary color throughout the styles.

2fill in blank

medium

Complete the code to create a mixin for a responsive container.

SASS

@mixin container { max-width: [1]; margin: 0 auto; padding: 0 1rem; }

Drag options to blanks, or click blank then click option'

A100vw

B50%

Cauto

D1200px

Attempts:

3 left

💡 Hint

Common Mistakes

Using 100vw which can cause horizontal scroll.

Using auto which does not limit width.

The max-width of a container is often set to a fixed pixel value like 1200px to limit content width on large screens while centering it.

3fill in blank

hard

Fix the nested selector to add hover styles for links inside a nav.

SASS

nav {
  a {
    color: $primary-color;
    [1] {
      text-decoration: none;
    }
  }
}

Drag options to blanks, or click blank then click option'

A&

B&:hover

C&:link

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without &, resulting in invalid selector.

Using pseudo-classes at the wrong nesting level.

To target the hover state on links inside nav, nest &:hover inside the a selector. This compiles to nav a:hover { text-decoration: none; }.

4fill in blank

hard

Fill both blanks to create a map of breakpoints and use it in a media query.

SASS

$breakpoints: (small: [1], large: [2]);

@media (min-width: map-get($breakpoints, small)) {
  body { font-size: 1rem; }
}

Drag options to blanks, or click blank then click option'

A480px

B768px

C1024px

D1200px

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up small and large breakpoint values.

Using invalid units or missing px.

The map defines breakpoints for responsive design. small is often around 480px and large around 1200px. The media query uses the small breakpoint.

5fill in blank

hard

Fill all three blanks to create a function that darkens a color by a percentage.

SASS

@function darken-color($color, $amount) {
  @return [1]($color, $amount * [2]);
}

$dark-primary: darken-color($primary-color, [3]);

Drag options to blanks, or click blank then click option'

Adarken

B0.01

C20

Dlighten

Attempts:

3 left

💡 Hint

Common Mistakes

Using lighten instead of darken.

Not converting the percentage number to decimal (multiply by 0.01).

Passing percentage as '20%' with % sign instead of number 20.

The darken function in Sass darkens a color by a percentage (decimal). Multiplying $amount (20) by 0.01 converts it to a decimal (0.2). Calling with 20 darkens by 20 percent.

Practice

1. Why is organizing Sass styles into smaller files important when working on large projects?

easy

A. It increases the file size and slows down the website.

B. It prevents the use of mixins.

C. It removes the need for variables.

D. It makes the code easier to read and maintain.

Solution

1. Step 1: Understand file organization benefits

   Smaller files help developers find and fix styles quickly without confusion.

2. Step 2: Consider maintenance and teamwork

   Clear organization allows multiple people to work without overwriting each other's code.

3. Final Answer:

   It makes the code easier to read and maintain. -> Option D

4. Quick Check:

   Organizing code = easier maintenance [OK]

Hint: Smaller files mean clearer code and easier teamwork [OK]

Common Mistakes:

• Thinking bigger files load faster
• Believing variables are not needed
• Confusing mixins with file size

2. Which of the following is the correct way to declare a variable in Sass?

easy

A. var primary-color = #3498db;

B. $primary-color: #3498db;

C. primary-color: #3498db;

D. #primary-color = 3498db;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) followed by the name and a colon.

2. Step 2: Check each option

   Only $primary-color: #3498db; uses the correct syntax: $primary-color: #3498db;

3. Final Answer:

   $primary-color: #3498db; -> Option B

4. Quick Check:

   Sass variables start with $ [OK]

Hint: Sass variables always start with $ [OK]

Common Mistakes:

• Using JavaScript or CSS variable syntax
• Omitting the $ sign
• Missing the colon after variable name

3. Given this Sass code, what will be the compiled CSS output?

$base-color: #333;

.button {
  color: $base-color;
  &:hover {
    color: lighten($base-color, 20%);
  }
}

medium

A. .button { color: #333; } .button:hover { color: #666666; }

B. .button { color: #333; } .button:hover { color: #000000; }

C. .button { color: #333; } .button:hover { color: #999999; }

D. .button { color: #333; } .button:hover { color: #4d4d4d; }

Solution

1. Step 1: Understand the lighten function

   lighten(#333, 20%) makes the color 20% lighter than #333 (which is dark gray).

2. Step 2: Calculate the lighter color

   #333 is rgb(51,51,51) or hsl(0,0%,20%). Lightening by 20% results in hsl(0,0%,40%) which is rgb(102,102,102) or #666666.

3. Final Answer:

   .button { color: #333; } .button:hover { color: #666666; } -> Option A

4. Quick Check:

   lighten(#333, 20%) = #666666 [OK]

Hint: Lighten dark gray by 20% gives #666666 [OK]

Common Mistakes:

• Confusing lighten with darken
• Wrong hex color calculation
• Ignoring nested &:hover selector

4. Identify the error in this Sass code snippet:

$font-size: 16px

body {
  font-size: $font-size;
}

medium

A. font-size property is invalid.

B. Variable name should not start with $.

C. Missing semicolon after variable declaration.

D. body selector is incorrect.

Solution

1. Step 1: Check variable declaration syntax

   Sass variables require a semicolon at the end of the declaration line.

2. Step 2: Review the code snippet

   The line "$font-size: 16px" is missing a semicolon at the end.

3. Final Answer:

   Missing semicolon after variable declaration. -> Option C

4. Quick Check:

   Variables need semicolons [OK]

Hint: Always end Sass variable lines with a semicolon [OK]

Common Mistakes:

• Forgetting semicolon after variable
• Thinking $ is not allowed in variable names
• Assuming CSS property is wrong

5. In a large Sass project, why is it important to use variables and a clear folder structure together?

hard

A. Variables keep design consistent; folder structure helps organize code for teamwork.

B. Variables slow down compilation; folder structure increases file size.

C. Variables replace the need for comments; folder structure hides code from others.

D. Variables are only for colors; folder structure is optional.

Solution

1. Step 1: Understand the role of variables

   Variables store values like colors and fonts to keep design consistent across files.

2. Step 2: Understand folder structure benefits

   A clear folder structure organizes many files so teams can work without confusion or conflicts.

3. Final Answer:

   Variables keep design consistent; folder structure helps organize code for teamwork. -> Option A

4. Quick Check:

   Variables + structure = consistent, organized code [OK]

Hint: Variables + folders = easy teamwork and consistent design [OK]

Common Mistakes:

• Thinking variables slow down projects
• Believing folder structure is unimportant
• Assuming variables only store colors