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.