some-sass-mixins

Some useful sass mixins

install:

$ npm install some-sass-mixins

and import:

@import "~some-sass-mixins/mixins"

atomic (aka functional) classes generators

spacing
fonts
colors

other mixins

media
spritesheet
size
hdpi
shapes
decoration
pseudo

atomic (aka functional) classes generators

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

CSS-Tricks

spacingsource

paddings

+paddings(2)

expand generated CSS

.p-0 {
  padding: 0px; }
.pt-0 {
  padding-top: 0px; }
.pb-0 {
  padding-bottop: 0px; }
.ptb-0 {
  padding-top: 0px;
  padding-bottop: 0px; }
.pl-0 {
  padding-left: 0px; }
.pr-0 {
  padding-right: 0px; }
.plr-0 {
  padding-left: 0px;
  padding-right: 0px; }
.p-10 {
  padding: 10px; }
.pt-10 {
  padding-top: 10px; }
.pb-10 {
  padding-bottop: 10px; }
.ptb-10 {
  padding-top: 10px;
  padding-bottop: 10px; }
.pl-10 {
  padding-left: 10px; }
.pr-10 {
  padding-right: 10px; }
.plr-10 {
  padding-left: 10px;
  padding-right: 10px; }
.p-20 {
  padding: 20px; }
.pt-20 {
  padding-top: 20px; }
.pb-20 {
  padding-bottop: 20px; }
.ptb-20 {
  padding-top: 20px;
  padding-bottop: 20px; }
.pl-20 {
  padding-left: 20px; }
.pr-20 {
  padding-right: 20px; }
.plr-20 {
  padding-left: 20px;
 padding-right: 20px; }

.p-0

.p-10

.p-20

.pt-0

.pt-10

.pt-20

.pb-0

.pb-10

.pb-20

.ptb-0

.ptb-10

.ptb-20

.pl-0

.pl-10

.pl-20

.pr-0

.pr-10

.pr-20

.plr-0

.plr-10

.plr-20

margins

+margins(2)

expand generated CSS

.m-0 {
  margin: 0px; }
.mt-0 {
  margin-top: 0px; }
.mb-0 {
  margin-bottom: 0px; }
.mtb-0 {
  margin-top: 0px;
  margin-bottom: 0px; }
.ml-0 {
  margin-left: 0px; }
.mr-0 {
  margin-right: 0px; }
.mlr-0 {
  margin-left: 0px;
  margin-right: 0px; }
.m-10 {
  margin: 10px; }
.mt-10 {
  margin-top: 10px; }
.mb-10 {
  margin-bottom: 10px; }
.mtb-10 {
  margin-top: 10px;
  margin-bottom: 10px; }
.ml-10 {
  margin-left: 10px; }
.mr-10 {
  margin-right: 10px; }
.mlr-10 {
  margin-left: 10px;
  margin-right: 10px; }
.m-20 {
  margin: 20px; }
.mt-20 {
  margin-top: 20px; }
.mb-20 {
  margin-bottom: 20px; }
.mtb-20 {
  margin-top: 20px;
  margin-bottom: 20px; }
.ml-20 {
  margin-left: 20px; }
.mr-20 {
  margin-right: 20px; }
.mlr-20 {
  margin-left: 20px;
 margin-right: 20px; }

.m-0

.m-10

.m-20

.mt-0

.mt-10

.mt-20

.mb-0

.mb-10

.mb-20

.mtb-0

.mtb-10

.mtb-20

.ml-0

.ml-10

.ml-20

.mr-0

.mr-10

.mr-20

.mlr-0

.mlr-10

.mlr-20

font sizessource

+font-sizes(10 14 16 20)

expand generated CSS

.fs-10 {
  font-size: 10px; }
.fs-14 {
  font-size: 14px; }
.fs-16 {
  font-size: 16px; }
.fs-20 {
  font-size: 20px; }

.fs-10

.fs-14

.fs-16

.fs-20

colorssource

$colors: (#1044fa 'blue') (#ff8484 'pink')
 +colors($colors)

expand generated CSS

.color-blue {
  color: #3898ff; }
.bg-blue {
  background-color: #3898ff; }
.color-pink {
  color: #ff8484; }
.bg-pink {
  background-color: #ff8484; }

.color-blue

.color-pink

.bg-blue

.bg-pink

other mixins

media queriessource

Handles bootstrap-like breakpoints or pixel values as arguments

.pink-from-lg
  +from(lg)
    color: $pink

expand generated CSS

@media (min-width: 991px) {
  .pink-from-lg {
    color: #ff8484; } }

I'm pink if screen is wider than 991px

+until(lg)
  color: $pink

expand generated CSS

@media (max-width: 991px) {
  .pink-until-lg {
    color: #ff8484; } }

I'm pink if screen is narrower than 991px

+between(xs, md)
  color: $pink

expand generated CSS

@media (min-width: 500px) and (max-width: 767px) {
  .pink-between-xs-md {
    color: #ff8484; } }

I'm pink if screen is wider than 500px and narrower than 767px

spritesheet animationsource

+css-sprite-grid-anim(1000ms, 6, 5, 1440px, 1480px, '#spritesheet-animation', '../img/spritesheet.png')

expand generated CSS

@keyframes u6gzj915c {
  from {
    background-position-x: 0px; }
  to {
    background-position-x: -1440px; } }
@keyframes u6gzj915l {
  from {
    background-position-y: 0px; }
  to {
    background-position-y: -1480px; } }
#spritesheet-animation {
  width: 240px;
  height: 296px;
  animation: u6gzj915c 200ms steps(6) infinite, u6gzj915l 1000ms steps(5) infinite;
  background-image: url("../img/spritesheet.png");
  background-position-y: 0;
  background-repeat: no-repeat; }

sizesource

$w: 435
$h: 234
.some-img
  +size($w, $h)
  +until(md)
    // Can be used for scaling:
    +size($w, $h, .6)

expand generated CSS

.some-img {
  width: 435;
  height: 234; }
  @media (max-width: 767px) {
    .some-img {
      width: 261;
      height: 140.4; } }

// center fix-width element
.el
  +max-width-center(200)

expand generated CSS

.el {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto; }

high DPI background imagesource

.hero
  +bg_hdpi('images/big-image')

expand generated CSS

.hero {
  background-image: url("images/big-image.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero {
      background-image: url("images/big-image@2x.png"); } }

carets & trianglessource

.caret-down
  +caret(#393939, white, 'bottom', 4px, 5px)

expand generated CSS

.caret-down {
  position: relative; }
  .caret-down:before, .caret-down:after {
    content: "";
    position: absolute; }
  .caret-down:before {
    top: 4px;
    right: -21px;
    border-top: 8px solid #393939;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; }
  .caret-down:after {
    top: 4px;
    right: -20px;
    border-top: 7px solid white;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent; }

.triangle-up
  +triangle('up', 16px, #ff8484)

expand generated CSS

.triangle-up {
  position: relative; }
  .triangle-up:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    left: calc(50% - 16px);
    border-bottom: 16px solid #ff8484;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent; }

.caret-top
.caret-bottom
.caret-right
.caret-left

.triangle-up

.triangle-down

.triangle-right

.triangle-left

decorationsource

.gradient-text
   +gradient-text(#ff8484, #0008ff)

expand generated CSS

.gradient-text {
  color: #ff8484;
  background: -webkit-linear-gradient(#ff8484 37%, #3898ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

gradient text

pseudo classessource

// add a color overlay, 50% black by default
.el
  +pseudo-after-full()

expand generated CSS

.el, .el > * {
  position: relative;
  z-index: 1; }
.el:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); }