less 简单用法

less 示例

// 声明变量 用 @
@man-color: #f0f0f0;

// 混合
.demo {
    color: @man-color;
    .main-border;
}

.main-border {
    border: 1px solid @man-color;
    .border-args(20px);
}

// 混合-可带参数
.border-args(@border-width: 1px) {
    border: @border-width solid @man-color;
}

// 匹配模式
.pos(r) {
    position: relative;
}

.pos(a) {
    position: absolute;
}

.pipei {
    .pos(r)
}

// 运算
@main_width: 100px;

.box {
    width           : @main_width+20*2;
    height          : @main_width+10px;
    color           : @man-color;
    background-color: #ccc-120;
}

// 嵌套
.list {
    li {
        a {

            // &:上一层选择器-当前指的是 a标签
            &   :hover {
                font-size: 20px;
            }

            span {
                color: @man-color;
            }
        }
    }
}

// 变量 arguments
.border_arg(@w: 20px, @c: red, @ty: solid) {
    border: @arguments;
}

.test_arguments {
    .border_arg();
    .border_arg(30px; green)
}

// 避免编译  专有语法 在前加一个~
.test_01 {
    width : calc(200px-10px);
    height: ~'calc(200px-10px)';
}

// !important 关键字;会在所有的样式前加上 important
.test_02{
    .box !important
}

转换为 css

.demo {
  color: #f0f0f0;
  border: 1px solid #f0f0f0;
  border: 20px solid #f0f0f0;
}
.main-border {
  border: 1px solid #f0f0f0;
  border: 20px solid #f0f0f0;
}
.pipei {
  position: relative;
}
.box {
  width: 140px;
  height: 110px;
  color: #f0f0f0;
  background-color: #545454;
}
.list li a :hover {
  font-size: 20px;
}
.list li a span {
  color: #f0f0f0;
}
.test_arguments {
  border: 20px red solid;
  border: 30px green solid;
}
.test_01 {
  width: calc(200px-10px);
  height: calc(200px-10px);
}
.test_02 {
  width: 140px !important;
  height: 110px !important;
  color: #f0f0f0 !important;
  background-color: #545454 !important;
}