Grid system mixin from scratch in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a mixin in Sass?

A mixin in Sass is a reusable block of styles that you can include in other selectors. It helps avoid repeating code and makes styles easier to manage.

beginner

Why use a grid system mixin instead of writing grid styles repeatedly?

Using a grid system mixin saves time and keeps your code consistent. You write the grid logic once and reuse it wherever you want a grid layout.

beginner

In a grid system mixin, what does the parameter for 'columns' usually control?

The 'columns' parameter controls how many columns the grid will have. It divides the container into equal parts based on this number.

beginner

How does the 'gap' parameter affect a grid layout in a mixin?

The 'gap' parameter sets the space between grid items, making the layout look neat and separated.

beginner

What CSS properties are essential inside a grid system mixin?

The essential CSS properties are 'display: grid', 'grid-template-columns' to define columns, and 'gap' for spacing between items.

What does the 'display: grid' property do in CSS?

A Turns an element into a grid container

B Hides the element

C Makes text bold

D Adds a border

The 'display: grid' property makes the element a grid container, enabling grid layout features.

In a Sass mixin for grids, which parameter would you use to set the number of columns?

A columns

B gap

C rows

D padding

The 'columns' parameter controls how many columns the grid will have.

What CSS property controls the space between grid items?

A margin

B gap

C padding

D border-spacing

The 'gap' property sets the space between grid items in a grid layout.

Which Sass feature allows you to reuse a block of styles with parameters?

A Placeholder

B Variable

C Function

D Mixin

A mixin lets you reuse styles and accept parameters to customize them.

What is the correct syntax to include a mixin named 'grid' with 4 columns and 1rem gap?

A @extend grid(4, 1rem);

B @mixin grid(4, 1rem);

C @include grid(4, 1rem);

D @use grid(4, 1rem);

Use '@include' to add a mixin with parameters in Sass.

Explain how to create a simple grid system mixin in Sass from scratch.

Think about how CSS grid works and how Sass mixins accept parameters.

Describe why using a grid system mixin improves your CSS workflow.

Consider how reusing code helps in real life, like using a recipe.