Appearance

Mixins ​

File Information ​

  • Path: app/assets/scss/abstracts/_mixins.scss
  • Purpose: Reusable SCSS mixins for common patterns and responsive design
  • Type: Abstract (no CSS output)

Overview ​

The mixins file contains reusable SCSS mixins that encapsulate common styling patterns, responsive breakpoints, and utility functions. These mixins promote code reusability and maintainability.

Responsive Breakpoint Mixins ​

respond-to($breakpoint) ​

Provides responsive breakpoint mixins for different screen sizes.

Available Breakpoints:

  • mobile: max-width: 960.98px
  • tablet: max-width: 1280.98px
  • desktop: min-width: 1281px
  • large-desktop: min-width: 1640px
  • xl-desktop: min-width: 1920px

Usage:

scss
.component {
  padding: $gap-lg;
  
  @include respond-to(mobile) {
    padding: $gap-md;
  }
  
  @include respond-to(desktop) {
    padding: $gap-xl;
  }
}

Flexbox Utility Mixins ​

flex-center ​

Centers content both horizontally and vertically using flexbox.

Output:

scss
display: flex;
align-items: center;
justify-content: center;

Usage:

scss
.centered-content {
  @include flex-center;
}

flex-between ​

Distributes content with space between using flexbox.

Output:

scss
display: flex;
align-items: center;
justify-content: space-between;

Usage:

scss
.header {
  @include flex-between;
}

Transition Mixins ​

transition-ease ​

Applies a standard ease transition to all properties.

Output:

scss
transition: $transition-all-ease;
-webkit-transition: $transition-all-ease;

Usage:

scss
.button {
  @include transition-ease;
  
  &:hover {
    background-color: $blue-color-700;
  }
}

Custom Scrollbar Mixin ​

custom-scrollbar ​

Styles custom scrollbars with a consistent appearance. The scrollbar is transparent by default and becomes visible on hover.

Output:

  • Custom webkit scrollbar styling
  • Transparent by default
  • Visible on hover with gray color

Usage:

scss
.scrollable-container {
  @include custom-scrollbar;
  height: 100%;
  overflow-y: scroll;
}

Features:

  • 4px width scrollbar
  • Rounded corners
  • Transparent by default
  • Gray color on hover ($gray-color-600)
  • Smooth appearance transition

Complete Example ​

scss
.card {
  @include flex-center;
  @include transition-ease;
  padding: $gap-lg;
  
  @include respond-to(mobile) {
    padding: $gap-md;
  }
  
  .scrollable-content {
    @include custom-scrollbar;
    max-height: 400px;
    overflow-y: scroll;
  }
}

Best Practices ​

  1. Use mixins for repeated patterns - If you find yourself writing the same CSS multiple times, create a mixin
  2. Use responsive mixins - Always use respond-to() mixin instead of writing media queries manually
  3. Combine mixins - Mixins can be combined for more complex patterns
  4. Keep mixins focused - Each mixin should have a single, clear purpose