Tachyons Breakpoint & Value Class Generator

browserslist

> 1%
last 2 versions

tachyons-class-generator.css

@media screen {
  .br0 {
    border-radius: 0;
  }
  .br1 {
    border-radius: 0.125rem;
  }
  .br2 {
    border-radius: 0.25rem;
  }
  .br3 {
    border-radius: 0.5rem;
  }
  .br-100 {
    border-radius: 100%;
  }
  .br-pill {
    border-radius: 9999px;
  }

  .br--bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br--right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media screen and (min-width: 30em) {
  .br0-ns {
    border-radius: 0;
  }
  .br1-ns {
    border-radius: 0.125rem;
  }
  .br2-ns {
    border-radius: 0.25rem;
  }
  .br3-ns {
    border-radius: 0.5rem;
  }
  .br-100-ns {
    border-radius: 100%;
  }
  .br-pill-ns {
    border-radius: 9999px;
  }

  .br--bottom-ns {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-ns {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br--right-ns {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-ns {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
  .br0-m {
    border-radius: 0;
  }
  .br1-m {
    border-radius: 0.125rem;
  }
  .br2-m {
    border-radius: 0.25rem;
  }
  .br3-m {
    border-radius: 0.5rem;
  }
  .br-100-m {
    border-radius: 100%;
  }
  .br-pill-m {
    border-radius: 9999px;
  }

  .br--bottom-m {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-m {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br--right-m {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-m {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
@media screen and (min-width: 60em) {
  .br0-l {
    border-radius: 0;
  }
  .br1-l {
    border-radius: 0.125rem;
  }
  .br2-l {
    border-radius: 0.25rem;
  }
  .br3-l {
    border-radius: 0.5rem;
  }
  .br-100-l {
    border-radius: 100%;
  }
  .br-pill-l {
    border-radius: 9999px;
  }

  .br--bottom-l {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-l {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br--right-l {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-l {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

tachyons-class-generator.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// See live version at http://www.sassmeister.com/gist/efee0492c9fcb21d523babee13e7f3b9

$breakpoint-not-small: 'screen and (min-width: 30em)' !default;
$breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default;
$breakpoint-large: 'screen and (min-width: 60em)' !default;

// Breakpoint Values
$breakpoints: (
  "": (#{screen}),
  "-ns": (#{$breakpoint-not-small}),
  "-m": (#{$breakpoint-medium}),
  "-l": (#{$breakpoint-large})
);

 // Breakpoint Loop
  @each $media-query, $breakpoint in $breakpoints {
    $breakpoint-prefix: nth($breakpoint, 1);
    
   @media #{$breakpoint-prefix} {   
  
    // Class Name
    .br {
      
      $values: (
        "0": (0),
        "1": (.125rem),
        "2": (0.25rem),
        "3": (.5rem),
        "-100": (100%),
        "-pill": (9999px)
      );
    
    // Scale Loop
     @each $value-name, $value-size in $values {
      $border-value: nth($value-size, 1);
        
      &#{$value-name}#{$media-query} {
        border-radius: $border-value;
      }
    } // end scale loop
  } // end class name
  
    // Literal Values with media queries
    
    .br--bottom#{$media-query} {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .br--top#{$media-query} {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .br--right#{$media-query} {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .br--left#{$media-query} {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
 }
} // end breakpoint loop