请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2023-5-16 22:00 编辑
@use 属性及其应用
有时候我们需要设置多组 css-doodle 方案，以便在交互时使用。这时，我们可以把 css-doodle 的预设样式以 CSS变量 的形式写在 <style>...</style> 标签中。一般地，我们需要借助伪类 :root {} 来封装 css-doodle 样式代码，:root 实际上匹配文档的根目录（html），是 html {} 选择器的替身，拥有极高的优先权。不过，css-doodle 的层叠样式代码也可以写在 body 或某一个父元素之下（如有）。以下 css-doodle 层叠样式代码写在 :root 伪类之下：
<style>
:root {
--style1: (
:doodle { @grid: 5 / 500px; gap: 1px; }
background: gray;
);
--style2:(
:doodle { @grid: 6 / 500px; gap: 1px; }
@odd { background: tan; }
@even { background: pink; }
);
}
</style>
<css-doodle id="doo">
@use: var(--style1);
</css-doodle>
<script>
let styles = ['style1','style2'], idx = 0;
doo.onclick = () => {
idx += idx === 0 ? 1 : -1;
doo.use = `var(--${styles[idx]})`;
}
</script>
我们在 :root 伪类里设置了两组基于 css-doodle 的样式表，以 CSS变量 --style1 和 --style2 的方式存储标准的 css-doodle 代码，留待后面的 <css-doodle>...</css-doodle> 标签使用。上述代码中，css-doodle 通过 @use 属性调用了两个样式中的一个，然后再通过 JS 的 css-doodle 窗体单击事件在两个样式中来回切换，大家可以运行代码后点击看看。
css-doodle 支持多个 @use 属性共存。当同一个 css-doodle 存在多个 @use 属性，@use 所引用的样式可以用逗号隔开：
<css-doodle>
@use: var(--style1), var(--style2);
</css-doole>
也可以分行写 @use 属性，行尾用分号 ; 结束：
<css-doodle>
@use: var(--style1);
@use: var(--style2);
</css-doole>
需要注意的是，如果两个样式中有相同的属性，则后面的属性会覆盖前面的属性。
| 
发表于 2023-5-16 21:24
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-5-16 21:40
楼主
发表于 2023-5-16 22:07
发表于 2023-5-16 22:47