less基础

css的弊端

CSS是一门非程序式的语言，没有变量，，SCOPE（作用域）等概念。

1. css需要书写大量看似没有逻辑的代码，CSS的冗余度是较高的。
2. 不方便维护及扩展，不利于复用
3. css没有很好的计算能力
4. 非前端开发工程师来讲，往往会因为缺少css编写经验而很难组织良好且易于维护的CSS代码项目。

1. less概述

less(Learner Style Sheets 的缩写) 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin（混入）、函数等特性，使 CSS 更易维护和扩展。

less中文网 http://lesscss.cn

常见的CSS预处理器Sass，Less，Stylus

一句话：Less是一门预处理语言，它扩展了CSS的动态特性

2. less使用

我们首先新建一个后缀名为less的文件，在这个less文件能书写less语句

2.1 less变量

变量是指没有固定的值，可以改变，因为我们css中的一些颜色和数值经常使用

@变量名: 值

1. 必须有@为前缀
2. 不能包含特殊字符
3. 不能以数字开头
4. 大小写敏感

2.2 less编译

1. 用vscode的 easy less 插件可以快速的转换 less 为 css 代码
2. 还可以使用 gulp（node插件）

// 定义一个粉色的颜色
// 变量名区分大小写
@Color:black;
@color:pink;
@font14:14px;
body{
    background-color: @color;
}

div{
    color: @color;
    font-size: @font14;
}

a{
    font-size: @font14;
}

在转换成css之后：

body {
  background-color: pink;
}
div {
  color: pink;
  font-size: 14px;
}
a {
  font-size: 14px;
}

2.3 less嵌套

1. 普通元素的嵌套：

.nav {
    width: 200px;
    height: 200px;
    background-color: pink;
    .logo {
        color: red;
    }
    a{
        color: red;
        &:hover{
            color: gold;
        }
    }
}

转换成css文件后：

.nav {
    width: 200px;
    height: 200px;
    background-color: pink;
}

.nav .logo {
    color: red;
}

.nav a {
    color: red;
}

.nav a:hover {
    color: gold;
}

2.4 less运算

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

注意：

1. 乘号除号的写法 * /
2. 运算符两端要有空格隔开 1px + 1
3. 对于两个不同的单位之间的运算，运算结果的值和第一个值的单位相同
4. 如果两个值之间只有一个值的单位，则运算结果就取该单位

@border:5px + 5;
@basefont: 12px;
div{
    width: 200px * 2;
    height: 400px;
    border: @border solid red;
}

img{
    width: 82rem / @basefont;
    height: 82rem / @basefont;
}
// 运算符的左右两侧必须敲空格
// 两个素参与运算  如果只有一个数有单位，则最后的结果就医这个单位为准
// 两个数参与运算，如果两个数都有单位，而且有不一样的单位 最后的结果以的一个单位为准

转换成css之后的代码：

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