如何将 CSS Mixins 与原生 Javascript 应用?
How can I apply CSS Mixins with native Javascript?
如果我的浏览器具有来自 CSS 属性的本机实现,那么我应该有某种 Javascript API 来像我可以使用 CSS 那样操作混入变量:
document.body.style.setProperty('--some-property', 'value');
我用谷歌搜索了它,但遗憾的是,大多数情况下我遇到了一个 css 框架,该框架有一些技巧可以使 css 与 javascript 混合,遗憾的是我没有找到API 文档,有人知道怎么做吗?
HTMLElement.style is a CSSStyleDeclaration 有一个 API,但在那里我只能找到 setProperty 方法,但找不到 setMixin 方法。
进度:
如果我将 @apply --some-mixin;
添加到样式属性,则不会应用混合。现在我想我应该尝试制作自定义内联 css 并添加到文档中,但这仍然是一些 hacky 方法,而且它不起作用。
这里有一些用于测试的代码片段,但请注意,您需要在浏览器中激活体验式 Web 平台功能才能看到 mixin 正常工作!
let container = document.getElementById('container');
for(var i = 1; i<=5; i++)
{
let itemElement = document.createElement('DIV');
itemElement.classList.add('item');
itemElement.innerText = `Some added item#${i}!`;
itemElement.style.color = `var(--item-${i}-color, blue)`;
let style = itemElement.getAttribute('style');
itemElement.setAttribute('style', `${style} @apply --item-${i};`);
container.appendChild( itemElement );
}
if( true /* some sort of logic which are not important */ )
{
container.style.setProperty('--item-2-color', 'green');
// @todo add custom mixin to item#4 to be highlighted someway, and use Javascript API without this type of hacks:
let style = container.getAttribute('style');
container.setAttribute('style', `${style} --item-4: { margin: 10px 0; background-color: orange; color: yellow; };`);
}
:root {
/* static css mixin */
--paper-shadow: {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
};
}
body, #container {
background: #eee; font-family: Arial, sans-serif;
}
h2 {
text-align: center;
}
#container {
padding: 30px;
--item-3-color: red;
/* initial css mixin from dinamic mixin */
--item-3: {
font-weight: bold;
};
}
#container .item {
background: #fff; padding: 20px 10px;
font-size: 90%; text-align: center; letter-spacing: 1px;
@apply --paper-shadow;
}
<h2>You need to activate #experimental-web-platform-features in your browser to see the mixin working!</h2>
<div id="container"></div>
我找到了一个可行的 hacky 解决方案,但不是我想要的确切 API 类型的解决方案,但是对于那些想快速解决问题的人来说,可以获取样式属性并将 mixin directley 添加到元素:
let element = document.querySelector('some-element');
/* IMPORTANT!
* do something with element.style and/or add css-property
* before you change the style attribute!
*/
// get the current custom styles
let style = element.getAttribute('style');
// apply css mixin to the element:
element.setAttribute('style', `${style} @apply --some-mixin;`);
// set css mixin to the element:
element.setAttribute('style', `${style} --some-mixin: { /*...*/ };`);
如果我的浏览器具有来自 CSS 属性的本机实现,那么我应该有某种 Javascript API 来像我可以使用 CSS 那样操作混入变量:
document.body.style.setProperty('--some-property', 'value');
我用谷歌搜索了它,但遗憾的是,大多数情况下我遇到了一个 css 框架,该框架有一些技巧可以使 css 与 javascript 混合,遗憾的是我没有找到API 文档,有人知道怎么做吗?
HTMLElement.style is a CSSStyleDeclaration 有一个 API,但在那里我只能找到 setProperty 方法,但找不到 setMixin 方法。
进度:
如果我将 @apply --some-mixin;
添加到样式属性,则不会应用混合。现在我想我应该尝试制作自定义内联 css 并添加到文档中,但这仍然是一些 hacky 方法,而且它不起作用。
这里有一些用于测试的代码片段,但请注意,您需要在浏览器中激活体验式 Web 平台功能才能看到 mixin 正常工作!
let container = document.getElementById('container');
for(var i = 1; i<=5; i++)
{
let itemElement = document.createElement('DIV');
itemElement.classList.add('item');
itemElement.innerText = `Some added item#${i}!`;
itemElement.style.color = `var(--item-${i}-color, blue)`;
let style = itemElement.getAttribute('style');
itemElement.setAttribute('style', `${style} @apply --item-${i};`);
container.appendChild( itemElement );
}
if( true /* some sort of logic which are not important */ )
{
container.style.setProperty('--item-2-color', 'green');
// @todo add custom mixin to item#4 to be highlighted someway, and use Javascript API without this type of hacks:
let style = container.getAttribute('style');
container.setAttribute('style', `${style} --item-4: { margin: 10px 0; background-color: orange; color: yellow; };`);
}
:root {
/* static css mixin */
--paper-shadow: {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
};
}
body, #container {
background: #eee; font-family: Arial, sans-serif;
}
h2 {
text-align: center;
}
#container {
padding: 30px;
--item-3-color: red;
/* initial css mixin from dinamic mixin */
--item-3: {
font-weight: bold;
};
}
#container .item {
background: #fff; padding: 20px 10px;
font-size: 90%; text-align: center; letter-spacing: 1px;
@apply --paper-shadow;
}
<h2>You need to activate #experimental-web-platform-features in your browser to see the mixin working!</h2>
<div id="container"></div>
我找到了一个可行的 hacky 解决方案,但不是我想要的确切 API 类型的解决方案,但是对于那些想快速解决问题的人来说,可以获取样式属性并将 mixin directley 添加到元素:
let element = document.querySelector('some-element');
/* IMPORTANT!
* do something with element.style and/or add css-property
* before you change the style attribute!
*/
// get the current custom styles
let style = element.getAttribute('style');
// apply css mixin to the element:
element.setAttribute('style', `${style} @apply --some-mixin;`);
// set css mixin to the element:
element.setAttribute('style', `${style} --some-mixin: { /*...*/ };`);