Sass

Sassのrgbaの指定には実は16進数が使えるという話

こういう指定するの少し記述が面倒ですよね。

.hoge {
  background-color: rgba(255, 255, 255, 0.5);
}

しかしSassではこういう風に書くことができます。

.hoge {
  background-color: rgba(#FFF, 0.5);
}

これは超便利。

Sassのmixinを活用してスマホページのテキストを可変にする方法

ミックスインを活用することで、一部分だけスマホのテキストを可変させたい場合等に利用できます。

まとめて特定の要素を可変にすることも可能です。

※Android系でzoom指定が不安定な端末もあるので注意。


@mixin spZoom {
    $max-width:1200;
    $min-width:320;
    $step:20;
    $zoom:1.0;
    zoom:$zoom;
    @for $i from 1 through $step {
         $n:$min-width + ( ( ( $max-width - $min-width ) / $step ) * $i );
         @media screen and (min-width:#{$n}px){
               zoom:$n/$min-width;
         }
    }
}


<p class="spZoom">可変させたいテキスト</p>


Sassの変数を活用してフォントサイズをピクセルから自動的にパーセント表記に変換する方法

//例
.hogehoge {
    font-size: fs(14);
}
//下記で出力される↓↓↓
.hogehoge {
    font-size: 117%;
}
//Sass
//基本サイズを12pxとした場合のパーセントの値を配列で並べていく
$sizeList:84%, 92%, 100%, 109%, 117%, 125%, 134%, 142%, 150%, 159%, 167%, 175%, 184%, 192%, 200%, 209%, 217%, 225%, 233%, 241%, 250%, 284%, 292%, 300%, 309%, 317%, 325%, 334%, 342%, 350%, 359%, 367%, 375%, 384%, 392%, 400%, 409%, 417%, 425%, 434%, 442%;
//サイズが10pxよりちいさければ、10pxとし、50pxより大きければ50pxとし、配列とピクセルの値を連携させる。
//※今回は10pxから50pxの間で設定できるように指定。
@function fs($size) {
    @if $size < 10 {
        $size: 10;
    }
    @if $size > 50 {
        $size: 50;
    }
    @return nth($sizeList, $size - 9);
}