良く使ったな〜・・・と思うSassのmixin

HTML&CSS

2019.07.29

Oculus Quest、やってます？自分はメチャメチャはまってます。
おはこんばんちわ、kouraku です。今回で最後の投稿となります。

近々、Web業界を引退することとなりました。
ということで、最後に何を書こうか・・・と色々と考えてみた結果、
これまでお世話になったSassのmixinを紹介することに至りました。
「あー、あるよねー」とか、「え？そんなの必要？？？」なんて感じで見ていただければ幸いです（笑）

inline-blockでの隙間を削除

// ----
// * ex) @include remove-letterspace();
// ----
@mixin remove-letterspace {
    letter-spacing: -0.4em;
    > * {
        letter-spacing: normal;
    }
}

どうせなら子供にdisplay: inline-block;を入れようかと何度考えたことか・・・
しかし、inlineが来る可能性もある・・・ということで最後まで入れることがなかったこのmixin。
内容的には大したものではないが、頻度がとても高かったmixin。

ブロック内のテキストを押し出して非表示

// ----
// * ex) @include text-hidden;;
// ----
@mixin text-hidden {
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
}

以前、googleで使われていたテキスト押し出しのスタイル。
（今はSVGをそのまま埋め込んでるタイプになってます）
text-indent: -9999px;がSEO的に良くないと言われ始めた当時、googleのサイトに合わせてみた。
高さを0にしてoverflow: hidden;といった方法などもあるが、なんとなくこっちを採用。
ロゴとか画像を使ったボタンとかで使用するため、これもなかなか頻度高い。

メディアクエリ分岐

// ----
// * ex)
//   @include media-sp {}
//   @include media-pc {}
// ----
$break-point: 767px;

@mixin media-sp {
    @media screen and (max-width: $break-point) {
        @content;
    }
}

@mixin media-pc {
    @media print, screen and (min-width: $break-point + 1) {
        @content;
    }
}

レスポンシブ対応するならこれないともはや無理！！！的なmixin。
Sassを使ってて良かったな〜、と思えるものの一つ。
同じ定義内でSP/PC表示のスタイルを書くことでコードの見通しも良くなる。
たまーにタブレットのデザインが違うものとか出てきたら、タブレット表示用をもう一個作る感じ。

@mediaの散在が気になる場合は、gulpなどでまとめてあげればOK。

vw計算式

// ----
// * ex)
//   width: calcvw(200)
$sp-design-width: 750; // SPデザインの幅を設定

@function calcvw($num, $width: $sp-design-width) {
    @return (1vw * $num / $width * 100);
}

IE7やAndroid標準ブラウザ対応が無くなったことによりガッツリ使えるようになったvw。
スマホデザインをどの端末でも同じように見せたい！！！という要望がきた時に超便利。
デザインサイズそのまま数値を設定することが可能。
（ただし、フォントサイズだけはフォントによって微妙にズレることも・・・その辺りは要調整）

注意点としては、100vwの値（合計値なども）を使わないように気をつける、くらいか？

フォーム周りのリセット

// ----
// * ex)
//   @include none-appearance;
@mixin none-appearance {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none transparent;
    background-clip: padding-box;
    color: inherit;
    font-size: inherit;
    vertical-align: middle;
    box-sizing: border-box;
    &::-ms-clear {
        display: none;
    }
    &::-ms-reveal {
        display: none;
    }
    &::-ms-expand {
        display: none;
    }
}

inputやselectなどの各ブラウザ独自のデザインをリセットするmixin。
フォーム作成時には必須。

placeholderのカラー変更

// ----
// * ex) @include placeholderColor(#00ff00);
// ----
@mixin placeholder-color($color) {
    &:placeholder-shown {
        color: $color;
    }
    &::-webkit-input-placeholder {
        color:$color;
    }
    &:-moz-placeholder {
        color:$color;
        opacity: 1;
    }
    &::-moz-placeholder {
        color:$color;
        opacity: 1;
    }
    &:-ms-input-placeholder {
        color:$color;
    }
}

こちらもフォーム作成時に必須のmixin。

text-stroke (text-shadowを使ったもの)

// ----
// * ex) @include text-stroke(2, #fff);
// ----
@mixin text-stroke($size: 2, $bg: #000) {
    text-shadow: #{$size}px 0 0 #{$bg}, -#{$size}px 0 0 #{$bg}, 0 -#{$size}px 0 #{$bg}, 0 #{$size}px 0 #{$bg}, #{$size}px #{$size}px 0 #{$bg}, -#{$size}px #{$size}px 0 #{$bg}, #{$size}px -#{$size}px 0 #{$bg}, -#{$size}px -#{$size}px 0 #{$bg}, #{$size - 1}px #{$size}px 0 #{$bg}, -#{$size - 1}px #{$size}px 0 #{$bg}, #{$size - 1}px -#{$size}px 0 #{$bg}, -#{$size - 1}px -#{$size}px 0 #{$bg}, #{$size}px #{$size - 1}px 0 #{$bg}, -#{$size}px #{$size - 1}px 0 #{$bg}, #{$size}px -#{$size - 1}px 0 #{$bg}, -#{$size}px -#{$size - 1}px 0 #{$bg}, #{$size - 1}px #{$size - 1}px 0 #{$bg}, -#{$size - 1}px #{$size - 1}px 0 #{$bg}, #{$size - 1}px -#{$size - 1}px 0 #{$bg}, -#{$size - 1}px -#{$size - 1}px 0 #{$bg};
}

text-shadowを使用してテキストの縁取りをするmixin。
たまーにですが要望としてやってくるので捨て置けない存在。

CSSで三角形を作る

// ----
// * ex) @include triangle(#000, 6px, 6px, top); 色, width, height, 頂点の方向(top/right/bottom/left)
// ----
@mixin triangle($color: #000, $width: 10px, $height: 10px, $dir: top) {
    width: 0;
    height: 0;
    @if $dir == 'top' {
        border-width: 0 #{$width/2} #{$height} #{$width/2};
        border-color: transparent transparent $color transparent;
    } @else if $dir == 'bottom' {
        border-width: #{$height} #{$width/2} 0 #{$width/2};
        border-color: $color transparent transparent transparent;
    } @else if $dir == 'right' {
        border-width: #{$height/2} 0 #{$height/2} #{$width};
        border-color: transparent transparent transparent $color;
    } @else {
        border-width: #{$height/2} #{$width} #{$height/2} 0;
        border-color: transparent $color transparent transparent;
    }
    border-style: solid;
}

最後はこれ。アイコンとかで使うような三角形を作るためのmixin。
余計な計算をせずに、サイズや色、向きを指定するだけで作れるようにしたので、意外と重宝。

まとめ

ということで、kouraku最後のバシャログ。はこんな感じで、お世話になったmixinをまとめました。

約17年Web業界で働いてきました。怒涛の勢いで変化してきたこの業界。大変なことも多々ありましたが、学生の頃の夢を早々に実現させてくれたりと、良い思い出もたくさんあります。
別の業界へと移ることになりますが、今後もWeb業界がどのように変わっていくのか、見守りたいと思います。お世話になった、たくさんの方々へ感謝を込めて。ありがとうございました。