【Rails】 SCSS で Bootstrapライクな opacity-n(透過) を追加する

何をするの？👒

CSSでオブジェクトを透過したいときに、
opacity-85みたいな感じで Bootstrapライクに指定したかったので
SCSSを使って追加しちゃいます

SCSS の記述🌵

SCSSファイルに以下の記述を追加するだけで、
opacity-0 = 0% (透過) から opacity-100 = 100% (非透過) まで全ての透過度を可変で CSSセレクタ としてつかうことができます

opacity.scss

@for $i from 0 through 100 {
  .opacity-#{$i} {opacity: $i * 0.01;}
}

some.erb.html

<div class="opacity-62">
  # 62%の透過になる
</div>

ファイルとして実装する方法(おまけ)

アセットパイプラインで実装する場合 🐩

application.scss ▶ opacity.scss
の順にロードされるように配置する

/app/assets/stylesheets/application.scss

 *= require_tree .
 // もしくは 
 *= require_tree opacity

/app/assets/stylesheets/opacity.scss

@for $i from 0 through 100 {
  .opacity-#{$i} {opacity: $i * 0.01;}
}

webpacker で実装する場合 🐰

application.js ▶ application.scss ▶ opacity.scss
の順にロードされるように配置する
追加位置はいずれも後ろの方でOK

/app/javascript/packs/application.js

import "../stylesheets/application";

/app/javascript/stylesheets/application.scss

@import "opacity";

/app/javascript/stylesheets/opacity.scss

@for $i from 0 through 100 {
  .opacity-#{$i} {opacity: $i * 0.01;}
}

---

CSS も量が多くなったら別ファイルに分けると、見通しが良いですね🐈