scss-mixin-trump-maker

A scss mixin to generate handy css trumps

Usage no npm install needed!

<script type="module">
  import scssMixinTrumpMaker from 'https://cdn.skypack.dev/scss-mixin-trump-maker';
</script>

README

SCSS Trump Maker

It takes a map of key: value or list and generates a set of trump classes.

The trump class terminology comes from cssguidelin.es

Install

  1. npm i -S scss-mixin-trump-maker
  2. Import it into your SCSS code:
    @import "~scss-mixin-trump-maker/index";
    

Usage

Parameters
  • $vairations: (map|list)
  • $name: (string)
  • $props.... (unlimited strings)
Examples
  • Use it to generate spacing trumps:

    $spaces: (
      0: 0,
      1: 0.25rem,
      2: 0.5rem
    );
    
    @include trumps-maker($spaces, 'm', 'margin');
    @include trumps-maker($spaces, 'mt', 'margin-top');
    @include trumps-maker($spaces, 'my', 'margin-top', 'margin-bottom');
    @include trumps-maker($spaces, 'pr', 'padding-right');
    

    It will generate:

    .m-0 {margin: 0 !important;}
    .m-1 {margin: 0.25rem !important;}
    .m-2 {margin: 0.5rem !important;}
    
    .mt-0 {margin-top: 0 !important;}
    .mt-1 {margin-top: 0.25rem !important;}
    .mt-2 {margin-top: 0.5rem !important;}
    
    .my-0 {margin-top: 0 !important; margin-bottom: 0 !important;}
    .my-1 {margin-top: 0.25rem !important; margin-bottom: 0.25rem !important;}
    .my-2 {margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;}
    
    .pr-0 {padding-right: 0 !important;}
    .pr-1 {padding-right: 0.25rem !important;}
    .pr-2 {padding-right: 0.5rem !important;}
    
  • Use it to generate height trumps:

    $heights: (
      1: 25vh,
      2: 50vh,
      3: 75vh,
      4: 100vh
    );
    
    @include trumps-maker($heights, 'h', 'height');
    

    It will generate:

    .h-1 {height: 25vh !important;}
    .h-2 {height: 50vh !important;}
    .h-3 {height: 75vh !important;}
    .h-4 {height: 100vh !important;}
    
  • Use it to primitive height trumps:

    $alignments: (
      right,
      center,
      left
    );
    
    @include trumps-maker($alignments, 'text', 'text-align');
    

    It will generate:

    .text-right {text-align: right !important;}
    .text-center {text-align: center !important;}
    .text-left {text-align: left !important;}