Less #

Less 变量 #

变量是指没有固定的值，CSS 中一些颜色和数值经常使用。

@变量名:值;

举例

// 定义一个粉色变量
@color: pink;
@font14: 14px;
body {
    background-color: @color;
}
div {
    background-color: @color;
    font-size: @font14;
}

变量命名规范 #

• 必须有 @ 前缀
• 不能包含特殊字符
• 不能以数字开头（除去前缀 @ 的部分）
• 大小写敏感

Less 编译 #

本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。

所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。

在 VS Code 中，使用 Easy Less 插件 可以即时编译生成 CSS 文件，再引入即可。

Less 嵌套 #

类似于html元素之间的嵌套，Less 里也可以把选择器嵌套。

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

等同于：

#header .logo {
     width: 100px;
}

Less 中伪类、交集选择器、伪元素选择器的写法 #

要在 less 中写伪类、交集选择器、伪元素选择器，则要在内层选择器的前面加上 &。

• 内层选择器前面没有 &，则它被解析为父选择器的后代；
• 若有 &，则被解析为父元素自身或父元素的伪类。

a:hover {
    color: red;
}

Less嵌套写法：

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

Less 运算 ⚡ #

任何数字、颜色或者变量都可以参与运算，Less 提供了加（+）、减（-）、乘（*）、除（/）算数运算。

注意 #

• 对于除法运算，需要用圆括号括起来
• 运算符的作用左右两侧要有空格
• 运算数若只有一个带有单位，则最后结果以此为单位
• 若有多个单位，则以第一个单位为准

页面元素的 rem 值 = 页面元素在750像素下的px值 / html里面的文字大小