[Rails]使用SCSS添加类似Bootstrap的opacity -n(透明度)

你在做什么？ ??

当您想使用CSS使对象透明时，
我想像opacity-85一样将其指定为Bootstrap，所以
我将使用SCSS

添加它

SCSS描述

只需将以下描述添加到

SCSS文件和
所有透明度可以在opacity-0 = 0％(透明)到opacity-100 = 100％(非透明)之间变化，并用作CSSセレクタ

不透明性

1
2
3

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

some.erb.html

1
2
3

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

如何实现为文件(奖金)

application.scss？opacity.scss
安排它们以

的顺序加载

/app/assets/stylesheets/application.scss

1
2
3

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

/app/assets/stylesheets/opacity.scss

1
2
3

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

application.js？application.scss？opacity.scss
安排它们以的顺序加载
后面的所有其他位置都可以

/app/javascript/packs/application.js

1	import "../stylesheets/application";

/app/javascript/stylesheets/application.scss

1	@import "opacity";

/app/javascript/stylesheets/opacity.scss

1
2
3

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

如果CSS数量变大，如果将其分成单独的文件，则前景很好??