Kevin Powell - CommunityKP-C
Kevin Powell - Communityβ€’13mo agoβ€’
136 replies
althepal78

scss help I need help understanding something with functions

I have 4 files. all partials and I do this in my
// _mixins.scss
@mixin button-style($style) {
  background-color: map-get($style, background);
  color: map-get($style, color);
  padding: map-get($style, padding, 1rem); // Default padding if not defined
  width: map-get($style, width, auto); // Default width if not defined
  height: map-get($style, height, auto); // Default height if not defined
  border: map-get($style, border, none); // Ensure no border is applied if not defined
  cursor: map-get($style, cursor, pointer); // Default cursor to pointer if not defined
  border-radius: map-get($style, border-radius, 5px); // Default border-radius to 5px if not defined
}

// _buttons.scss
@use '../abstracts/colors' as c;
@use '../abstracts/mixins' as m;
 
$button-styles: (
  nav-button: (
    background: c.$primary-color,
    color: c.$secondary-color, 
    width: 100%,
    height: 100%,
  ),
);

.nav-button {
  @include m.button-style(map-get($button-styles, nav-button));
}

 // _breakpoints.scss
$breakpoints: (
    'xs': 0,
    'sm': 576px,
    'md': 768px,
    'lg': 992px,
    'xl': 1200px
  );
  
  @mixin respond-to($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {
      @media (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
      }
    }
  }

@use './abstracts/index' as  *;
@use './components/index' as *;
@use './layout/index' as *;
@use './base/index' as *;

how do you make everything thing work for the button
Was this page helpful?