Why output optimization matters in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the output style to compressed in Sass.

SASS

sass --style [1] input.scss output.css

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

Acompact

Bexpanded

Cnested

Dcompressed

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'expanded' which keeps spaces and new lines.

Using 'nested' which is more readable but not optimized.

Setting --style to compressed tells Sass to minimize the CSS output by removing spaces and new lines.

2fill in blank

medium

Complete the code to import a partial Sass file named '_variables.scss'.

SASS

@import '[1]';

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

Avariables.scss

Bvars

Cvariables

D_variables

Attempts:

3 left

💡 Hint

Common Mistakes

Including the underscore in the import name.

Adding the '.scss' extension in the import.

When importing partials in Sass, you omit the underscore and file extension. So @import 'variables'; imports _variables.scss.

3fill in blank

hard

Fix the error in the Sass code to correctly nest styles for a button hover state.

SASS

button {
  color: blue;
  &:[1] {
    color: red;
  }
}

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

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'active' which applies when the button is clicked.

Using 'visited' which applies to links, not buttons.

The &:hover selector applies styles when the mouse is over the button.

4fill in blank

hard

Fill both blanks to create a Sass map of colors and access the primary color.

SASS

$colors: ([1]: #ff0000, secondary: #00ff00);
.primary-color {
  color: map-get($colors, '[2]');
}

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

Aprimary

Bprimary-color

Csecondary

Dcolor

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'primary-color' instead of 'primary' as the key.

Mixing up 'secondary' with 'primary'.

The map key is primary. To get the primary color, use map-get($colors, 'primary').

5fill in blank

hard

Fill all three blanks to create a mixin that sets font size and color, then use it.

SASS

@mixin [1]($size, $color) {
  font-size: $size;
  color: $color;
}

h1 {
  @include [2](2rem, [3]);
}

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

Atext-style

Cblue

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for mixin definition and include.

Choosing a color not listed in options.

The mixin name is text-style. We include it with font size 2rem and color red.

Practice

1. Why is output optimization important when writing Sass code?

easy

A. It adds more comments to the CSS for better readability.

B. It makes the CSS files smaller and faster to load in browsers.

C. It changes the colors automatically to improve design.

D. It increases the number of CSS files generated.

Solution

1. Step 1: Understand output optimization purpose

   Output optimization reduces file size and improves loading speed.

2. Step 2: Compare options to this purpose

   Only making CSS smaller and faster matches the purpose; others do not.

3. Final Answer:

   It makes the CSS files smaller and faster to load in browsers. -> Option B

4. Quick Check:

   Output optimization = smaller, faster CSS [OK]

Hint: Optimization means smaller, faster files [OK]

Common Mistakes:

• Thinking optimization adds comments
• Believing optimization changes design colors
• Assuming optimization creates more files

2. Which Sass output style produces the smallest CSS file size?

easy

A. Nested

B. Expanded

C. Compact

D. Compressed

Solution

1. Step 1: Recall Sass output styles

   Sass has Nested, Expanded, Compact, and Compressed styles.

2. Step 2: Identify smallest file style

   Compressed style removes spaces and newlines, making CSS smallest.

3. Final Answer:

   Compressed -> Option D

4. Quick Check:

   Compressed = smallest CSS file [OK]

Hint: Compressed means no spaces or newlines [OK]

Common Mistakes:

• Choosing Nested or Expanded which keep spaces
• Confusing Compact with Compressed
• Not knowing output style names

3. Given this Sass code and output style set to compressed, what will the CSS output look like?

$color: red;
.button {
  color: $color;
  padding: 10px 20px;
}

medium

A. .button {
color: red;
padding: 10px 20px;
}

B. .button {
color: red;
padding: 10px 20px;
}

C. .button{color:red;padding:10px 20px}

D. .button {
color: red;
padding: 10px 20px
}

Solution

1. Step 1: Understand compressed output style

   Compressed style removes all spaces and newlines except those needed for valid CSS.

2. Step 2: Apply compressed style to given code

   The CSS will be one line with no spaces around braces or colons except minimal required.

3. Final Answer:

   .button{color:red;padding:10px 20px} -> Option C

4. Quick Check:

   Compressed output = one line, no spaces [OK]

Hint: Compressed means all CSS in one line without spaces [OK]

Common Mistakes:

• Choosing expanded style output
• Leaving spaces and newlines in compressed output
• Confusing compact and compressed styles

4. You set Sass output style to compressed but your CSS file is still very large. What is the most likely cause?

medium

A. You forgot to remove unused CSS selectors in your Sass files.

B. You used too many variables in your Sass code.

C. You did not use the !important flag enough.

D. You wrote your Sass code with nested selectors.

Solution

1. Step 1: Understand what compressed style does

   Compressed style reduces whitespace but does not remove unused CSS selectors.

2. Step 2: Identify what causes large CSS files

   Unused selectors increase file size; compressed style alone won't remove them.

3. Final Answer:

   You forgot to remove unused CSS selectors in your Sass files. -> Option A

4. Quick Check:

   Unused selectors increase size despite compression [OK]

Hint: Compression doesn't remove unused CSS [OK]

Common Mistakes:

• Thinking variables increase file size
• Believing !important affects file size
• Assuming nesting increases file size

5. You want to optimize your Sass output for a live website but keep it readable during development. Which approach is best?

hard

A. Use nested style for development and compressed for live site.

B. Use compressed style for development and expanded for live site.

C. Use expanded style for both development and live site.

D. Use compact style for live site and nested for development.

Solution

1. Step 1: Understand output styles for readability and size

   Nested style is easier to read during development; compressed is smallest for live.

2. Step 2: Match styles to development and live needs

   Use nested for development readability and compressed for live site speed.

3. Final Answer:

   Use nested style for development and compressed for live site. -> Option A

4. Quick Check:

   Readable dev + small live = nested + compressed [OK]

Hint: Nested for dev, compressed for live site [OK]

Common Mistakes:

• Using compressed during development only
• Using expanded for live site (larger files)
• Confusing compact with compressed