Document how to use mixins
How to build components that leverage them
How to build styles for use in those components
What our exporter updates and doesn’t update
| Table of Contents | ||
|---|---|---|
|
How to Use Mixins
Mixins in Sass are a powerful way to create reusable styles, keeping your stylesheets modular and reducing duplication. They allow you to encapsulate a group of CSS properties and apply them across multiple selectors.
Best Practices
...
Avoid Overuse: While mixins are useful, excessive use, especially without parameters, can lead to bloated CSS due to code duplication. Use mixins judiciously to balance maintainability and performance.
...
Utilize Placeholders for Repeated Styles: For styles that don't require parameters and are reused frequently, consider using placeholders (%) with the @extend directive. This approach avoids duplication in the compiled CSS.
...
Eggstrator stores mixins in a dedicated file (
...
_source.sass)
...
where you can import them into your main stylesheet. This
...
enhances code readability and maintainability, as well as keeping what comes from Figma separate from your own code.
Defining a Mixin
A mixin is declared using the @mixin keyword, followed by a name and an optional parameter list.
...
Now, all input fields share a consistent style.
...
What
...
Eggstractor Supports
What It Updates
Design Tokens:Styling information
Basic Componet Styles:
Extracted from Figma layers when structured consistently.Colors
Typography (font, size, weight)
Spacing (margins, paddings)
Border radius
Shadows
Mixin Definitions:
If a design system uses predefined patterns, Eggstractor can generate mixins for reuse.etc
Works with variables as well as hard-coded values
What It Doesn’t Update
Component-Specific Custom Styles:
If a button or input has hardcoded styles not tied to design tokens, they won’t be updated.
Example:
border: 2px solid red;won’t be automatically converted into a token.
Third-Party Libraries:
Styles from external frameworks like Bootstrap or Material UI won’t be extracted.
Custom CSS written outside Sass won’t be recognized.
Complex Layout Styles:
Grid/Flexbox rules won’t always be mapped unless explicitly defined in Figma.
Nested components might not be fully convertedChanges to structure must be coded (which can use mixins exported by Eggstractor) before they can be automatically updated via the plugin. For example, adding an error message to an input field component that didn’t already have one.
While support for all CSS properties is planned, not all of them are currently implemented.
Non-styling information is not exported, e.g., text changes
Additional Resources