More than 1 year has passed since last update.

SCSS使ってレスポンシブを学んだ with Laravel

Posted at 2023-04-22

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/Layouts/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>

参考

https://macoblog.com/sass_media_query/

https://tenderfeel.github.io/SassReference/basic/#:~:text=ファイル名先頭にアンダー,ファイルは１つだけ。

備忘録ブログに続き書いてます

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up