【Laravel】ブレードで@yieldと@sectionを使ってCSSを出し分ける方法

Laravelのブレード（ビューファイル）で、@yieldと@sectionを使ってclass属性を指定することができる。

合わせて@parentも併用すると、ブレードによってCSSを出し分けることができる。

@yield, @section, @parentの基本的な使い方はこちら

1. @yieldと@sectionのclass属性への適用

@yieldはクラス属性やhrefなど属性の中でも使うことができる。

base.blade.php

<div class="@yield('contentClass')">
  @yield('content')
</div>

class属性にcntentClass、divの中身にcontentというセクションを代入する。

index.blade.php

@extends(base)
   
@section('contentClass', 'yellow')

@section('content')
 文字色をクラス属性で変更する
@stop

class="yellow"を適用する。

↓ コンパイル

.html

<div class="yellow">
  文字色をクラス属性で変更する
</div>

例えばスタイルは16pxと黄色を適用。

.css

.yellow{
  font-size: 16px;
  color: yellow;
}

## 2. クラス属性の上書き `@parent`を用いずに、同じセクション名を記載すれば上書きされる。

base.blade.php

<div class="@yield('contentClass')">
  @yield('content')
</div>

class属性にcntentClass、divの中身にcontentというセクションを代入する。

index.blade.php

@extends(base)
   
@section('contentClass', 'yellow')

@section('content')
 文字色をクラス属性で変更する
@stop

//上書き
@section('contentClass', 'blue')

contentClassのyellowがblueで上書きされるため、class="blue"となる。

↓ コンパイル

.html

<div class="blue">
  文字色をクラス属性で変更する
</div>

以下のようなcssの場合、背景色 白が適用される。font-sizeや文字色の指定はない状態。

.css

.yellow{
  font-size: 16px;
  color: yellow;
}

.blue{
  background: blue;
}

## 3. クラス属性の追記 `@parent`を使うことでクラス属性を追記することができる。

base.blade.php

<div class="@yield('contentClass')">
  @yield('content')
</div>

class属性にcntentClass、divの中身にcontentというセクションを代入する。

index.blade.php

@extends(base)
   
@section('contentClass', 'yellow')

@section('content')
 文字色をクラス属性で変更する
@stop

//追記
@section('contentClass') @parent blue @stop

contentClassに元々のyellowと追記したblueが適用される。

↓ コンパイル

.html

<div class="yellow blue">
  文字色をクラス属性で変更する
</div>

以下のようなcssの場合、文字色 黄色、フォント16px, 背景 青色が適用される。

.css

.yellow{
  font-size: 16px;
  color: yellow;
}

.blue{
  color: blue;
}

以上。