Less相关

Posted 2020-08-09 赵林

一. 语言特性

　　1, 变量（变量只定义一次，本质就是常量）

　　　在代码中，同一个值经常重复出现多次，比如网站定下的基础颜色，字体大小，很多地方都要使用。将常用的值定义在一个地方，方便修改。

　　　变量除了在css属性值里使用，还能用于选择器，属性名，URL，@import

　　　选择器:  @mySelector: banner;  .@{mySelector}{color : #fff;}

　　　URL:    @images: "../img";     body {background : url(@{images}/bg.png) no-repeat center center;}

　　　@import： @themes: "../../src/themes";  @import "@{themes}/tidal-wave.less";

@basefontsize : 14px;

.load-mask {
    font-size : @basefontsize + 2;
}

　　2, 混合（Mixin，相当于继承）

@basefontsize : 14px;

.clearfix {
    display:block;
    zoom :1;
    &:after {
        content : "";
        display : block;
        font-size: 0;
        clear : both;
        height : 0;
        visibility : hidden;
    }
}
.load-mask {
    font-size : @basefontsize + 2;
    .clearfix;
}

 　　3, 嵌套

.load-mask {
    font-size : @basefontsize + 2;
    .clearfix;
    .inner {
        display : block;
    }
    &:before {
        content:"";
    }
}

　　3, 运算

　　　　数字，颜色，百分比，变量都能参与运算

　　　　@percent : 5%;

　　　　@color  : #333;

　　　　div {
　　　　　　width : @percent + 5%     // 10%
　　　　　　width : @percent - 5%      // 0%
　　　　　　width : @percent * 5%     // 25%
　　　　　　width : @percent / 5%     // 1%
　　　　　　// 百分比与纯数字运算和上述结果一致
　　　　　}

　　4, 函数（LESS内置了许多函数，如percentage(0.5)转换成百分比）

　　5, 作用域

　　编译器会在局部查找需要的变量或混合类，如果没有，编译器会在其父选择器作用域内查找

@var: red;

#page {
  @var: white;
  #header {
    color: @var;  // white
  }
}

　　6, 导入

　　 可以导入一个 .less 文件，此文件中的所有变量就可以全部使用。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

　　

@import "library"; // library.less
@import "typo.css";