Less入门

less

less是一种动态样式语言，属于CSS预处理器，它扩展了CSS语言

less可在客户端运行，也可借助Node.js在服务端运行


less中的注释

以//开头的注释，不被编译至CSS文件

以/**/包裹的注释被编译至CSS文件


less中的变量

使用@来声明less中的变量

    @varName:varValue;

    1.作为属性值，直接使用@varName代替属性值

    2.作为选择器或属性名，以@{varName}的形式使用

    3.作为url，@{varName}

    4.变量延迟加载，变量在最后被其值代替


less中的嵌套规则

@clo: blue;
@mar: margin;
@sel: div;

@{sel} {
    @{mar}: 10px;
    color: @clo;

    .inner {  /*子级*/
        color: aquamarine;
    }

    &:hover {  /*同级*/
        color: black;
    }
}

编译后：

div {
  margin: 10px;
  color: blue;
}

div .inner {
  color: aquamarine;
}

div:hover {
  color: black;
}

less的运算

@mar: 100px;
@wid: 60px;
@het: 120px;
@pad: 30px;

.class {
    margin: 10+@mar;
    padding: 55- @pad;
    width: 2*@wid;
    height: @het/4.3;
}

编译后：

.class {
  margin: 110px;
  padding: 25px;
  width: 120px;
  height: 27.90697674px;
}