Web Design Leaves

.foo {
  /* カスタムプロパティ名はハイフン2つで始める */
  --my-bg-color: yellow;  
}   

.foo {
  --my-bg-color: yellow;
  /* var() にカスタムプロパティ名を指定して呼び出し */
  background-color: var(--my-bg-color);
}

.foo {
  --my-bg-color: yellow;
  background-color: var(--my-bg-color);
}

.bar {
  /* この場合、以下は適用されない */
  color: var(--my-bg-color);
}

:root {
  --main-bg-color: #efefef;
  --main-text-color: #999;
}
  
.foo {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  width: 100px;
  height: 50px;
}
  
.bar {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  width: 200px;
  height: 100px;
}

:root{
  /* グローバルな値を定義 */
  --primary-color: green;
}

body {
  color: var(--primary-color);
}

.foo {
  /* ブロックのスコープ内で再定義（上書き） */
  --primary-color: blue;
  color: var(--primary-color);
}

.bar {
  /* ブロックのスコープ内で再定義（上書き） */
  --primary-color: red;
  color: var(--primary-color);
}

:root {
  --start-color: #C7F9D8;
  --end-color: #9FB0F2;
  --bg-gradient: linear-gradient(var(--start-color), var(--end-color));
}
.foo {
  background: var(--bg-gradient);
  width: 100px;
  height: 100px;
}

<div class="foo"></div>

<div class="bar">
  <p>abcdefg</p>
  <div class="one">
    <p>abcdefg</p>
  </div>
  <div class="two">
    <p>abcdefg</p>
  </div>
  <div class="three">
    <p>abcdefg</p>
  </div>
</div>

:root {
  --main-color: blue;
}
.bar p {
  color: var(--main-color);
}
.one {
  --main-color: red;
}
.two {
  --main-color: green;
}

:root {
  --my-bg: #EEE;
}
@media (max-width: 580px) {
  :root {
    --my-bg: green;
  }
}
.buz {
  background: var(--my-bg);
  height: 50px;
  border: 1px solid #CCC;
  line-height: 50px;
}

.foo {
  color: var(--my-var, green); 
}

.foox {
  color: var(--my-var, var(--my-var2)); 
  
  /* 以下は NG。CSS 変数を指定する場合、var() 関数を使用する必要があります。 */
  color: var(--my-var, --my-var2); /* ※--my-var2 は適用されない */
}

.foo {
  color: var(--my-var, var(--my-var2, red)); 
}

:root {
 --start-color: #C7F9D8;
 --end-color: #9FB0F2;
 --bg-gradient: linear-gradient(var(--start-color), var(--end-color));
}
#foo {
  background: var(--bg-gradient);
  width: 100px;
  height: 100px;
  margin: 20px 0;
}

// #foo の計算済みスタイルを取得 
const fooStyle = window.getComputedStyle(document.getElementById("foo"));

// CSS 変数 --bg-gradient の値の取得 
const fooVal = fooStyle.getPropertyValue('--bg-gradient'); 

console.log(fooVal); //出力：linear-gradient( #C7F9D8,  #9FB0F2)

document.getElementById("foo").style.setProperty('--bg-gradient', 'linear-gradient( #CCCCCC,  #333333)'); 

<div class="color-wrapper">
  <div class="color1"></div>
  <div class="color2"></div>
  <div class="color3"></div>
  <div class="color4"></div>
  <div class="color5"></div>
  <div class="color6"></div>
</div>
<div class="color-wrapper">
  <div class="comp1"></div>
  <div class="comp2"></div>
  <div class="comp3"></div>
  <div class="comp4"></div>
  <div class="comp5"></div>
  <div class="comp6"></div>
</div>

<div class="sample_wrapper">
  <div class="over_layer"></div><!-- 上のレイヤー  -->
  <p class="under_layer"><a href="#">Click</a></p><!-- 下のレイヤー  -->
</div>

.sample_wrapper {
  position: relative; 
  width: 100px; 
  height: 50px;
}  
.over_layer {
  background-color:rgba(0,0,0,0.1); 
  position: absolute; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 10; /* z-index を指定して前面に */
}
.under_layer {
  position: absolute; 
  top: 50%; 
  left:50%; 
  transform:translate(-50%, -50%);
}

.over_layer {
  background-color:rgba(0,0,0,0.1); 
  position: absolute; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 10;
  pointer-events: none; /* ポインターイベントの対象としない */
}

<button class="btn-pe">ボタン</button>

.btn-pe {
  pointer-events: none;
  border: 1px solid #ccc;
  background-color: #CADFFA;
  border-radius: 4px;
  padding: 5px 10px;
  
}
.btn-pe::after {
  content: ' +';
  color: #F5060A;
  pointer-events: auto;
}