Recommended way to import utility classes?

[patarapolw]

I don't really like tailwindCSS; so I created utility class myself.

This is the SCSS.

@function escape-number($value) {
  $int: floor($value);
  $fract: $value - $int;
  @if ($fract == 0) {
      @return $int;
  }
  @while ($fract != floor($fract)) {
      $fract: $fract * 10;
  }
  @return $int + '_' + $fract;
}

@each $t, $type in (m: margin, p: padding) {
  @each $size in (0.5, 1) {
    $e: escape-number($size);
    $w: #{$size}em;

    .#{$t}-#{$e} {
      #{$type}: $w;
    }
  
    .#{$t}x-#{$e} {
      #{$type}-left: $w;
      #{$type}-right: $w;
    }
  
    .#{$t}y-#{$e} {
      #{$type}-top: $w;
      #{$type}-bottom: $w;
    }
  
    @each $d, $dir in (l: left, r: right) {
      .#{$t}#{$d}-#{$e} {
        #{$type}-#{$dir}: $w;
      }
    }
  } 
}

declare module '*.scss' {
  const styles: Record<string, string>
  export = styles
}

My questions are,

• Filename convention
• yarn add sass, and do I need to do something else like next.config.js?
  • dependencies or devDependencies? I plan to deploy in SSR mode.
• Will the CSS class needlessly be scoped?
• Multiple classes per component? Does this work?

<section className={['card', styles['my-1']].join(' ')}> </section>