weui 学习less

minin.less

/*
* Tencent is pleased to support the open source community by making WeUI available.
* 
* Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
* 
* Licensed under the MIT License (the "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
* 
*       http://opensource.org/licenses/MIT
* 
* Unless required by applicable law or agreed to in writing, software distributed under the License is
* distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
* weui mixin.less
*/

/* 当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色*/

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

/* 箭头方向,大小,颜色,宽度 */

._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;
}

/* 设置一像素的边 */
.setTopLine(@c: #C7C7C7) {
    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: #C7C7C7) {
    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: #C7C7C7) {
    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: #C7C7C7) {
    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);
}
/* 设置是否换行和溢出隐藏 */
.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;
}

variable.less

/* 当用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色*/

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

/* 箭头方向,大小,颜色,宽度 */

._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;
}

/* 设置一像素的边 */
.setTopLine(@c: #C7C7C7) {
    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: #C7C7C7) {
    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: #C7C7C7) {
    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: #C7C7C7) {
    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);
}
/* 设置是否换行和溢出隐藏 */
.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;
}