Less基础

1、变量

变量：是指没有固定的值，可以改变的。经常用于==颜色==和==数值==。

格式：@变量名：值；

示例：

@color:pink;
body {
    background-color:@color;
}
div {
    color:@color;
}

命名规范：

• 必须有@为前缀

• 不能包含特殊字符

• 不能以数字开头

• 大小写敏感

2、嵌套

用于CSS选择器的嵌套

#header .logo {
width:300px;
}

Less嵌套写法

#header{
  .logo{
      width:300px;
    }
}

如果遇见（交集|伪类|伪元素选择器）

• 内存选择器的前面没有&符号，则它被解析为父选择器的后代；

• 如果有&符号，则被解析为父元素自身或父元素的伪类；

伪类hover为例：

a:hover {
    color:red;
}

Less写法

a {
    &:hover {
        color:red;
    }
}

3、运算

任何数字、颜色或者变量都可以参与运算。Less提供加减乘除算术运算。

示例:

//Less部分
@width:10px + 5;
div {
    border:@width solid red;
}

//还可以这样写
width:(@width + 5) * 2;

div {
    border:15px solid red;
}

注意：

• 运算符中间左右有个空格隔开 1px + 5

• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位

• 如果两个值之间只有一个值有单位，则运算结果就取该单位