【コピペでOK】使いまわせるSCSS Mixinライブラリまとめ

SCSSでMixinが使えるようになれば…

• 開発スピードがはやくなり納期に間に合う
• CSSを使ってたときより楽しく開発できる

コピペでOK。色々と使いまわしましょう。

・Mixinを作るときの決まりごと

• Mixinの名前はローワキャメル(mixinSample)
• 変数名はスネークケース($mixin_sample)
• 分かりやすい名前を英語で書くこと

Form

@mixin mainInputForm($width: 300px, $height: 40px) {
  width: $width;
  height: $height;
  color: rgba(#707070, 0.5);
  background-color: #fff;
  border: none;
  border-radius: 50px;
  box-shadow: 3px 3px 6px rgba(#000, 0.2);
  font-size: 16px;
  margin: 0 0 20px;
  padding: 0 20px;
  outline: none;
}

.form-box {
  width: 300px;
  height: 40px;
  color: rgba(112, 112, 112, 0.5);
  background-color: #fff;
  border: none !important;
  border-radius: 50px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  margin: 0 0 20px;
  padding: 0 20px;
  outline: none;
}

DEMO::

Shadow

@mixin gradientShadow($bg: rgb(131,58,180), $shadow0: rgba(131,58,180,0.5), $shadow50: rgba(253,29,29,0.5), $shadow100: rgba(252,176,69,0.5)) {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: $bg;
    background: linear-gradient(90deg, $shadow0 0%, $shadow50 50%, $shadow100 100%);
  }
}

.sample {
  width: 100%;
  max-width: 500px;
  position: relative;
}
.sample img {
  width: 100%;
  height: 100%;
}
.sample::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: #833ab4;
  background: linear-gradient(90deg, rgba(131, 58, 180, 0.5) 0%, rgba(253, 29, 29, 0.5) 50%, rgba(252, 176, 69, 0.5) 100%);
}

DEMO::
適用したい要素にposition: relative;が必要。

Header bottom line

@mixin linesBottom($front_line_width: 40%, $front_line_color: blue, $bg_line_color: #000) {
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: $bg_line_color;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: $front_line_width;
    height: 2px;
    background-color: $front_line_color;
  }
}

  
Sample header example

.sample_header h1 {
  position: relative;
}

.sample_header h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}

.sample_header h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  height: 2px;
  background-color: blue;
}

DEMO::
適用したい要素にposition: relative;が必要。

Mediaquery

$sp_width: 480px;
$tb_width: 768px;

@mixin mediaSP() {
  @media screen and (max-width: $sp_width) {
    @content;
  }
}

@mixin mediaTB() {
  @media screen and (max-width: $tb_width) {
    @content;
  }
}