First SASS stylesheet - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is SASS in web development?

SASS is a tool that helps write CSS faster and easier by using features like variables and nesting.

beginner

How do you write a variable in SASS?

You write a variable with a $ sign, like $main-color: #3498db; to store a color value.

beginner

What does nesting mean in SASS?

Nesting means putting CSS selectors inside others to show they belong together, making code cleaner.

beginner

How do you compile a SASS file to CSS?

You use a tool like the command sass input.scss output.css to turn SASS into normal CSS.

beginner

Why use SASS instead of plain CSS?

SASS saves time and keeps styles organized with features like variables, nesting, and reusable code.

Which symbol starts a variable in SASS?

A @

B #

C $

D %

In SASS, variables always start with a $ sign, like $color: red;.

What is the main benefit of nesting selectors in SASS?

A It makes CSS code shorter and easier to read

B It changes how browsers display the page

C It adds animations automatically

D It removes unused CSS

Nesting helps organize CSS by showing which styles belong inside others, making code cleaner.

How do you convert a SASS file to CSS?

A By writing CSS inside <style> tags

B By renaming the file extension to .css

C By opening it in a browser

D Using the command <code>sass input.scss output.css</code>

SASS files must be compiled with a tool like the sass command to create CSS files browsers understand.

Which of these is a valid SASS variable declaration?

A font-size: $16px;

B $font-size: 16px;

C #font-size = 16px;

D @font-size: 16px;

Variables in SASS start with $ and are assigned with a colon, like $font-size: 16px;.

Why might a developer choose SASS over plain CSS?

A To use variables and nesting for easier styling

B Because SASS runs faster in browsers

C Because CSS cannot style colors

D To avoid writing any CSS code

SASS adds helpful features like variables and nesting that make writing and managing styles easier.

Explain how to create a simple SASS stylesheet with a variable and nested selectors.

Think about how variables store values and nesting groups related styles.

Describe the steps to convert a SASS file into a CSS file that browsers can use.

Remember browsers only understand CSS, so SASS needs to be changed first.

Practice

1. What is the main benefit of using variables in a SASS stylesheet?

easy

A. They automatically fix CSS errors.

B. They make the stylesheet load faster in the browser.

C. They let you reuse values like colors and sizes easily.

D. They convert SASS to JavaScript.

Solution

1. Step 1: Understand what variables do in SASS

   Variables store values such as colors or sizes so you can reuse them without repeating the same value.

2. Step 2: Compare options with this understanding

   Only They let you reuse values like colors and sizes easily. correctly describes this benefit. Other options describe unrelated or incorrect features.

3. Final Answer:

   They let you reuse values like colors and sizes easily. -> Option C

4. Quick Check:

   Variables store reusable values = A [OK]

Hint: Variables store reusable values like colors or sizes [OK]

Common Mistakes:

• Thinking variables speed up browser loading
• Believing variables fix CSS errors automatically
• Confusing SASS variables with JavaScript

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

   In SASS, variables start with a dollar sign ($) followed by the name, then a colon and the value.

2. Step 2: Match options to this syntax

   $main-color: #3498db; matches this exactly. Options B, C, and D use incorrect syntax.

3. Final Answer:

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

4. Quick Check:

   Variables start with $ in SASS = A [OK]

Hint: Variables always start with $ in SASS [OK]

Common Mistakes:

• Using var keyword like JavaScript
• Omitting the $ sign before variable name
• Using @ instead of $ for variables

3. What will be the output CSS of this SASS code?

$primary-color: #ff0000;

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

medium

A. .button { color: $primary-color; }
.button:hover { color: darken($primary-color, 20%); }

B. Syntax error: darken function not recognized

C. .button { color: #ff0000; }
.button:hover { color: #ff3333; }

D. .button { color: #ff0000; }
.button:hover { color: #cc0000; }

Solution

1. Step 1: Understand variable substitution and nesting

   The variable $primary-color is replaced with #ff0000. The nested &:hover becomes .button:hover.

2. Step 2: Calculate darken color

   darken(#ff0000, 20%) makes the red darker, resulting in #cc0000.

3. Final Answer:

   .button { color: #ff0000; } .button:hover { color: #cc0000; } -> Option D

4. Quick Check:

   Variables replaced and nesting expanded = B [OK]

Hint: Variables replaced, nesting expands selectors [OK]

Common Mistakes:

• Leaving variables as-is in output CSS
• Not expanding nested selectors
• Misunderstanding darken color function

4. Identify the error in this SASS code:

$font-size: 16px

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

medium

A. body selector cannot be used in SASS

B. Missing semicolon after variable declaration

C. font-size property is invalid

D. Variable name should not start with $

Solution

1. Step 1: Check variable declaration syntax

   In SASS, each statement must end with a semicolon. The variable declaration lacks a semicolon.

2. Step 2: Verify other parts

   Variable names start with $, font-size is valid, and body selector is allowed.

3. Final Answer:

   Missing semicolon after variable declaration -> Option B

4. Quick Check:

   Semicolon missing after $font-size declaration = D [OK]

Hint: Always end variable declarations with semicolon [OK]

Common Mistakes:

• Omitting semicolon after variable
• Thinking $ is invalid for variables
• Assuming selectors can't be used

5. You want to create a SASS stylesheet where all buttons have a background color stored in a variable, and on hover, the background becomes 15% lighter. Which SASS code correctly achieves this?

hard

A. $btn-bg: #007bff;

button {
background-color: $btn-bg;
&:hover {
background-color: lighten($btn-bg, 15%);
}
}

B. $btn-bg: #007bff

button {
background-color: $btn-bg;
&:hover {
background-color: lighten($btn-bg, 15%)
}
}

C. $btn-bg: #007bff;

button {
background-color: $btn-bg;
&:hover {
background-color: darken($btn-bg, 15%);
}
}

D. $btn-bg: #007bff;

button {
background-color: $btn-bg;
&:hover {
background-color: $btn-bg + 15%;
}
}

Solution

1. Step 1: Check variable declaration and syntax

   $btn-bg: #007bff; button { background-color: $btn-bg; &:hover { background-color: lighten($btn-bg, 15%); } } correctly declares $btn-bg with a semicolon and uses proper nesting with &:hover.

2. Step 2: Verify color function usage

   $btn-bg: #007bff; button { background-color: $btn-bg; &:hover { background-color: lighten($btn-bg, 15%); } } uses lighten($btn-bg, 15%) to make the color lighter on hover, which matches the requirement.

3. Step 3: Identify errors in other options

   $btn-bg: #007bff button { background-color: $btn-bg; &:hover { background-color: lighten($btn-bg, 15%) } } misses semicolons; $btn-bg: #007bff; button { background-color: $btn-bg; &:hover { background-color: darken($btn-bg, 15%); } } darkens instead of lightens; $btn-bg: #007bff; button { background-color: $btn-bg; &:hover { background-color: $btn-bg + 15%; } } tries invalid addition of color and percentage.

4. Final Answer:

   $btn-bg: #007bff; button { background-color: $btn-bg; &:hover { background-color: lighten($btn-bg, 15%); } } -> Option A

5. Quick Check:

   Correct variable, nesting, and lighten function = C [OK]

Hint: Use lighten() with correct syntax and semicolons [OK]

Common Mistakes:

• Forgetting semicolons after declarations
• Using darken instead of lighten
• Trying to add percentage directly to color