裏紙に書く程度の内容

lessでmedia query設定を簡単にする

less の mixin を使用してmedia query の設定をしやすくする方法です。

※mobileファーストで作成。

各閾値の設定

各閾値は変数で設定します。

ここではbootstrapを参考に、

  • Extra small (~768px)
  • Small (768px~)
  • Medium (992px~)
  • Large (1200px~)

にします。それぞれスマホ用、タブレット用、PC用、大画面用といった感じです。

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

こんな感じ。

mixin作成

定義した変数を使って各mixinを定義します。

.screen-sm(@rules) {
    @media (min-width: @screen-sm-min) { @rules(); }
}
.screen-md(@rules) {
    @media (min-width: @screen-md-min) { @rules(); }
}
.screen-lg(@rules) {
    @media (min-width: @screen-lg-min) { @rules(); }
}

モバイルファーストで作成するので各min-widthで任意のスタイルを適用できればOK.

使用方法

作成したmixinを使ってみます。

.example {

    // デフォルト(スマホ)
    padding: 1rem;
    background-color: #555;
    display: block;

    // 画面小(タブレット)
    .screen-sm({
        display: inline-block;
        width: 50%;
    });

    // 画面中(PC)
    .screen-md({
        display: inline-block;
        width: 300px;
    });

    // 画面大(1200px~)
    .screen-lg({
        display: inline-block;
        width: 500px;
    });
}

最初にスマホ用のデフォルトスタイルを定義し、sm,md,lgの順にスタイルを定義していきます。 呼び出すmixinは必要なもののみで構いませんが、小さい順にしておく必要があります。

出力されるcssは以下のようになります。

.example {
  padding: 1rem;
  background-color: #555;
  display: block;
}
@media (min-width: 768px) {
  .example {
    display: inline-block;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .example {
    display: inline-block;
    width: 300px;
  }
}
@media (min-width: 1200px) {
  .example {
    display: inline-block;
    width: 500px;
  }
}

※padding,background-colorは確認用につけただけです

参考

http://simbo.github.io/2014/03/less-media-query-mixins.html

URABLO
広告
Index
広告