Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 2 Current »

  • 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

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

  1. 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.

  2. 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.

  3. Organize Mixins Logically: Store mixins in a dedicated file (e.g., _source.sass) and import them into your main stylesheet. This organization enhances code readability and maintainability.

Defining a Mixin

A mixin is declared using the @mixin keyword, followed by a name and an optional parameter list.

// src/sass/_source.sass
@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

Using a Mixin

To apply the mixin, use the @include directive:

// src/sass/components/_buttons.sass
@import '../mixins';

.button-primary {
  @include button-style(#3498db, #ffffff);
}

.button-secondary {
  @include button-style(#2ecc71, #ffffff);
}

This keeps the styles flexible, allowing color customization while reusing common button properties.

Install Necessary Dependencies

First, ensure you have Node.js and npm installed. Then, install the required packages:

  • Sass: A preprocessor scripting language that is interpreted or compiled into CSS.

  • Browser-Sync: A live-reloading server for development.

  • Concurrently: Allows running multiple npm scripts simultaneously.

  • Nodemon: Automatically restarts the server on file changes.

  • Rimraf: A cross-platform tool to remove files and directories.

npm install sass browser-sync concurrently nodemon rimraf --save-dev

Configure package.json Scripts

In your package.json file, define scripts to handle various tasks:

{
  "scripts": {
    "clean": "rimraf dist",
    "build": "npm run clean && sass src/sass/custom.sass:dist/prod.css --style compressed && cp src/index.html dist/ && cp src/404.html dist/",
    "serve": "browser-sync start --server dist --files 'dist/**/*' --no-notify",
    "start": "npm run build && npm run serve",
    "watch:sass": "sass --watch src/sass/custom.sass:dist/prod.css --style compressed",
    "watch:files": "nodemon --watch src --ext html --exec \"cp src/*.html dist/\"",
    "dev": "npm run clean && npm run build && concurrently \"npm run watch:sass\" \"npm run watch:files\" \"npm run serve\""
  }
}

Script Breakdown:

  • clean: Removes the dist directory to ensure a fresh build.

  • build: Cleans the dist directory, compiles Sass to CSS with compression, and copies HTML files to dist.

  • serve: Starts a development server with live reloading using Browser-Sync.

  • start: Runs the build script and then starts the server.

  • watch:sass: Watches for changes in Sass files and recompiles them automatically.

  • watch:files: Watches for changes in HTML files and copies them to dist upon modification.

  • dev: Cleans the dist directory, builds the project, and runs watch:sass, watch:files, and serve concurrently for development.

Running the Scripts

Development Mode: For active development with live reloading, run:

npm run dev

This command watches for changes in your Sass and HTML files, recompiles them, and reloads the browser automatically.

Production Build: To create a production-ready build, run:

npm run build

This command compiles and compresses your Sass files and prepares your HTML files in the dist directory for deployment.

Additional Resources:

How to Build Components That Leverage Mixins

When structuring your components, it’s best to follow a modular approach, keeping mixins in a separate file and applying them where needed.

Example: Building a Card Component

  1. Define a Card Mixin

// src/sass/_source.sass
@mixin card-style($border-radius: 8px, $shadow: 0px 4px 6px rgba(0, 0, 0, 0.1)) {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $shadow;
  padding: 16px;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15);
  }
}

  1. Apply the Mixin to a Card Component

// src/sass/components/_card.sass
@import '../mixins';

.card {
  @include card-style;
  width: 300px;
}

  1. Use the Component in HTML

<div class="card">
  <h2>Card Title</h2>
  <p>This is an example card with reusable styles.</p>
</div>

Now, every .card will inherit the default styling, but it remains customizable via parameters.

How to Build Styles for Use in Components

To maintain consistency across your project, you should:

  • Define global variables for colors, spacing, and typography.

  • Use mixins for reusable styles.

  • Structure components with BEM methodology (Block__Element--Modifier).

Example: Styling an Input Field

  1. Define Input Styles Using a Mixin

// src/sass/_source.sass
@mixin input-style($border-color: #ccc, $focus-color: #3498db) {
  border: 1px solid $border-color;
  padding: 8px;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s;

  &:focus {
    border-color: $focus-color;
  }
}

  1. Apply the Mixin in an Input Component

// src/sass/components/_input.sass
@import '../mixins';

.input {
  @include input-style;
  width: 100%;
  font-size: 16px;
}

  1. Use It in HTML

<input type="text" class="input" placeholder="Enter text here">

Now, all input fields share a consistent style.

What Our Exporter Supports

What It Updates

  • Design Tokens:

    • 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.

  • Basic Componet Styles:
    Extracted from Figma layers when structured consistently.

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 converted.

Additional Resources

  • No labels