variables

/v'ɛriəbəlz/

CSS Custom Properties for Cascading Variables

• CSS Custom Properties
• CSS Variables

spec: https://www.w3.org/TR/css-variables-1/

CSS Custom Properties for Cascading Variables

This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.

Syntax

.boo {
  --color-red: #c00;
  color: var(--color-red, #f00);
}

.heart {
  --color-red: #f00;
  --color-blue: #00f;
  --color-♥: var(--color-red, #900);
  color: var(--color-♥);
}

常見使用情境

• 顏色
• 尺寸
• 文字
• media query

:root {
  --base-font-size: 14px;
}

.h2 {
  font-size: var(--base-font-size);
}

@media (min-width: 600px) {
  :root {
    --base-font-size: 16px;
  }
}

:root {
  --base-font-size: 14px;
}

.h1 {
  font-size: calc(var(--base-font-size) * 1.5);
}

.h2 {
  font-size: var(--base-font-size);
}

@media (min-width: 600px) {
  :root {
    --base-font-size: 16px;
  }
}

cascade with font-size

.ooo {
  width: 5em;
  height: 5em;
  font-size: 20px;
  
  &.big {
    font-size: 50px;
  }
  
  .o {
    width: 1em;
    height: 1em;
    transform: translateX(2.5em);
  }
}

瀏覽器支援

• Global: 78.11%
• Taiwan: 84.6% _{(5% IE 11)}

瀏覽器支援

• Firefox v31 _{( 2014 / 06 )}
• Chrome v49 _{( 2016 / 05 )}
• Safari v9.1 _{( 2016 / 05 )}
• iOS v9.3 _{( 2016 / 05 )}
• Android WebView _gg
• IE _gg
• Edge v15 _{( 2017 / 04 )}、v16_{( 2017 / 10 )}

Fallback with CSS:

@supports ((--a: 1)) {
  :root {
    --color-red: #f00;
  }
}

Fallback with JS:

if (window.CSS &&
    window.CSS.supports &&
    window.CSS.supports('--a', 0)) {
  _html.classList.remove('no-css-variables');
}

變數握手

變數握手

1. set

// inline-style
element.style.setProperty('--a', 2);

2. get

// inline-style
element.style.getPropertyValue('--a');

// any case
window.getComputedStyle(element).getPropertyValue('--a');

• CSS variables 擅長：
  （X）與 JS 溝通
  （O）在 CSS 裡處理相依

Demo 1: parallax layers @ CodePen

.l {
  transform:
    translate(-50%, -50%)
    translate(
      calc((var(--dx) - .5) * var(--df) * 200%),
      calc((var(--dy) - .5) * var(--df) * 200%)
    );
}

.box { --dx: 1; --dy: .7; --df: 0; } /* default */

const setDxDy = (evt) => {
  let dx = evt.layerX / boxWidth;
  let dy = evt.layerY / boxHeight;
  box.style.setProperty('--dx', dx);
  box.style.setProperty('--dy', dy);
};

CSS condition

// [--x, --y] = [0, 0]
// [--x, --y] = [1, 1]
transform:
  translate(
    calc(0% - 100% * var(--x)),
    calc(0% - 100% * var(--y))
  );

變形：

CSS Variables 真的是 Variables 嗎？

// JS
i = i + 1;

/* expected syntax for real CSS variables */
.l + .l {
  --df: calc(.2 + var(--df));
}

Demo 2: re-order @ CodePen

CSS order solution

source: https://www.w3.org/TR/css-flexbox-1/#propdef-order

// init
tiles.forEach((tile, index) => {
  well.style.setProperty(`--order-${index}`, index * BASE_NUMBER);
  tile.style.order = `var(--order-${index})`;
});

// in key events
targetIndex = (targetIndex + operator + 9) % 9;
let dir = originIndex > targetIndex ? -1 : 1;
well.style.setProperty(
  `--order-${originIndex}`,
  (targetIndex + .5 * dir) * BASE_NUMBER
);

Reference:

• CSS Custom Properties for Cascading Variables Module Level 1
• CSS Variables: Why Should You Care?
  • CSS Custom Properties (CSS Variables) Sample
• Using CSS custom properties (variables) - CSS | MDN
• It’s Time To Start Using CSS Custom Properties
• CSS Variables — No, really! 👍

• Google: CSS variables
• Twitter: CSS variables

工商

• https://fb.me/rplus.tw
• https://twitter.com/RplusTW
• https://codepen.io/Rplus/
• https://www.facebook.com/HappyCSSer/

• https://www.facebook.com/groups/f2e.tw/
• https://gitter.im/f2etw/developers
• https://www.facebook.com/groups/F2ETW.share.HQ/