Why logic in stylesheets is needed in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

SASS

$primary-color: [1];

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

A#3498db

Bprimary-color

Ccolor-primary

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable names without $ sign

Assigning invalid color names

In Sass, variables start with $ and are assigned values like colors. Here, #3498db is a valid color value.

2fill in blank

medium

Complete the code to create a mixin that sets font size in Sass.

SASS

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

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

Alarge

Btext

Cset

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'set'

Using incomplete names

Mixin names should be descriptive. font-size clearly indicates the mixin sets font size.

3fill in blank

hard

Fix the error in the conditional statement to check if $theme is dark.

SASS

@if $theme [1] 'dark' {
  background-color: black;
}

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

A=

B==

C===

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using single equals instead of double

Using triple equals which is invalid in Sass

In Sass, to compare values use ==. Single = is for assignment.

4fill in blank

hard

Fill both blanks to create a loop that generates margin classes from 1 to 3 rem.

SASS

@for $i [1] 1 [2] 3 {
  .m-#{$i} {
    margin: #{$i}rem;
  }
}

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

Afrom

Bto

Cthrough

Duntil

Attempts:

3 left

💡 Hint

Common Mistakes

Using to excludes the last number

Using until is invalid in Sass

The @for loop syntax uses from and through to include the last number.

5fill in blank

hard

Fill all three blanks to create a map of colors and access the primary color.

SASS

$colors: ([1]: #ff0000, [2]: #00ff00, [3]: #0000ff);

.primary {
  color: map-get($colors, [1]);
}

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

Ared

Bgreen

Cblue

Dprimary

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'primary' as a key which is not defined

Mixing keys and values incorrectly

Maps in Sass use keys like red, green, and blue. To get the primary color, use the red key.

Practice

1. Why do we need logic like variables and conditions in stylesheets such as Sass?

easy

A. To remove all colors and use only black and white

B. To make the website load faster by skipping styles

C. To make styles flexible and easier to update across a website

D. To write styles only once without any changes

Solution

1. Step 1: Understand the purpose of logic in stylesheets

   Logic like variables and conditions allow styles to change easily without rewriting code.

2. Step 2: Connect flexibility with easier updates

   Using logic means you can update colors or sizes in one place and see changes everywhere.

3. Final Answer:

   To make styles flexible and easier to update across a website -> Option C

4. Quick Check:

   Logic in stylesheets = flexibility and easy updates [OK]

Hint: Logic helps reuse and update styles easily [OK]

Common Mistakes:

• Thinking logic speeds up website loading
• Believing logic removes colors
• Assuming logic means no style changes

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

easy

A. $main-color: #3498db;

B. var main-color = #3498db;

C. main-color: #3498db;

D. #main-color = 3498db;

Solution

1. Step 1: Recall Sass variable syntax

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

2. Step 2: Check each option for correct syntax

   Only $main-color: #3498db; uses $ and ends with a semicolon correctly.

3. Final Answer:

   $main-color: #3498db; -> Option A

4. Quick Check:

   Sass variables start with $ [OK]

Hint: Sass variables always start with $ [OK]

Common Mistakes:

• Using var keyword like JavaScript
• Omitting the $ sign
• Missing semicolon at the end

3. What will be the background color of the button in this Sass code?

$is-primary: true;

button {
  @if $is-primary {
    background-color: blue;
  } @else {
    background-color: gray;
  }
}

medium

A. Blue

B. Gray

C. No background color

D. Red

Solution

1. Step 1: Check the value of $is-primary

   $is-primary is set to true, so the @if condition is true.

2. Step 2: Determine which block runs

   Since the condition is true, background-color: blue; is applied to button.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   @if true applies first block = Blue [OK]

Hint: True condition runs @if block [OK]

Common Mistakes:

• Choosing else block color
• Ignoring the variable value
• Thinking no color applies

4. Identify the error in this Sass code snippet:

$font-size: 16px

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

medium

A. Variable name should not start with $

B. Missing semicolon after variable declaration

C. font-size property is invalid

D. body selector is incorrect

Solution

1. Step 1: Check variable declaration syntax

   In Sass, each statement must end with a semicolon; here it is missing after 16px.

2. Step 2: Verify other parts

   Variable name and usage are correct; body selector is valid.

3. Final Answer:

   Missing semicolon after variable declaration -> Option B

4. Quick Check:

   Every Sass statement ends with ; [OK]

Hint: Always end Sass lines with semicolon [OK]

Common Mistakes:

• Forgetting semicolon after variable
• Removing $ from variable name
• Misunderstanding CSS property syntax

5. You want to create a theme system in Sass that changes button colors based on a variable $theme. Which approach best uses logic to handle multiple themes?

hard

A. Use JavaScript to change button colors only

B. Set background color directly without conditions

C. Write separate CSS files for each theme without variables

D. @if $theme == 'dark' { background: black; } @else if $theme == 'light' { background: white; } @else { background: gray; }

Solution

1. Step 1: Understand theme switching with Sass logic

   Using @if and @else if allows checking the $theme variable and applying correct styles.

2. Step 2: Compare options for best logic use

   @if $theme == 'dark' { background: black; } @else if $theme == 'light' { background: white; } @else { background: gray; } uses conditions in Sass to handle multiple themes efficiently.

3. Final Answer:

   @if $theme == 'dark' { background: black; } @else if $theme == 'light' { background: white; } @else { background: gray; } -> Option D

4. Quick Check:

   Use @if/@else if for theme logic [OK]

Hint: Use @if/@else if for multiple style choices [OK]

Common Mistakes:

• Ignoring conditions and hardcoding colors
• Relying only on JavaScript for styles
• Creating many separate CSS files