最初に用意しておきたいやつ

base.scss

.s5--alignStart   {text-align:left !important; }
.s5--alignEnd    {text-align:right !important; }
.s5--alignCenter {text-align:center !important; }
.s5--alignTop    {vertical-align:top !important; }
.s5--alignMiddle {vertical-align:middle !important; }
.s5--alignBottom {vertical-align:bottom !important; }


/* modifier:font size
   ========================================================================== */
// 値はプロジェクトにに合わせて変える
.s5--fontXSmall { 10px !important; }
.s5--fontSmall  { 12px !important; }
.s5--fontBase   { 14px !important; }
.s5--fontLarge  { 16px !important; }
.s5--fontXLarge { 20px !important; }

// 値はプロジェクトにに合わせて変える
.s5--fontXSmaller { 80% !important; }
.s5--fontSmaller  { 90% !important; }
.s5--fontLarger   { 120% !important; }
.s5--fontXLarger  { 150% !important; }


/* modifier:font color
   ========================================================================== */
.s5--colorBlack         { color: $colorBlack !important; }
.s5--colorGray          { color: $colorGray  !important; }
.s5--colorRed           { color: $colorRed   !important; }
.s5--colorPink          { color: $colorPink  !important; }

/* modifier: display
   ========================================================================== */
.s5--disableLargeScreen{display:none;}

@media screen and ( max-width: $breakpoint-middle ) and ( min-width: $breakpoint-small + 1 )  {
  .s5--disableLeargeScreen, .s5--disableLargeScreen {display: block;}
  .s5--disableMiddleScreen {display: none !important;}
  .s5--disableSmallScreen  {display: block;}
}

@include max-screen( $breakpoint-small ) {
  .s5--disableLeargeScreen, .s5--disableLargeScreen {display: block;}
  .s5--disableMiddleScreen {display: block;}
  .s5--disableSmallScreen  {display: none !important;}
}