【今日から携わる】SASSの使い方（実践編）実際に使っている設定と使い方を公開！

sassが苦手な人向けに、実際に使っているsassファイルを公開します。
設定と使い方を交互に紹介します。

メディアクエリの設定

_mq.scss

/**
 * メディアクエリ
 */
$mq-max: 768px;

@mixin mq-max {
  @media (max-width: ($mq-max)) {
    @content;
  }
}

##↓メディアクエリの使い方

scssでの書き方

.pc {
  display: block;
  @include mq-max {
    display: none;
  }
}

.sp {
  display: none;
  @include mq-max {
    display: block;
  }
}

色の設定

_color.scss

/**
 * 色
 */
$color: (
  brand: #000,
  gray-exdark: #050505,
  gray-dark: #707070,
  gray: #999,
  gray-light: #C1C1C1,
  gray-exlight: #e2e2e2,
  white:#fff
);

/* color・background・border-color */
.border {
  border: 1px solid map-get($color, gray-light);
}
@each $key, $value in $color{
  .c-#{$key} {
    color: $value !important;
  }

  .bg-#{$key} {
    background-color: $value !important;
  }

  .bdc-#{$key} {
    border-color: $value !important;
  }
}

##↓色の使い方

使い方

<div class="c-gray">文字色をgrayにしたい場合<div>
<div class="bg-gray">背景色をgrayにしたい場合<div>
<div class="bdc-gray">ボーダーカラーをgrayにしたい場合<div>

余白の設定

_space.scss

/**
 * 余白
 */

/*独自の余白設定*/
$space-unit : 1rem !default; //16px
$original-margins : (
"unit": 1rem,
"xxs": (0.25 * $space-unit), // 4px
"xs": (0.5 * $space-unit), // 8px
"sm": (0.75 * $space-unit), // 12px
"md": (1.25 * $space-unit), // 20px
"lg": (2 * $space-unit), // 32px
"xl": (3.25 * $space-unit), // 52px
"xxl": (5.25 * $space-unit), // 84px
"0": ($space-unit * 0)
);

/* 余白の設定 */
@each $size,$length in $original-margins {

  .m-#{$size} {
    margin:#{$length} !important
  }

  .mt-#{$size} {
    margin-top:#{$length} !important
  }

  .mr-#{$size} {
    margin-right:#{$length} !important
  }

  .mb-#{$size} {
    margin-bottom:#{$length} !important
  }

  .ml-#{$size} {
    margin-left:#{$length} !important
  }

  .mx-#{$size} {
    margin-left:#{$length} !important;
    margin-right:#{$length} !important;
  }

  .my-#{$size} {
    margin-top:#{$length} !important;
    margin-bottom:#{$length} !important;
  }

  .p-#{$size} {
    padding:#{$length} !important
  }

  .pt-#{$size} {
    padding-top:#{$length} !important
  }

  .pr-#{$size} {
    padding-right:#{$length} !important
  }

  .pb-#{$size} {
    padding-bottom:#{$length} !important
  }

  .pl-#{$size} {
    padding-left:#{$length} !important
  }

  .px-#{$size} {
    padding-left:#{$length} !important;
    padding-right:#{$length} !important;
  }

  .py-#{$size} {
    padding-top:#{$length} !important;
    padding-bottom:#{$length} !important;
  }

  @include mq-max {

  .m-sp-#{$size} {
    margin:#{$length} !important
  }

  .mt-sp-#{$size} {
    margin-top:#{$length} !important
  }

  .mr-sp-#{$size} {
    margin-right:#{$length} !important
  }

  .mb-sp-#{$size} {
    margin-bottom:#{$length} !important
  }

  .ml-sp-#{$size} {
    margin-left:#{$length} !important
  }

  .mx-sp-#{$size} {
    margin-left:#{$length} !important;
    margin-right:#{$length} !important;
  }

  .my-sp-#{$size} {
    margin-top:#{$length} !important;
    margin-bottom:#{$length} !important;
  }

  .p-sp-#{$size} {
    padding:#{$length} !important
  }

  .pt-sp-#{$size} {
    padding-top:#{$length} !important
  }

  .pr-sp-#{$size} {
    padding-right:#{$length} !important
  }

  .pb-sp-#{$size} {
    padding-bottom:#{$length} !important
  }

  .pl-sp-#{$size} {
    padding-left:#{$length} !important
  }

  .px-sp-#{$size} {
    padding-left:#{$length} !important;
    padding-right:#{$length} !important;
  }

  .py-sp-sp-#{$size} {
    padding-top:#{$length} !important;
    padding-bottom:#{$length} !important;
  }
  }
}

##↓余白の使い方

使い方

.m{方向}-{大きさ}　：　マージン余白
.p{方向}-{大きさ}　：　パディング余白

{方向}
無し：全方向（top left bottom right）
t：top
r：right
b：bottom
l：left
x：left & right
y：top & bottom

{大きさ}
space-unit : 16px
xxs：4px
xs：8px
sm：12px
md：20px
lg：32px
xl：52px
xxl：84px
0：0

幅の設定

_width.scss

/* 幅 */
$space-width: (
  0:0,
  50:50px,
  100:100px,
  150:150px,
  200:200px,
  250:250px,
  10p:10%,
  15p:15%,
  20p:20%,
  25p:25%,
  30p:30%,
  40p:40%,
  50p:50%,
  75p:75%,
  100p:100%
);

@each $key,
$value in $space-width {
  .w-#{$key} {
    width: $value !important;
  }
}

##↓幅の使い方

使い方

<div class="w-100p">要素のwidthを100%にしたい場合<div>
<div class="w-75p">要素のwidthを75%にしたい場合<div>
<div class="w-75p">要素のwidthを75%にしたい場合<div>
<div class="w-50p">要素のwidth50%にしたい場合<div>

ボタンの設定

設定

/*　ボタン　*/
[class*="btn-"] {
  position: relative;
  display: block;
  padding: 14.5px;
  padding-right: 20px;
  border: none;
  border-radius: 5px;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
  background-color: #FFE26A;
  color: #333;
}

[class*="btn-"]::after {
  content: url("../../assets/img/icon/icon_chevronRight.svg");
  position: absolute;
  width: 10px;
  height: 18px;
  right: 10px;
}

[class*="btn-"]:hover {
  text-decoration: none;
}

/*====================

　　btnバリエーション

---------------------

テキスト色　　　　：$txt-color
背景色　　　　　　：$bg-color
アイコン　　　　　：$icon

====================*/

//ボタンの多次元配列の定義
$btn: (
  link : (
    txt-color: #333,
    bg-color: #ffd700,
    icon: "icon-arrow"
  ),
  action : (
    txt-color: #333,
    bg-color: #9f9,
    icon: "icon-arrow"
  ),
  clear : (
    txt-color: #fff,
    bg-color: #C1C1C1,
    icon: "icon-arrow"
  ),
);

//配列のループ処理
@each $btnKey,$btnValue in $btn {
  [class*="btn-"] {
    &[class*="-#{$btnKey}"] {
      //通常ボタン
      background-color: map-get($btnValue, bg-color);
      color: map-get($btnValue, txt-color) !important;
    }

    &[class*="-#{$btnKey}"]:hover {
      //ホバー時のボタン
      // background-color: lighten(map-get($color, bg-color), 8%);
    }

    &[class*="-#{$btnKey}"]::after {
      //擬似要素のアイコン
      // content: url(../img/icon/#{map-get($btnValue,icon)}.svg);
    }
  }
}

↓ボタンの使い方

使い方

<div><a class="btn-link" href="">ボタン</a></div>