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:

$primary-color: #3498db;

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.

Practice

1. What is the main purpose of design tokens in Sass?

easy

A. To write JavaScript functions inside Sass

B. To create animations in Sass

C. To store reusable style values like colors and sizes

D. To manage HTML structure

Solution

1. Step 1: Understand design tokens concept

   Design tokens are variables that hold style values such as colors, fonts, and sizes.

2. Step 2: Identify their purpose in Sass

   They help keep styles consistent and easy to update by reusing these values.

3. Final Answer:

   To store reusable style values like colors and sizes -> Option C

4. Quick Check:

   Design tokens = reusable style values [OK]

Hint: Design tokens store style values for reuse [OK]

Common Mistakes:

• Thinking design tokens are for animations
• Confusing design tokens with JavaScript code
• Believing design tokens manage HTML

2. Which of the following is the correct way to declare a design token for a primary color in Sass?

easy

A. let $primary-color = #3498db;

B. primary-color = #3498db;

C. var primary-color = #3498db;

D. $primary-color: #3498db;

Solution

1. Step 1: Recall Sass variable syntax

   Sass variables start with a dollar sign ($) and use a colon to assign values.

2. Step 2: Check each option

   $primary-color: #3498db; uses correct Sass syntax: $primary-color: #3498db;. Others use JavaScript or invalid syntax.

3. Final Answer:

   $primary-color: #3498db; -> Option D

4. Quick Check:

   Sass variables start with $ and use : [OK]

Hint: Sass variables start with $ and use colon : [OK]

Common Mistakes:

• Using JavaScript variable syntax in Sass
• Omitting the $ sign before variable name
• Using = instead of : for assignment

3. Given the Sass code:

$font-size-base: 1.6rem;
$font-size-large: $font-size-base * 1.5;

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

What will be the computed font size for the body element?

medium

A. 2.4rem

B. 1.5rem

C. 1.6rem

D. 3.1rem

Solution

1. Step 1: Calculate $font-size-large value

   $font-size-large is $font-size-base multiplied by 1.5, so 1.6rem * 1.5 = 2.4rem.

2. Step 2: Apply value to body font-size

   The body font-size uses $font-size-large, so it will be 2.4rem.

3. Final Answer:

   2.4rem -> Option A

4. Quick Check:

   1.6rem * 1.5 = 2.4rem [OK]

Hint: Multiply base size by factor for large size [OK]

Common Mistakes:

• Using 1.5rem instead of multiplying
• Confusing base size with large size
• Forgetting to multiply the values

4. Identify the error in this Sass code for managing design tokens:

$color-primary: #ff0000
$color-secondary: #00ff00;

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

medium

A. Missing semicolon after $color-primary declaration

B. Wrong variable name syntax

C. Using hex colors is not allowed in Sass variables

D. Background color property is invalid

Solution

1. Step 1: Check variable declarations

   $color-primary is missing a semicolon at the end of the line, which is required in Sass.

2. Step 2: Verify other parts

   Variable names and background-color property are correct. Hex colors are valid.

3. Final Answer:

   Missing semicolon after $color-primary declaration -> Option A

4. Quick Check:

   Each Sass variable line must end with ; [OK]

Hint: Always end Sass variable lines with semicolon ; [OK]

Common Mistakes:

• Omitting semicolons after variable declarations
• Thinking hex colors are invalid in Sass
• Misnaming variables without $ sign

5. You want to create a design token system in Sass that allows easy theme switching between light and dark modes. Which approach below best manages color tokens for this purpose?

hard

A. Hardcode colors directly in CSS without variables

B. Define separate maps for light and dark colors, then use a variable to select the active map

C. Use JavaScript to change colors only, ignoring Sass variables

D. Create one set of variables and manually change each color in the stylesheet

Solution

1. Step 1: Understand theme switching needs

   Theme switching requires grouping colors so you can easily swap them based on mode.

2. Step 2: Evaluate options for managing tokens

   Using separate Sass maps for light and dark themes allows selecting the active theme map with a variable, making switching easy and maintainable.

3. Step 3: Reject other options

   Hardcoding colors or manual changes are error-prone and not scalable. JavaScript alone ignores Sass benefits.

4. Final Answer:

   Define separate maps for light and dark colors, then use a variable to select the active map -> Option B

5. Quick Check:

   Use maps and variables for theme switching [OK]

Hint: Use Sass maps and a variable to switch themes [OK]

Common Mistakes:

• Hardcoding colors instead of using variables
• Ignoring Sass variables and relying only on JavaScript
• Manually changing colors everywhere instead of grouping