css-doodle入门（八）
本帖最后由 马黑黑 于 2023-5-16 22:00 编辑 <br /><br /><style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p><strong>@use 属性及其应用</strong></p>
<p>有时候我们需要设置多组 css-doodle 方案，以便在交互时使用。这时，我们可以把 css-doodle 的预设样式以 CSS变量 的形式写在 <style>...</style> 标签中。一般地，我们需要借助伪类 :root {} 来封装 css-doodle 样式代码，:root 实际上匹配文档的根目录（html），是 html {} 选择器的替身，拥有极高的优先权。不过，css-doodle 的层叠样式代码也可以写在 body 或某一个父元素之下（如有）。以下 css-doodle 层叠样式代码写在 :root 伪类之下：</p>
<div class="mama">
<pre class="hCode"><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})`;
}
</script></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>我们在 :root 伪类里设置了两组基于 css-doodle 的样式表，以 CSS变量 --style1 和 --style2 的方式存储标准的 css-doodle 代码，留待后面的 <css-doodle>...</css-doodle> 标签使用。上述代码中，css-doodle 通过 @use 属性调用了两个样式中的一个，然后再通过 JS 的 css-doodle 窗体单击事件在两个样式中来回切换，大家可以运行代码后点击看看。</p>
<p>css-doodle 支持多个 @use 属性共存。当同一个 css-doodle 存在多个 @use 属性，@use 所引用的样式可以用逗号隔开：</p>
<div class="mama">
<pre class="hCode"><css-doodle>
@use: var(--style1), var(--style2);
</css-doole></pre>
<pre class="hLineNum"></pre>
</div>
<p class="hidden"><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage hidden"></div>
<p>也可以分行写 @use 属性，行尾用分号 ; 结束：</p>
<div class="mama">
<pre class="hCode"><css-doodle>
@use: var(--style1);
@use: var(--style2);
</css-doole></pre>
<pre class="hLineNum"></pre>
</div>
<p class="hidden"><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage hidden"></div>
<p>需要注意的是，如果两个样式中有相同的属性，则后面的属性会覆盖前面的属性。</p>
</div>
<script>
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(let i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 20}px`;
if(!btns) return;
btns.onclick = () => {
let val = btns.value;
val === '运行代码' ? codeRun(hCodes.innerText, stages) : codeRun('',stages);
btns.value = btns.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
};
});
let codeRun = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
</script> css-doodle学习难度不小 起个网名好难 发表于 2023-5-16 21:40
css-doodle学习难度不小
这个@use还好吧？目的其实也仅是能把样式写在 style 标签里 似懂非懂，跟着教程慢慢学！ 亦是金 发表于 2023-5-16 21:48
似懂非懂，跟着教程慢慢学！
晚上好 马黑黑 发表于 2023-5-16 21:43
这个@use还好吧？目的其实也仅是能把样式写在 style 标签里
不是指具体的而是整体来说，相当于把css混在html 标签里，难度较单一的css或 html 不是同一等级。 起个网名好难 发表于 2023-5-16 22:06
不是指具体的而是整体来说，相当于把css混在html 标签里，难度较单一的css或 html 不是同一等级。
倘若CSS和html基础好，这一切都不在话下吧。你在看其他的框架，都把HTML弄的面目全非了，所以很多人还是很怀念jQuery，希望它不倒下 醉美水芙蓉 发表于 2023-5-16 22:07
黑黑老师做贴辛苦了！给老师点赞！
晚上好 在这个例子里，当把两个属性都写上去，显示的是style2的样子吧。 红影 发表于 2023-5-16 22:10
在这个例子里，当把两个属性都写上去，显示的是style2的样子吧。
放在后面的，会覆盖前面的。例如：
<css-doodle>
@use: var(--style2), var(--style1);
</css-doole>
则，如果 --style1 和 --style2 有相同的属性设置，--style1 的设置会覆盖 --style2 的设置。 马黑黑 发表于 2023-5-16 22:07
倘若CSS和html基础好，这一切都不在话下吧。你在看其他的框架，都把HTML弄的面目全非了，所以很多人还是 ...
好吧，习惯了css、html、 script 三段 ，这混在一起算是“搞脑子”吧。 起个网名好难 发表于 2023-5-16 22:15
好吧，习惯了css、html、 script 三段 ，这混在一起算是“搞脑子”吧。
不过挺管用 马黑黑 发表于 2023-5-16 22:26
不过挺管用
好用的“非标件” 起个网名好难 发表于 2023-5-16 22:37
好用的“非标件”
现在很火的非标件应用场景很宽广，很多开发都通它们 马黑黑 发表于 2023-5-16 22:38
现在很火的非标件应用场景很宽广，很多开发都通它们
这个是要承认，但对初学者就是“奢侈品” 新课程带来新属性 起个网名好难 发表于 2023-5-16 22:45
这个是要承认，但对初学者就是“奢侈品”
初学者先打好基础很重要。当然，需要快速做一样东西，从一个框架做起也未尝不可 南无月 发表于 2023-5-16 22:47
新课程带来新属性
这个不是很难 马黑黑 发表于 2023-5-16 22:50
初学者先打好基础很重要。当然，需要快速做一样东西，从一个框架做起也未尝不可
基础不包括“非标件”