WeUI v2.3.0 解读08 mixins

mixins css的公用块儿一样的感觉

Less 官网
Less 官网 - mixins

1 mobile -webkit-tap-highlight-color 能够设置点击链接的时候出现的高亮颜色。

屏蔽Chorme的这个属性

MDN -webkit-tap-highlight-color

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


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


2 setArrow 暂时还不明白为谁提供(2020-04-28) 猜测用boder来做 三角形之类的

MDN - transform-function

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

._setArrow(@arrowsize, @borderColor, @borderWidth) {
    display: inline-block;
    height: @arrowsize;
    width: @arrowsize;
    border-width: @borderWidth @borderWidth 0 0;
    border-color: @borderColor;
    border-style: solid;
}

.setArrow(@direction, @arrowsize, @borderColor, @borderWidth) when (@direction = top) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);

    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0); // rotate(-45deg)
}

.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = right) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);

    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); // rotate(45deg);
    position: relative;
    top: -2px;
}

.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = down) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);

    transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0); // rotate(135deg);
    position: relative;
    top: -3px;
}

.setArrow(@direction, @arrowsize, @borderColor,@borderWidth) when (@direction = left) {
    ._setArrow(@arrowsize, @borderColor, @borderWidth);

    transform: matrix(-0.71, -0.71, 0.71, -0.71, 0, 0); // rotate(-135deg);
    position: relative;
    top: -2px;
}


3 setOnepx 通过 ::after ::before 来附加 边框线

MDN - ::after
MDN - ::before
MDN - transform-function

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


@import "../variable/color";

.setTopLine(@c: @weuiLineColorLight) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid @c;
    color: @c;
    transform-origin: 0 0;
    transform: scaleY(0.5);
}

.setBottomLine(@c: @weuiLineColorLight) {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid @c;
    color: @c;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}

.setLeftLine(@c: @weuiLineColorLight) {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid @c;
    color: @c;
    transform-origin: 0 0;
    transform: scaleX(0.5);
}

.setRightLine(@c: @weuiLineColorLight) {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid @c;
    color: @c;
    transform-origin: 100% 0;
    transform: scaleX(0.5);
}



4 text 统一为文本做处理
  1. 文本显示不下 时候的处理
  2. 文本换行
  3. 文本换行时如何使用连字符连接单词

MDN - overflow
MDN - text-overflow
MDN - white-space
w3chool - word-wrap
MDN - hyphens
MDN - box-orient
MDN - -webkit-line-clamp
MDN - hyphens

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


.ellipsis(@w:auto) {
    width: @w;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.ellipsisLn(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
}
.text_wrap() {
    word-wrap: break-word;
    word-break: break-all;
}
.hyphens() {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}