less是一门css的预处理语言！
如果一个页面中想实现a标签和p标签同中颜色，我们可以直接选中，那这样会很麻烦，这时候我们就可以用less定义一个变量，每次使用的时候，只需要修改变量中值就可以了。
浏览器用法
在浏览器中使用Less.js是最简单的入门方式，便于使用Less进行开发，但在生产中，当性能和可靠性很重要时，我们建议使用Node.js或许多第三方工具之一进行预编译。
首先，将.less样式表链接到rel设置为“ stylesheet/less” 的属性：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，下载less.js并将其包含在页面元素的<script></script>标记中<head>：
<script src="less.js" type="text/javascript"></script>
1.变量（Variables）
变量必须先定义后使用！
必须以@符号开头，：赋值。
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为：
#header {
width: 10px;
height: 20px;
}
2.嵌套（Nesting）
Less使您能够使用嵌套代替或与级联结合使用。假设我们有以下CSS：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在Less中，我们也可以这样写：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
生成的代码更简洁，并模仿HTML的结构。
1.网上引用的less.js必须在服务器或者线上地址打开，不能在本地打开，本地打开是无效的！
2.引用文件时，必须先引入less文件，再引用js文件
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>
3.Scope （作用域）
1. Less 中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推。
2. 变量有自己生效的范围：作用域！
3. 同一个作用域中的变量只能定义一次。
4. 变量的覆盖：同一个作用域出现多次才会出现！
5. 最大的作用域里面的变量称为全局变量！
6. 局部作用域里的变量称为局部变量！
7. 变量可以参与运算
4. Extend （扩展）
就是继承的意思
image.png
不能在自己内部中选择自己
image.png
&代表选择它自己本身
5. Mixins (混合)
从现有的样式混合（mixin）属性
嵌套中不能直接写混入
你可以混合“类”选择器或者“id”选择器，例如
.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
以上将得到:
.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}
小提示：当你调用混合集的时候，括号可加可不加。
.a(); //这两种调用方式效果是一样的
.a;
5.1 带参数的混合
image.png
image.png
@my-color是一个动态数据！
- 先定义一个.color选择器，然后括号里面设置一个变量，再给它赋值color: 后面跟上变量名称。
- 后面的只需要混合这个选择器，后面括号里面附上值就可以把这个参数传递到上面去。
6. 单行注释是不会出现在编译后的 CSS 文件中，如果是针对样式说明的注释，建议使用多行注释。
Import Directives （导入准则）
从其他样式表中导入样式。
在标准的CSS中，@import必须在所有其他类型的规则之前。但是Less.js不在乎你把@import语句放在什么位置。
示例：
.foo {
background: #900;
}
@import "this-is-valid.less";
导入CSS文件
@import (css) ""this-is-valid.css";
函数
1. color
解析颜色，将代表颜色的字符串转换为颜色值。
参数： string: 代表颜色值的字符串。
返回： color
示例： color("#aaa");
输出： #aaa
image.png
当我们的变量不是我们定义的时候，需要修改！
@color: "red";
.box{
color: color(@color);
}
2.data-uri
嵌入图片地址，交输出一个图片地址。
.box{
background: data-uri("images/1.png");
}
image.png
3.convert
将数字从一种类型转换到另一种类型。
第一个参数为带单位的数值，第二个参数为单位。如果两个参数的单位是兼容的，则数字的单位被转换。如果两个参数的单位不兼容，则原样返回第一个参数。
@cx: 5cm;
.box{
width: convert(@cx,px);
}
image.png
4.unit
移除或者改变属性值的单位
@cx: 5cm;
.box{
width: unit(@cx,px);
}
**如果第一个参数有单位，那就把单位砍掉，保留数字，再拼接px，瑞国没有就是本身的数值
**
ceil
向上取整。
参数： number - 浮点数。
返回： integer
示例： ceil(2.4)
输出： 3
floor
向下取整。
参数： number - 浮点数。
返回： integer
示例： floor(2.6)
输出： 2
percentage
将浮点数转换为百分比字符串。
参数： number - 浮点数。
返回： string
示例： percentage(0.5)
输出： 50%
round
Applies rounding.
参数：
-
number： 浮点数。 -
decimalPlaces： 可选参数，四舍五入取整的小数点位置，默认值为0。
返回： number
示例： round(1.67)
输出： 2
示例： round(1.67, 1)
输出： 1.7
Sass 使用教程
https://blog.csdn.net/zyy_0725/article/details/79459974
visual studio code插件
sass插件：easy.sass
less插件：easy.less
配置模板
image.png
网友评论