less基础

less基础

css的弊端

css是一门非程序式语言，没有变量，函数，scope(作用域)等概念

• css需要书写大量看似没有逻辑的代码，css冗余度比较高
• 不便于维护和扩展，不利于复用
• css没有很好的计算能力

less是一门css扩展语言，也称为css预处理器

• less变量
• less编译
• less嵌套
• less运算

less变量

变量指没有固定的值，可以改变的。一般用于颜色和数值

   @变量名:值；

变量名规范

• 必须@为前缀
• 不能包含特殊字符
• 不能数字开头
• 大小写敏感

less编译

利用vs code中的Easy Less 插件（ctrl+S保存less文件即可自动生成css文件）

less嵌套

• less嵌套 子元素的样式直接写到父元素的里面就好了

后代选择器：

.nav{
    .logo{
        color: green;
    }
}
对应的css样式
.nav .logo {
  color: green;
}

交集|伪类|伪元素选择器

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

less运算

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

@boder:5px + 5;
div{
    width: 200px - 50;
    height: (200px * 2);
    border: @boder solid red;
}
img{
  width: (82 / 50rem);
  height: (82 / 50rem);
}

div {
  width: 150px;
  height: 400px;
  border: 10px solid red;
}
img {
  width: 1.64rem;
  height: 1.64rem;
}

注意：

• 乘号（*）和除号(/)的写法
• 运算符中间左右有个空格隔开
• 对于不同数值之间的运算，运算结果取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位
• 颜色的数值也可以参与运算

导入less文件

 @import "文件名";