scss よく使ってる便利そうなmixin集（Scss mixin collection）

Posted 2021-05-17

@charset "utf-8";



/**
 * よく使う便利そうなmixin集
 * 自分で作ったものもありますし、自分用にforkしたものもありますし。（都度更新）
 *
 * margin and padding...............marginとpassingでもって調整する用
 * formリセット......................formのデフォルトデザインを無しに
 * hoge（疑似要素アイコン指定）.........疑似要素に特定の法則で名付けられた画像ファイルをまとめて指定
 * flexセット........................flexの指定をまとめて
 * 疑似クラス.........................before,after使う時に毎回指定するの面倒なので用
 * hover時の透過度....................hoverする際のopacity度指定
 * グラデーション......................上下グラデ用
 * 吹出しの矢印のやつ..................毎回作るの面倒なので用
 * 隣接要素のmargin...................隣接要素のmargin指定を一行で
 * くの字矢印.........................左右上下とサイズ指定でくの字の矢印を
 */



 // margin padding
 // ----------------------------------------------------------
 $space: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60;
 @each $prefix in $space{
     // top
     .mt#{$prefix} { margin-top:   #{$prefix}px !important; }
     .pt#{$prefix} { padding-top:   #{$prefix}px !important; }
     // right
     .mr#{$prefix} { margin-right: #{$prefix}px !important; }
     .pr#{$prefix} { padding-right:   #{$prefix}px !important; }
     // bottom
     .mb#{$prefix} { margin-bottom:#{$prefix}px !important; }
     .pb#{$prefix} { padding-bottom:   #{$prefix}px !important; }
     // left
     .ml#{$prefix} { margin-left:  #{$prefix}px !important; }
     .pl#{$prefix} { padding-left:   #{$prefix}px !important; }
 }



// formスタイルリセット
// ----------------------------------------------------------
@mixin formReset() {
    input, button, textarea, select {
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
}



// hoge（疑似要素アイコン指定）
// ----------------------------------------------------------
@mixin hoge($name:arrow, $size:00, $color:white, $margin:0 0 0 0, $position:before) {
    // mixin指定方法    ：ファイル名（接頭）, 画像サイズ, 色, margin, beforeかafterか
    // ファイル名の指定例：arrow-00-white.png
    &:before,
    &:after {
        background-size: cover;
        vertical-align: middle;
        margin: $margin;
        height: #{$size}px;
        width: #{$size}px;
        @include mediaSP() { // SPの場合半分のサイズ
            height: #{$size / 2}px;
            width: #{$size / 2}px;
        }
    }
    @if ( $position == "before" ) {
        &:before {
            @include pseudo;
            background-image: url(../images/common/#{name}#{$size}-#{$color}.png);
        }
    }
    @else if ( $position == "after" ) {
        &:after {
            @include pseudo;
            background-image: url(../images/common/#{name}#{$size}-#{$color}.png);
        }
    }
}



// flexセット
// ----------------------------------------------------------
@mixin flexSet($align:flex-start, $justy:flex-start, $dir:row, $wrap:nowrap) {
    display        : flex;
    align-items    : $align;
    justify-content: $justy;
    flex-direction : $dir;
    flex-wrap      : $wrap;
}



// 疑似クラス
// ----------------------------------------------------------
@mixin pseudo {
    content: "";
    display: inline-block;
}



// hover時の透過度
// ----------------------------------------------------------
@mixin hoverOp($opacity:.8) {
    &:hover {
        @include mediaPC() { //PCのみ
            opacity: $opacity;
        }
    }
}



// グラデーション
// ----------------------------------------------------------
@mixin gradation($topColor, $bottomColor) {
    background: mix($topColor, $bottomColor, 50%); //開始色と終了色の中間の色を背景色に指定
    background: linear-gradient($topColor, $bottomColor);
}



// 吹出しの矢印のやつ
// ----------------------------------------------------------
@mixin balloonArrow($width:10px, $height:5px, $color:#000, $position:bottom) {
    position: relative;
    @if ( $position == "top" ) {
        &:after {
            border-width: 0 #{$width/2}px #{$height}px #{$width/2}px;
            border-color: transparent transparent $color transparent;
            top         : -#{$height}px;
            left        : calc( 50% - #{$width/2}px );
        }
    }
    @else if ( $position == "right" ) {
        &:after {
            border-width: #{$width/2}px 0 #{$width/2}px #{$height}px;
            border-color: transparent transparent transparent $color;
            top         : calc( 50% - #{$width/2}px );
            right       : -#{$height}px;
        }
    }
    @else if ( $position == "bottom" ) {
        &:after {
            border-width: #{$height}px #{$width/2}px 0 #{$width/2}px;
            border-color: $color transparent transparent transparent;
            bottom      : -#{$height}px;
            left        : calc( 50% - #{$width/2}px );
        }
    }
    @else if ( $position == "left" ) {
        &:after {
            border-width: #{$width/2}px #{$height}px #{$width/2}px 0;
            border-color: transparent $color transparent transparent;
            top         : calc( 50% - #{$width/2}px );
            left        : -#{$height}px;
        }
    }
    &:after {
        content: "";
        border-style: solid;
        display: inline-block;
        height: 0;
        position: absolute;
        width: 0;
    }
}



// 隣接要素のmargin
// ----------------------------------------------------------
@mixin adjacentMargin($top:0, $right:0, $bottom:0, $left:0, $selector:"li") {
    & + #{$selector} {
        margin: #{$top}px #{$right}px #{$bottom}px #{$left}px;
    }
}



// くの字矢印
// ----------------------------------------------------------
@mixin arrow($width, $bold, $color, $deg) {
    border-style: solid;
    border-width: 0 #{$bold}px #{$bold}px 0;
    content: "";
    display: inline-block;
    position: absolute;
    height: #{$width}px;
    width: #{$width}px;
    //色
    @if ( $color == "blue" )        { border-color: #0067C0; }
    @else if ( $color == "white" )  { border-color: #fff;    }
    @else if ( $color == "glay" )   { border-color: #808080; }
    @else if ( $color == "black" )  { border-color: #000; }
    //角度
    @if ( $deg == "left" )        { transform: rotate(135deg); }
    @else if ( $deg == "top" )    { transform: rotate(225deg); }
    @else if ( $deg == "right" )  { transform: rotate(-45deg); }
    @else if ( $deg == "bottom" ) { transform: rotate(45deg);  }
    //SPの時
    @include mediaSP() {
        height: #{$width/2}px;
        width: #{$width/2}px;
    }
}