色の操作:

Nodeの指定プロパティのrgbaのアルファ値を設定

Nodeの指定したプロパティに設定されている色を取得し、その内のアルファ値のみを上書き設定する。
元の色は、HEX値、rgb値、rgba値のどれでも良い。

Node
Nodeを指定 id値を文字列で指定してもよい
String
プロパティ名を指定 CSSで色が設定できるプロパティ名
  • color
  • backgroundColor
  • borderColor
  • borderTopColor
  • borderRightColor
  • borderBottomColor
  • borderLeftColor
Number
透明度を指定 0.0–1.0
●必須引数 ●オプション引数(省略可能)

記述例

$clrSetRGBAAlpha($id('id', 'color', 0.5)
$clrSetRGBAAlpha('id', 'color', 0.5)

動作サンプル

colorのアルファ値を20%にする
background-colorのアルファ値を20%にする
border-colorのアルファ値を20%にする
border-top-colorの
アルファ値を100%にする
border-right-colorの
アルファ値を100%にする
border-bottom-colorの
アルファ値を100%にする
border-left-colorの
アルファ値を100%にする
Sass : #sample1 { color: #000; } #sample2 { background-color: #c6dbde; } #sample3 { border: 8px solid #31b1bc; } #sample4 { & > div { border: 8px solid rgba(#31b1bc,0.2); } }
Javascript : $clrSetRGBAAlpha('sample1','color',0.2); $clrSetRGBAAlpha('sample2','backgroundColor',0.2); $clrSetRGBAAlpha('sample3','borderColor',0.2); $clrSetRGBAAlpha('sample4top','borderTopColor',1.0); $clrSetRGBAAlpha('sample4right','borderRightColor',1.0); $clrSetRGBAAlpha('sample4bottom','borderBottomColor',1.0); $clrSetRGBAAlpha('sample4left','borderLeftColor',1.0);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。