Design token management in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a design token in web development?

A design token is a small, reusable value that stores design decisions like colors, fonts, or spacing. It helps keep styles consistent across a website or app.

beginner

How do design tokens improve collaboration between designers and developers?

Design tokens create a shared language by turning design choices into code variables. This makes it easier for designers and developers to work together and keep the look consistent.

beginner

Show an example of a color design token in Sass.

In Sass, you can create a color token like this:<br>

$primary-color: #3498db;

<br>Then use it in styles:

button { background-color: $primary-color; }

beginner

Why is it better to use design tokens instead of hardcoding values in CSS or Sass?

Using design tokens makes it easy to update styles in one place. If you change a token, all parts of the site using it update automatically, saving time and avoiding mistakes.

beginner

What types of design properties can be stored as tokens?

You can store colors, font sizes, spacing, border radius, shadows, and more as design tokens. Anything that controls the look and feel can be a token.

What is the main purpose of design tokens?

A To create animations

B To store reusable design values for consistency

C To write JavaScript functions

D To manage database connections

Design tokens store reusable design values like colors and fonts to keep styles consistent.

How do you define a color token in Sass?

A color-primary = #3498db;

B var(--primary-color: #3498db);

C $primary-color: #3498db;

D primary-color: #3498db;

In Sass, variables start with $ and are assigned with a colon, like $primary-color: #3498db;

Which of these is NOT a benefit of using design tokens?

A Easier style updates

B Improved design consistency

C Better collaboration between teams

D Faster database queries

Design tokens help with styles and collaboration, but do not affect database queries.

Which design property can be stored as a token?

A Font size

B Server IP address

C User password

D HTML tag names

Font size is a design property suitable for tokens; server info or passwords are not.

If you change a design token value, what happens?

A All styles using that token update automatically

B Only the first use of the token changes

C Nothing changes until you restart the browser

D The website crashes

Changing a token updates all styles that use it, ensuring consistent design.

Explain what design tokens are and why they are useful in Sass projects.

Think about how you keep colors or font sizes the same everywhere.

Describe how you would create and use a design token for spacing in a Sass stylesheet.

Use $spacing-small: 1rem; as an example.