【SCSS】mixin機能でリンクの末尾にアローを作成【OBGノウハウ】

14353 ワード
mixin scss HTML OBG CSS HTML テキストリンク

もっと詳しく>
ひらく↓

など、リンクの末尾にいるアロー（>のこと）をCSSで作るのはよく見かけるし、よく使うと思います。
SCSS勉強中の私が感動したので備忘録として残します(｀・ω・´)

*mixin機能とは
→ざっくり言うと、jsで言うところの関数のイメージ

jsの関数…関数を定義して、必要な所で呼び出すことにより処理が実施出来る。

JavaScript
function 関数名(引数){
	処理…
}

関数名();

mixinの場合…

scss
mixin 名前(引数)｛
	スタイルを定義
｝
@include mixin名(引数);

CSS側で呼び出すことによって、事前にmixinで定義したスタイルを呼び出して使える。

※よく使うパーツをコンポーネントとして持っておけば楽になるかも、と思いちまちま勉強中です。
※命名方法やどこまでを引数とするか、ファイル名など運用方法もまだ迷走中です…。

**まずはサンプルとして確認用のボタンを作成。

html
<div class="button">
    <a href="#">もっと詳しく</a>
</div>

**ボタンの見た目を指定。
（プロパティの記述する順番にいつも悩みます。gulpとPosrCSSを導入して自動でソートしてくれる方法を実装したい…）

scss
.button{
    width: 18rem;
    height: 4rem;
    line-height: 4rem;
    margin: 5rem auto;
    box-sizing: border-box;
    text-align: left;
    border: 1px solid #444;
    background-color: #fff;
    & a{
        display: block;
        text-align: center;
        color: #333;
        position:relative;
        text-decoration: none;
    }
}

ボタンの中でリンクの文字が上下左右から中央に来て欲しいので、heightとline-heightを同じ高さに指定してます。
また、リンクはボタン全体で反応をして欲しいのでaタグにdisplay:blockを指定してます。

**次にアローを作成。

scss
&::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 1.5rem;
    width: 1rem;
    height: 1rem;
    margin-top: -7px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    transform: rotate(45deg);
}

これをコンポーネントとして、別のファイルに保存。
その際、CSSへのコンパイルが不要になるように、また後々その他の装飾とまとめられるように「_linkicon.scss」と名前を付けてパーシャルファイルとして保存。
※パーシャルファイル…ファイル名の先頭に_を付ける事によって、CSSとして変換されない。余分なCSSファイルを生成しなくて済むSCSSの機能の一つ。
そして、mixinとして宣言。

scss
@mixin link_arrow(){
    &::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    right: 1.5rem;
    width: 1rem;
    height: 1rem;
    margin-top: -7px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
　   transform: rotate(45deg);
    }
}

使い方
・style.scssの中で「_linkicon.scss」をインポートする。
@import "./components/_linkicon.scss"
※_や拡張子（.scss）を省略して読み込むことも可能

・.button aのスタイル指定の中でmixin arrowを呼び出して指定する。

scss
.button a{
    @include arrow();
}

汎用性をあげるために、アローの大きさやカラーを変数に置き換えます。

scss
@mixin linkIcon($linkIcon_size:1rem,$linkIcon_color:#333,$linkIcon_deg:right){
    &::after{
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        right: 1.5rem;
        width: $linkIcon_size;
        height: $linkIcon_size;
        margin-top: -7px;
        border-top: 3px solid $linkIcon_color;
        border-right: 3px solid $linkIcon_color;
        @if ($linkIcon_deg == 'left'){
            transform: rotate(225deg);
        }
        @else if($linkIcon_deg == 'top'){
            transform: rotate(-45deg);
        }
        @else if($linkIcon_deg == 'right'){
            transform: rotate(45deg);
        }
        @else if($linkIcon_deg == 'bottom'){
            transform: rotate(135deg);
        }
    }
}

POINT
・引数を指定する際、$変数：デフォルト値でデフォルトの値を設定できる。
・引数を指定する際、デフォルト値が設定されていないものを末尾で宣言するとエラーになる。
先頭で宣言をすればエラーは起きない。
・@includeで呼び出す際、複数ある引数の中で１つだけ指定するには$変数名:値と記載しないとエラーになる。
・@includeで呼び出した後にCSSを上書きすることも可能。

どうすればた自分が使いやすくなるのか、の観点をもとにパーシャルファイルを用意するのめちゃくちゃ楽しいです。（日記的感想）
ただ何でもかんでも変数に格納してしまうと逆に使い難くなるので、その辺りは加減が必要だな、と思います。