質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

メディアクエリ用のミックスイン

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 479

cnweb

score 12

http://www.culture27.com/blog/2012/10/sass-mediaquery
↑こちらの記事で紹介している、要素ごと、メディアごとにスタイルを記述でき、
かつ吐き出される@mediaの記述がルールごとひとつにまとめられるという
メディアクエリ用のミックスインを試してみましたが、吐き出されたcssには何も表示されていません。

sassを触り始めたばかりで、mixinの内容を全て理解できておらず
@ifが正常に動いていないように思うのですが原因がわかりません。
よろしくお願いいたします。

要素ごとに各デバイス用のスタイルを設定した際に、
最終的に吐き出されたメディアクエリの記述が一箇所にまとめられればこちらの方法でなくても良いです。
※ただgulp等のプラグインで実現する方法は避けたいです。

検証中のscssディレクトリ

_mixin.scss(メディアクエリ用の変数とミックスインを記述)
_base.scss
_mq.scss(ここでミックスインを呼び出し)
style.scss

使用ツール:Brackets 1.13 (プラグイン:Brackets SASS)

_mixin.scssの中身

// # Media Queries
//
// ## Breakpoints (Window Size)
//
// 0-480   : [Smartphone]
//           iPhone3/4/5(Portrait), iPhone3/4(Landscape)
//           Most Android Phone(Portrait)
// 481-800 : [Tablet, Smartphone(Landscape)]
//           iPhone5(Landscape), iPad(Portrait)
//           Most Android Phone(Landscape)
//           Newer Android Tablet(Portrait)
// 801+    : Default, iPad(Landscape), Newer Android Tablet(Landscape)
//  OR 801-1024
// 1025+   : Large Window Size, Newer Android Tablet(Landscape)

// ## Variables
$mq-all    : null !default;
$mq-sp     : null !default;
$mq-tablet : null !default;
$mq-default: null !default;
$mq-large  : null !default;

$default-mq-sp-max-width     : 480px !default;
$default-mq-tablet-min-width : $default-mq-sp-max-width + 1 !default;
$default-mq-tablet-max-width : 800px !default;
$default-mq-default-min-width: $default-mq-tablet-max-width + 1 !default;
$default-mq-large-min-width  : 1025px !default;
$default-mq-default-max-width: null !default;
// $default-mq-default-max-width: $default-mq-large-min-width - 1 !default;

// ## Wrapper
@mixin mq {
    @include mq-all     { @content; }
    // @include mq-large   { @content; }
    @include mq-default { @content; }
    @include mq-tablet  { @content; }
    @include mq-sp      { @content; }
}

// ## For All
@mixin mq-all {
    $_tmp: $mq-all;
    $mq-all: true;
    @content;
    $mq-all: $_tmp;
}

// ## For Smartphones
@mixin mq-sp(
    $max: $default-mq-sp-max-width
) {
    $_tmp: $mq-sp;
    $mq-sp: true;
    @media only screen and (max-width:#{$max}) {
        @content;
    }
    $mq-sp: $_tmp;
}

// ## For Tablets
@mixin mq-tablet(
    $min: $default-mq-tablet-min-width,
    $max: $default-mq-tablet-max-width
) {
    $_tmp: $mq-tablet;
    $mq-tablet: true;
    @media only screen and (min-width:#{$min}) and (max-width:#{$max}) {
        @content;
    }
    $mq-tablet: $_tmp;
}

// ## For PC (default)
@mixin mq-default(
    $min: $default-mq-default-min-width,
    $max: $default-mq-default-max-width
) {
    $_tmp: $mq-default;
    $mq-default: true;
    $_breakpoint: "(min-width:#{$min}) ";
    @if not($max == null) {
        $_breakpoint: $_breakpoint + "and (max-width:#{$max}) ";
    }
    @media only screen and #{$_breakpoint}{
        @content;
    }
    $mq-default: $_tmp;
}

// ## For Large Window
@mixin mq-large(
    $min: $default-mq-large-min-width
) {
    $_tmp: $mq-large;
    $mq-large: true;
    @media only screen and (min-width:#{$min}) {
        @content;
    }
    $mq-large: $_tmp;
}

_mq.scssのサンプルコード

@include mq {
    h1 {
        @if $mq-all { // 全てに適用
            width: 100%;
        }
        @if $mq-default { // 主にPC用
            color: red;
        }
        @if $mq-tablet { // タブレット用
            color: blue;
        }
        @if $mq-sp { // スマートフォン用
            color: green;
        }
    }
    p {
        @if $mq-all {
            line-height: 1.4;
        }
        @if $mq-default {
            margin: 1em 0;
        }
        @if $mq-tablet {
            margin: 0.8em 0;
        }
        @if $mq-sp {
            margin: 0.6em 0;
        }
    }
}

吐き出される予定だったコード

h1 { width: 100%; }
p { line-height: 1.4; }

@media only screen and (min-width: 801px) {
  h1 { color: red; }
  p { margin: 1em 0; } }

@media only screen and (min-width: 481px) and (max-width: 800px) { 
  h1 { color: blue;}
  p { margin: 0.8em 0; } }

@media only screen and (max-width: 480px) { 
  h1 { color: green; }
  p { margin: 0.6em 0; } }

試したこと

試しに_mq.scssのh1{}直下にmarginを以下のように記述すると

@include mq {
    h1 {
margin:0;←このコードを追加!!!

        @if $mq-all { // 全てに適用
            width: 100%;
        }
        @if $mq-default { // 主にPC用
            color: red;
        }
        @if $mq-tablet { // タブレット用
            color: blue;
        }
        @if $mq-sp { // スマートフォン用
            color: green;
        }
    }
    p {
        @if $mq-all {
            line-height: 1.4;
        }
        @if $mq-default {
            margin: 1em 0;
        }
        @if $mq-tablet {
            margin: 0.8em 0;
        }
        @if $mq-sp {
            margin: 0.6em 0;
        }
    }
}

このように吐き出されました。

h1 { margin: 0; }

@media only screen and (min-width: 801px) { h1 { margin: 0; } }
@media only screen and (min-width: 481px) and (max-width: 800px) { h1 { margin: 0; } }
@media only screen and (max-width: 480px) { h1 { margin: 0; } }

また@include mq {の直下に以下のコードを追加した場合は、

@include mq {

$mq-all    : "";
$mq-sp     : "";
$mq-tablet : "";
$mq-default: "";
$mq-large  : "";


このようになりました。

h1 { width: 100%; color: red; color: blue; color: green; }
p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; }

@media only screen and (min-width: 801px) {
  h1 { width: 100%; color: red; color: blue; color: green; }
  p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; } }
@media only screen and (min-width: 481px) and (max-width: 800px) { 
  h1 { width: 100%; color: red; color: blue; color: green; }
  p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; } }
@media only screen and (max-width: 480px) { 
  h1 { width: 100%; color: red; color: blue; color: green; }
  p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; } }

原因がわかりません。何卒、よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • m.ts10806

    2019/06/19 18:22

    >使用ツール:Bracket
    タグにある通り「Brackets」です。
    またツールとしては割とアップデートの頻度は高いので、ご使用のバージョンを追記してください。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る