WeUI v2.3.0 解读05 (src/style/base/reset.less)

--weui-BG-0: #ededed;
--weui-BG-1: #f7f7f7;
--weui-BG-2: #fff;
--weui-BG-3: #f7f7f7;
--weui-BG-4: #4c4c4c;
--weui-BG-5: #fff;
--weui-FG-0: rgba(0, 0, 0, 0.9);
--weui-FG-HALF: rgba(0, 0, 0, 0.9);
--weui-FG-1: rgba(0, 0, 0, 0.5);
--weui-FG-2: rgba(0, 0, 0, 0.3);
--weui-FG-3: rgba(0, 0, 0, 0.1);
--weui-RED: #fa5151;
--weui-ORANGE: #fa9d3b;
--weui-YELLOW: #ffc300;
--weui-GREEN: #91d300;
--weui-LIGHTGREEN: #95ec69;
--weui-BRAND: #07c160;
--weui-BLUE: #10aeff;
--weui-INDIGO: #1485ee;
--weui-PURPLE: #6467f0;
--weui-WHITE: #fff;
--weui-LINK: #576b95;
--weui-TEXTGREEN: #06ae56;
--weui-FG: black;
--weui-BG: white;
--weui-TAG-TEXT-ORANGE: #fa9d3b;
--weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
--weui-TAG-TEXT-GREEN: #06ae56;
--weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
--weui-TAG-TEXT-BLUE: #10aeff;
--weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
--weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
--weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);


MDN CSS1
MDN CSS2

1 text-size-adjust CSS 控制将一些手机或平板设备上使用的文本溢出算法
MDN text-size-adjust
// file: src/style/base/reset.less

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}


2 line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。
MDN line-height
// file: src/style/base/reset.less

body {
    line-height: 1.6;
}


3 font-family CSS 属性用于设置多行元素的空间量，如多行文本的间距。
MDN font-family
 关于: sans-serif 

sans-serif: 无衬线字体，即笔画结尾是平滑的字体
            font-family最后加上sans-serif，也是为了保证能够调用这个字体族里面的字体，因为大多数计算机里都有这种字体。

-apple-system-font: 用于调用系统默认 UI 字体，并且会根据 font-weight 声明选择恰当的变体。system 将来有可能成为标准，-apple- 为过渡阶段的厂商前缀。

// file: src/style/base/variable/global.less

@weuiFontEN: -apple-system-font, "Helvetica Neue";
@weuiFontCN: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
@weuiFontSans: sans-serif;
@weuiFontDefault: @weuiFontEN, @weuiFontSans;


// file: src/style/base/reset.less

body {
    font-family: @weuiFontDefault;
}


4 * (margin,padding) 通配符
// file: src/style/base/reset.less

* {
    margin: 0;
    padding: 0;
}


5 a img (border)
// file: src/style/base/reset.less

a img {
    border: 0;
}


6 a (text-decoration)
MDN -webkit-tap-highlight-color

-webkit-tap-highlight-color 能够设置点击链接的时候出现的高亮颜色。(浏览器兼容)

// file: src/style/base/mixin/mobile.less

.setTapColor(@c:rgba(0,0,0,0)) {
    -webkit-tap-highlight-color: @c;
}

// file: src/style/base/reset.less

a {
    text-decoration: none;
    .setTapColor();
}


7 caret-color
用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，
用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
MDN caret-color
// file: src/style/base/variable/color.less

@import "../theme/index";

.setColor(--weui-BG-COLOR-ACTIVE, #ececec, overlay(rgba(255, 255, 255, 0.05), #2c2c2c));

// color
@weuiColorPrimary: var(--weui-BRAND);
@weuiColorWarn: var(--weui-RED);

// active mask
@weuiActiveMaskBlack: rgba(0, 0, 0, 0.15);

// link
@weuiLinkColorDefault: var(--weui-LINK);

// background
@weuiBgColorDefault: var(--weui-BG-0);
@weuiBgColorPrimary: var(--weui-BG-1);
@weuiBgColorActive: var(--weui-BG-COLOR-ACTIVE);

// line
@weuiLineColorLight: var(--weui-FG-3);
@weuiLineColorDark: var(--weui-FG-2);

// text
@weuiTextColorTitle: var(--weui-FG-0);
@weuiTextColorDesc: var(--weui-FG-1);
@weuiTextColorTips: var(--weui-FG-2);
@weuiTextColorWarn: @weuiColorWarn;

// file: src/style/base/reset.less

input,
textarea {
    caret-color: @weuiColorPrimary;
}


8 ::placeholder 可以选择一个表单元素的占位文本 (兼容性)
MDN ::placeholder

// file: src/style/base/reset.less

::-webkit-input-placeholder {
    color: @weuiTextColorTips;
}