ユーティリティクラス

_trumps.sass

///*------------------------------------*\
//    #margin
//\*------------------------------------*/

// 省略記号の意味
// m - margin
// a - all
// t, r, b, l - top, right, bottom, left
// x, y - top and bottom, right and left
// 0, s, m - zero, small, medium

$trump-margins: ("0": 0, "s": $margin/2, "m": $margin, "l": $margin * 2)

@each $key, $value in $trump-margins
  // all
  .u-ma#{$key}
    margin: $value !important

  // top
  .u-mt#{$key}
    margin-top: $value !important

  // right
  .u-mr#{$key}
    margin-right: $value !important

  // bottom
  .u-mb#{$key}
    margin-bottom: $value !important

  // left
  .u-ml#{$key}
    margin-left: $value !important

  // top, bottom
  .u-my#{$key}
    margin-top: $value !important
    margin-bottom: $value !important

  // right, left
  .u-mx#{$key}
    margin-right: $value !important
    margin-left: $value !important

  // all
  .u-pa#{$key}
    padding: $value !important

  // top
  .u-pt#{$key}
    padding-top: $value !important

  // right
  .u-pr#{$key}
    padding-right: $value !important

  // bottom
  .u-pb#{$key}
    padding-bottom: $value !important

  // left
  .u-pl#{$key}
    padding-left: $value !important

  // top, bottom
  .u-py#{$key}
    padding-top: $value !important
    padding-bottom: $value !important

  // right, left
  .u-px#{$key}
    padding-right: $value !important
    padding-left: $value !important


// テキスト配置
.u-tl
  text-align: left !important

.u-tc
  text-align: center !important

.u-tr
  text-align: right !important

// flex
.u-flex
  flex: 1 !important