ウェブ
TUESDAY 2017 / 12 / 12
Sassでよく使っているmixinを紹介します
Text by Hiroyuki Matsumoto
Sassにはmixinという便利な機能があるのですが、どうもベンダープレフィックスの自動挿入等、クロスブラウザ対応のための機能ばかりが紹介されている傾向が強いです。
ここでは自分がよく使っている便利なmixinを紹介してみます。
随時追加していく予定です（気が向いたら）。
目次
-
省略型
-
JavaScript関連
-
Compassの機能 ※非mixin
justify : 両端揃えの設定
IE以外のブラウザでは text-align: justify; だけで設定できる両端揃えですが、
IEのみ追加で text-justify: inter-ideograph; というプロパティを追加しなくてはなりません。
毎回「いんたーいでおぐらふ」という言葉を思い出せなくてググったりする羽目になるので、mixinとして用意しておくと便利ですよね。
mixin定義
@mixin justify(){
text-align: justify;
text-justify: inter-ideograph;
}
呼び出し方
p{
@include justify();
}
生成されるCSS
p{
text-align: justify;
text-justify: inter-ideograph;
}
line-truncate : 文字が溢れた際の表示を … にする
3つのプロパティを組み合わせなければならないので、一括して呼び出せるようにします。
mixin定義
@mixin line-truncate(){
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
呼び出し方
p{
@include line-truncate();
}
生成されるCSS
p{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
lines-truncate : 文字が溢れた際の表示を … にする（複数行対応, Chrome/Safariのみ）
溢れた文字については … と省略するmixinです。
複数行にも対応できますが、Chrome / Safari にしか対応していませんので line-truncate と使い分けましょう。
第1引数には、何行目まで表示させるかを数値で指定します。（省略時は2行）
mixin定義
@mixin lines-truncate($lines: 2){
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
}
呼び出し方
p{
width: 400px;
@include lines-truncate(3);
}
生成されるCSS
p{
width:400px;
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
absolute : position:absolute; および top / right / bottom / left の設定を一括設定
セットで使うことの多い、position: absolute; および top/right/bottom/left のプロパティを一括で設定します。
top/right/bottom/left は任意のもののみ指定することも可能です。
mixin定義
@mixin absolute($top:null, $right:null, $bottom:null, $left:null){
position: absolute;
@if $top != null{
top: $top;
}
@if $right != null{
right: $right;
}
@if $bottom != null{
bottom: $bottom;
}
@if $left != null{
left: $left;
}
}
呼び出し方
p{
@include absolute(0,0,0,0);
}
p.vertical{
@include absolute($top:0, $bottom:0);
}
生成されるCSS
p{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
p.vertical{
position:absolute;
top:0;
bottom:0;
}
aspect-ratio : ブロックの縦横比を設定
ブロックの縦横比を固定するmixinです。
「縦横比を設定」としていますが、比率の計算を自分ですると面倒なので幅と高さを指定するだけにしています。
第１引数：（必須）幅
第２引数：（必須）高さ
第３引数：背景画像を指定する際のみ画像へのパス
mixin定義
@mixin aspect-ratio($width, $height, $image_path: null) {
display: block;
width: 100%;
height: 0;
padding-top: ($height / $width) * 100%;
@if $image_path != null {
background: url($image_path) 50% 50% no-repeat;
background-size: cover;
}
}
呼び出し方
p{
@include aspect-ratio(1200px, 400px);
}
p.bg{
@include aspect-ratio(1200px, 400px, "../images/bg.png");
}
生成されるCSS
p{
display:block;
width:100%;
height:0;
padding-top:33.33333%;
}
p.bg{
display:block;
width:100%;
height:0;
padding-top:33.33333%;
background:url("../images/bg.png") 50% 50% no-repeat;
background-size:cover;
}
font-rem : remを使用して文字サイズ等を指定
rem はルート要素の文字サイズを基準にサイズ指定できる便利な単位です。
ところで Illustrator には選択箇所のCSSを生成する機能がありますが、こちらは px単位です。
Illustrator の CSSプロパティウィンドウで確認できる
px単位ではなく rem単位にすることで、ルート要素の文字サイズを変更するだけで全体の文字サイズが変更できて便利だなぁ、ということで作ったのがこちらです。
font-size, line-height, letter-spacing を指定することで rem単位でのCSSを生成します。
※rem単位となるのは font-size のみで、line-height と letter-spacing はem単位となります。
スマホ等画面の小さい環境では文字を小さくしたいという場合は、メディアクエリで :root の文字サイズを小さくするだけで全体の文字サイズが縮小されるようになります。
第１引数：（必須）font-size の値（単位px）
第２引数：line-height の値（単位px） なお 0 とすると line-height は出力しない。
第３引数：letter-spacing の値（単位px） なお 0 とすると letter-spacing は出力しない。
第４引数：letter-spacing を設定した状態で中央揃えをすると、letter-spacing分位置がずれてしまう。ここで true を指定すると、そのずれを解消できる。
なお前提として、変数 $font-size-root を作り、そこにルート要素のフォントサイズの値（単位px）を指定する必要があります。
mixin定義
@mixin font-rem($font-size, $line-height:0, $letter-spacing:0, $is_center:false){
font-size: $font-size / $font-size-root * 1rem;
@if($line-height!=0){
line-height: ($line-height / $font-size);
}
@if($letter-spacing!=0){
letter-spacing: ($letter-spacing / $font-size) * 1em;
@if($is_center==true){
text-indent: ($letter-spacing / $font-size) * 1em;
}
}
}
呼び出し方
$font-size-root: 16px; // 必ず指定しましょう
:root{
font-size: $font-size-root; // ついでにroot疑似要素にきちんと文字サイズを指定しておきましょう。
}
p{
@include font-rem(19px);
}
p.3{
@include font-rem(19px, 34px, 7.6px);
}
p.center{
text-align: center;
@include font-rem(19px, 34px, 7.6px, true);
}
生成されるCSS
:root{
font-size:16px;
}
p{
font-size:1.1875rem;
}
p.3{
font-size:1.1875rem;
line-height:1.78947;
letter-spacing:.4em;
}
p.center{
text-align:center;
font-size:1.1875rem;
line-height:1.78947;
letter-spacing:.4em;
text-indent:.4em;
}
full-width : ウィンドウ幅のブロックを作る
通常、ウェブサイトを作る際には両脇に余白を取ります。その余白を持ったブロック内でもウィンドウ幅のブロックを作りたい、という場合に使います。
なお、どうしてもスクロールバーの関係上左右にスクロール可能になってしまいますので、祖先要素のほうで overflow:hidden; を適用して対応してください。
引数はありませんが、親要素では overflow:hidden; などを設定していると当然表示されませんので、そのへんは別途対応しておきましょう。
mixin定義
@mixin full-width(){
margin-left: calc((100vw - 100%) / -2);
margin-right: calc((100vw - 100%) / -2);
max-width: auto; // IE対策
max-width: initial;
}
呼び出し方
html,body{ /* 左右にスクロールが発生しないよう措置 */
width: 100%;
overflow-x: hidden;
}
.wrapper{
width: 720px;
margin-left: auto;
margin-right: auto;
p.full{
@include full-width();
}
}
生成されるCSS
html,body{
width: 100%;
overflow-x: hidden;
}
.wrapper{
width:720px;
margin-left:auto;
margin-right:auto;
}
.wrapper p.full{
margin-left:calc((100vw - 100%) / -2);
margin-right:calc((100vw - 100%) / -2);
max-width:auto;
max-width:initial;
}
no-js : JavaScriptが無効な場合のCSSを記述
JavaScriptが使える場合html要素に jsクラス、使えない場合はhtml要素に no-jsクラスが付与されるような仕組みがあります。（例: Modernizr など）
そういった場合、Sassの書き方が面倒になってしまうので、mixinで対応するとラクです。
ただし @at-root を使っており、Sassのバージョンが3.3以降でないと使えません。
※ DreamWeaver CC の最新版では動作しました。
mixin定義
@mixin no-js(){
@at-root html.no-js &{
@content;
}
}
呼び出し方
p{
@include no-js(){
display: none;
}
}
生成されるCSS
html.no-js p{
display:none;
}
js : JavaScriptが有効な場合のCSSを記述
JavaScriptが有効だった場合の記述方法です。no-js をちょっとだけ書き換えただけです。
同じく @at-root を使っており、Sassのバージョンが3.3以降でないと使えません。
mixin定義
@mixin js(){
@at-root html.js &{
@content;
}
}
呼び出し方
p{
@include js(){
display: block;
}
}
生成されるCSS
html.js p{
display:block;
}
inline-image : 【Compass】画像をData URI として組み込む
mixinではないのですが、ついでに。Compassを有効にしているときのみ利用できる記述方法です。
画像をBase64エンコードされた状態に変換してくれます。
例えば通常だと
background-image: url(‘../images/aaa.png’);
のように記述する箇所で、
background-image: inline-image(‘../images/aaa.png’);
と記述しておくと、
background-image: url(‘data:image/png:base64,iVBORw0KGgoAAAA………….’);
のように変換したデータを生成してくれます。
呼び出し方
p{
background-image: inline-image('../images/aaa.png');
}
生成されるCSS
p{
background-image: url('data:image/png:base64,iVBORw0KGgoAAAA.............');
}
CSSスプライト機能を簡単に
こちらも mixin ではありませんが、CSSスプライトが簡単に使える機能が Compass には用意されています。
※CSSスプライト
小さなアイコン画像等を結合して大きな画像を生成し、実利用時にはそれらを部分表示させる技。
小さい画像を多数利用するよりも高速になるが、
結合画像を生成したり、CSSで細かく座標指定したりする必要があるので、手動でやる場合はかなり面倒。
詳しく書くのは面倒なので、Compassで簡単、CSSスプライト作成 – CSSスプライト作成の基礎 | CodeGrid あたりを参照。
参考サイト:
・(翻訳) Sassの@contentのユースケース
・CSSをスマートに！今日からSassで使える便利なmixin11選｜ferret [フェレット]
・CompassでデータURI スキーム – to-R
TEXT by
松本 博之（まつもとひろゆき）
1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。
WordPressの実績多数。表面的な使用方法を把握するだけでなく、WordPressのソースコードを読み解いて対応できます。
国家資格の応用情報処理技術者をなんとなくとりました。
