Laravelの中でSCSS使ってレスポンシブを学んだ

Laravelのbladeファイルの中でSCSSを使ってレスポンシブ対応の本的な部分を学習したので、メモ残します。

今回はシンプルに、スマホで見た時、背景色を緑にするというだけのものです。

結論
思ったこと
参考

結論

_mixin.scssにレスポンシブになるサイズを定義
自分の場合は以下のパスに作成
src/public/css/foundation/_mixin.scss
- foundationディレクトリでなくも大丈夫です。
- _mixin.scssの名前は何でもいいです

_mixin.scss

$sp: 449px;  // スマホサイズを定義

@mixin sp{
		// 横幅が499px以下になるとスマホサイズに
    @media (max-width: ($sp)){
        @content;
    }
}

scssファイルで_mixin.scssをimportする

src/public/css/style.scss

@import "foundation/_mixin"; //スマホサイズ定義をインポート

.top_title{
    // スマホサイズの時に適用するスタイル
    @include sp{
        background-color: green;
    }
}

html（blade.php）ファイル

src/resources/views/app.blade.php

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>play ground</title>   
    <link rel="stylesheet" href="/css/style.css" >
</head>
<body>
    <header>
        <div class="top_title">
            <h1>レスポンシブ</h1>
        </div>
    </header>
</body>
</html>

これでレスポンシブに対応させることができます。

上記の例でいうと、横幅が499px以下になるとスマホサイズとみなしています。今回はh1要素の「レスポンシブ」という文字の背景色を緑にしています。