css 变量
- 又称为 CSS 自定义属性，它的值可以在整个文档中重复使用。
- 设定值 --双根线 --main-color: black;
- 获取值 var() 函数 （color: var(--main-color);）
变量的声明与使用
因为 $ 被 Sass 用掉了，@ 被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。
声明变量的时候，变量名前面要加两根连词线（--）。
body {
// 声明 --font-color: #7F583F;
}.main{
// 使用 color:var(--font-color);
}复制代码css变量命名规则
- 普通字符局限在只要是 数字 [0-9] 字母 [a-zA-Z] 下划线 _ 和 短横线 - 这些组合，可以是 中文 ，日文 或者 韩文
- 不能包含特殊字符： $ , [ ，^， ( ，% 等字符
- 变量名大小写敏感，--header-color和--header-Color是两个不同变量
body {
--深蓝: #336699;background-color: var(--深蓝);
}复制代码变量的定义和使用只能在声明块{}里面， 例如，下面这样是无效的：
--深蓝: #336699;body { background-color: var(--深蓝);
}复制代码var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在(未定义)，就会使用这个默认值。
body { color: var(--foo, #7F583F);
}复制代码第二个参数不处理内部的逗号或空格，都视作参数的一部分。
body {
// "Roboto", "Helvetica" 整体是默认值
var(--font-stack, "Roboto", "Helvetica");
// 10px 15px 20px 整体是默认值
var(--pad, 10px 15px 20px);
}复制代码变量值只能用作属性值，不能用作属性名
.foo { --side: margin-top; /* 无效 */
var(--side): 20px;
}复制代码变量值的类型
如果变量值是一个字符串，可以与其他字符串拼接。
body{ --width: 1px;
--type: solid; --foo: var(--width) var(--type) #000000;
}复制代码
如果变量值是数值，不能与数值单位直接连用。
.foo { --gap: 20; /* 无效 */padding: var(--gap)px; /* 有效 */font-size: calc(var(--size) * 1px);
}复制代码
对于CSS变量，只要语法是正确的，就算变量里面的值是个乱七八糟的东西，也是会作为正常的声明解析， 如果发现变量值是不合法的，例如上面背景色显然不能是20px，则使用背景色的缺省值，也就是默认值代替，
body {--size: #ddd;font-size: 30px; // 无作用 font-size: var(--size); // 继承上级
}复制代码
作用域
- 同一个 CSS 变量，可以在多个选择器内声明。
- 读取的时候，优先级最高的声明生效
- 变量的作用域就是它所在的选择器的有效范围。
优先级别：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
<style> :root { --color: blue; } //根元素 :root 代表全局参数 div { --color: green; } #alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>复制代码JavaScript 操作
- CSS 变量提供了 JavaScript 与 CSS 通信的一种途径
// 设置变量document.body.style.setProperty('--primary', '#7F583F');// 读取变量document.body.style.getPropertyValue('--primary').trim();// '#7F583F'// 删除变量document.body.style.removeProperty('--primary');复制代码- CSS 变量提供了 JavaScript 与 CSS 通信的一种途径在 Vue 中这一点还是体现得挺明显的。
- 在vue2 中
<template> <div class="hello" :style="styleVar"><div class="child-1">I am Child 1</div> //blue 30px <div class="child-2">I am Child 2</div> //red 30px onclick => red 40px<div @click="onClick">ChangeSize</div>
</div></template><script>export default {
data() {return { styleVar: {"--colorBlue": "blue","--colorRed": "red","--fontSize": "30px","--fontSizeTest": "30px",
},
};
}, methods: {onClick() { // 改变data 的属性值 style中 css 获取到的变量更新 this.styleVar["--fontSizeTest"] = "40px";
},
},
};</script><style scoped>.child-1 { color: var(--colorBlue); font-size: var(--fontSize);
}.child-2 { color: var(--colorRed); font-size: var(--fontSizeTest);
}</style>复制代码- 设置伪元素
<div class="box" :style={ --theme-secondary-color:'red' }>I am Child 2</div>
//优点 可以直接设置伪元素 div::after { color: var(--theme-secondary-color);
}复制代码- 在 Vue 3 中做了一些优化
<template> <div class="content">
<div class="text">hello</div>
<div></template><script>export default { data() {return { color: "red",
};
},
};</script><style vars="{ color }">.text { color: var(--color);
}</style>
复制代码在 Vue 3 中，style 标签支持 vars 绑定，该参数接受对象键值对方式注入 CSS 变量，
这些变量会直接绑定到组件的根元素上
<div style="--color:red" class="content" > <div class="text"> hello </div> // color =>red <div>复制代码
- 和 <style scoped> 一起使用
所应用的 CSS 变量将以组件的 Scoped id 作为前缀，访问的时候也会自动加上 Scoped id
<style scoped vars="{ color }">h1 { color: var(--color);
}
</style>复制代码编译之后
h1 { color: var(--6b53742-color);
}复制代码假如 想访问的是全局的 CSS 变量呢？也就是我们不希望加上 Scoped Id，那么要加global：
<style scoped vars="{ color }">h1 { color: var(--color); font-size: var(--global:fontSize);
}
</style>复制代码编译之后
h1 { color: var(--6b53742-color); font-size: var(--fontSize);
}复制代码缺点——浏览器兼容性问题
CSS 变量目前的支持度并非特别好，IE 目前全部都是不支持的
MdEditor的功能列表演示
标题H1标题H2
标题H3
标题H4
标题H5
标题H5
字符效果和横线等
删除线删除线（开启识别HTML标签时）
斜体字 斜体字
粗体 粗体
粗斜体 粗斜体
上标：X2，下标：O2
缩写(同HTML的abbr标签)
即更长的单词或短语的缩写形式，前提是开启识别HTML标签时，已默认开启
TheHTMLspecification is maintained by theW3C.
引用 Blockquotes
引用文本 Blockquotes
引用的行内混合 Blockquotes
引用：如果想要插入空白换行即<br />标签，在插入处先键入两个以上的空格然后回车即可，普通链接。
锚点与链接 Links
普通链接普通链接带标题直接链接：www.mdeditor.com[锚点链接][anchor-id] [anchor-id]: www.mdeditor.com/mailto:test.test@gmail.comGFM a-tail link @pandao 邮箱地址自动链接 test.test@gmail.com www@vip.qq.com
@pandao
多语言代码高亮 Codes
行内代码 Inline code
执行命令：npm install marked
缩进风格
即缩进四个空格，也做为实现类似 <pre> 预格式化文本 ( Preformatted Text ) 的功能。
<?php echo "Hello world!"; ?>复制代码
预格式化文本：
| First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell |复制代码
JS代码
function test() { console.log("Hello world!");
}复制代码HTML 代码 HTML codes
<!DOCTYPE html><html><head><mate charest="utf-8" /><meta name="keywords" content="Editor.md, Markdown, Editor" /><title>Hello world!</title><style type="text/css">body{font-size:14px;color:#444;font-family: "Microsoft Yahei", Tahoma, "Hiragino Sans GB", Arial;background:#fff;}ul{list-style: none;}img{border:none;vertical-align: middle;}</style></head><body><h1 class="text-xxl">Hello world!</h1><p class="text-green">Plain text</p></body></html>复制代码图片 Images
图片加链接 (Image + Link)：
Follow your heart.
列表 Lists
无序列表（减号）Unordered Lists (-)
- 列表一
- 列表二
- 列表三
无序列表（星号）Unordered Lists (*)
- 列表一
- 列表二
- 列表三
无序列表（加号和嵌套）Unordered Lists (+)
- 列表一
- 列表二
- 列表二-1
- 列表二-2
- 列表二-3
- 列表三
- 列表一
- 列表二
- 列表三
有序列表 Ordered Lists (-)
- 第一行
- 第二行
- 第三行
GFM task list
- GFM task list 1
- GFM task list 2
- GFM task list 3
- GFM task list 3-1
- GFM task list 3-2
- GFM task list 3-3
- GFM task list 4
- GFM task list 4-1
- GFM task list 4-2
绘制表格 Tables
| 项目 | 价格 | 数量 |
|---|---|---|
| 计算机 | $1600 | 5 |
| 手机 | $12 | 12 |
| 管线 | $1 | 234 |
| First Header | Second Header |
|---|---|
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| First Header | Second Header |
|---|---|
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| Function name | Description |
|---|---|
| help() | Display the help window. |
| destroy() | Destroy your computer! |
| Left-Aligned | Center Aligned | Right Aligned |
|---|---|---|
| col 3 is | some wordy text | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
| Item | Value |
|---|---|
| Computer | $1600 |
| Phone | $12 |
| Pipe | $1 |
特殊符号 HTML Entities Codes
© & ¨ ™ ¡ £ & < > ¥ € ® ± ¶ § ¦ ¯ « ·
X² Y³ ¾ ¼ × ÷ »
18ºC " '
[========]
Emoji表情 :smiley:
Blockquotes :star:
GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
- :smiley: @mentions, :smiley: #refs, links, formatting, andtagssupported :editormd-logo:;
- list syntax required (any unordered or ordered list supported) :editormd-logo-3x:;
- [ ] :smiley: this is a complete item :smiley:;
- []this is an incomplete item test link :fa-star: @pandao;
- [ ]this is an incomplete item :fa-star: :fa-gear:;
反斜杠 Escape
*literal asterisks*
[========]
科学公式 TeX(KaTeX)
E=mc2
行内的公式E=mc2行内的公式，行内的E=mc2公式。
x>y
\(\sqrt{3x-1}+(1+x)^2\)
sin(α)θ=∑i=0n(xi+cos(f))
多行公式：
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)复制代码\displaystyle
\frac{1}{
\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}}
{1+\cdots} }
}
}复制代码f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi复制代码分页符 Page break
Print Test: Ctrl + P
[========]
绘制流程图 Flowchart
st=>start: 用户登陆 op=>operation: 登陆操作 cond=>condition: 登陆成功 Yes or No? e=>end: 进入后台 st->op->cond cond(yes)->e cond(no)->op复制代码
[========]
绘制序列图 Sequence Diagram
Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks!复制代码
End
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
