安装less

先在页面用link引入自己的.less文件，并把rel属性更改为stylesheet/less，然后再引入less.js文件，可以用官网的包，也可以用本地的，这里位置是需要区分的，即是先style.less,后less.js(而且得是服务器环境）

<link rel="stylesheet/less" href="style.less>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>

值变量

经常再css中看到一个值重复多次，比如某个颜色，震哥哥网站都是这个主题色，那么我们这里就可以定义成一个变量，然后再需要的地方引入变量，这样及时后期修改，只要修改这个变量的值，整个页面的颜色都会随之更改`

//定义
@defalut-color:#f40;
@font-color:#333;
@font-size:12px;
@width:200px;

//使用
p{
color:@defalut-color;
font-size:@font-size;
}

选择器变量

选择器变量让悬着其也变成动态

//---定义---
@myselector: #wrap;
@wrap: wrap;

//---使用---
@{myselector}{   // 使用时变量名须用大括号包裹
  color:skyblue;
}
.@{wrap}{
  font-size: 26px;
}
#@{wrap}{   // 使用时变量名须用大括号包裹
  font-style: italic;
}

//---相当于---
#wrap{
  color:skyblue;
}
.wrap{
  font-size: 26px;
}
#wrap{
  font-style: italic;
}

属性变量

//---定义---
@fontSize: font-size;

//---使用---
p{
  @{fontSize}: 26px;   // 使用时变量名须用大括号包裹
}

//---相当于---
p{
  font-size: 26px;
}

url路径

//---定义---
@images: "../img";   // 这里使用引号

//---使用---
body{
  background: url("@{images}/blue.jpg");
  background-size: cover;
}

//---相当于---
body{
  background: url("../img/blue.jpg");
  background-size: cover;
}

变量声明

//---语法---
 - 结构: @name: { 属性: 值 ;};
 - 使用：@name();

//---定义---
@background: {background: skyblue;};

//---使用---
p{
  @background();
}

//---相当于---
p{
  background: red;
}

变量声明

//---定义---
@width: 300px;
@color: #222;

//---使用---
p{
  height: @width+100;
  width: @width+100;
  background: @color+#111;
}

//---相当于---
p{
  width: 400px;
  height: 400px;
  background: #333;
}

变量作用域

//---定义---
@var: @a;
@a:skyblue;

//---使用---
p{
  background-color: @var;
  @a:red;
}

//---相当于---
p{
  background-color: red;
}

嵌套书写

.box{
  width: 100px;
  background-color: skyblue;
  p{
    color: red;
  }
  &:after{
    content: "hello";
  }
}

//---相当于---
.box{
  width: 100px;
  background-color: skyblue;
}
.box p{
  color: red;
}
.box::after{
  content: "hello";
}

less与sass的区别

一、Less、Sass/Scss是什么?
1、Less：

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

2、Sass：

是一种动态样式语言，Sass语法属于缩排语法，

比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

二、less和sass的相同之处
Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、less和sass的区别
Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

1、Less：

【两种注释方式】

①//less中的注释，但这种不会被编译

②/*

这也是less中的注释，但是会被编译

【less中的变量】

1、声明变量:

@变量名:变量值;

使用变量: @变量名

>>>less中变量的类型：

①数字类 1 10px

②字符串：无引号字符串 red ;有引号字符串 "haha"

③颜色类：red #000000 rgb()

④值列表类型：用逗号和空格分隔 10px solid red

>>>变量使用原则：

多次频繁出现的值、需要修改的值，设为变量

2、混合(MiXins)

①无参混合

声明：.name{}

选择器中调用：.name;

②代参混合

无默认值

声明：.name(@param){}

调用：.name(parValue);

有默认值

声明：.name(@param:value){} 

调用：.name(parValue); //parValue可省

>>>如果声明时，参数没有默认值，则调用时必须赋值，否则报错！

>>>无参混合，会在css中编译除同名的class选择器，有参的不会

3、less的匹配模式：

使用混合进行匹配，类似于if结构

声明：

.name(条件一，参数){}

.name(条件二，参数){}

.name(@_,参数){}

调用：

.name(条件值，参数值);

匹配规则：根据调用时提供的条件值去寻找与之匹配的"MiXins"执行，其中@_表示永远需要执行的部分

4、less中的运算

- - / 可带、可不带单位

颜色运算时，红绿蓝分三组计算，组内可进位，组间互不干涉

5、包含了传进来的所有参数：

border:@arguments;

6、less中的嵌套：保留HTML中的代码结构

①嵌套默认是后代选择器，如果需要子代选择器，则在子代前加>

②.&表示上一层 &:表示上一层的hover事件

2、Sass：

1、Sass中的变量

使用 $变量名：变量值，声明变量；

如果变量需要在字符串中嵌套，则需使用#加大括号包裹；

border-#{$left}:10px solid blue;

2、Sass中的运算

会将单位也进行运算，使用时需注意最终单位例：10px10px=100pxpx

3、sass中的嵌套：

选择器嵌套，属性嵌套，伪类嵌套

选择器嵌套：

ul{ li{} } 后代

       ul{ >li{} } 子代

&:表示上一层 div{ ul{ li{ &==“div ul li” } } }

属性嵌套：

属性名与大括号之间必须有:

例如:border:{color:red;}

伪类嵌套：ul{li{ &:hover{ “ul li:hover” } } }

4、混合宏、继承、占位符

①混合宏：

声明：@mixin name($param:value){}

调用：@include name(value);

声明时，可以有参，可以无参；可带默认值，也可不带；但是，调用时，必须符合声明规范。同less

优点：可以传参，不会生成同名class；

缺点：会将混合宏中的代码，copy到对应的选择器中，产生冗余代码！

②继承：

声明：.class{}

调用：@extend .class;

优点：继承的相同代码，会提取到并集选择器中，减少冗余代码

缺点：无法进行传参，会在css中，生成一个同名class

③占位符：

声明：&class{}

调用：@extend %class;

优点：继承相同代码，会提前到并集选择器；不会生成同名的class选择器

缺点：无法进行传参

综上所述：当需要传递参数时，用混合宏；当有现成的class时用继承；当不需要参数，也不需要class时，用占位符

5、if条件结构：

@if 条件 {}@else {}

6、for循环结构：

//不包含10;

@for $i from 1 to 10{}

//包含10;

@for $i from 1 through 10{}

7、while循环结构：

$j: 1;

@while $j<10 {

.while#{$j} {　　　　border:#{$j}px solid red;

}

$j: $j+1;

}

8、each循环遍历

@each item in a,b,c,d{//item表示每一项}

9、函数：

@function func( $KaTeX parse error: Expected '}', got 'EOF' at end of input: length) {$ length1:$length*5; @return $length1;}//调用：

func(10px);

10、使用…将传进来的所有参数，接收到一个变量中

@mixin bordeRadius($param1…) { //使用…将传进来的所有参数，接收到一个变量中

border-radius: $p a r a m 1; - w e b k i t - b o r d e r - r a d i u s :$ param1;}

四. 总结
不管是Sass，还是Less，

都可以视为一种基于CSS之上的高级语言，

其目的是使得CSS开发更灵活和更强大，

Sass的功能比Less强大,

基本可以说是一种真正的编程语言了，

Less则相对清晰明了,易于上手,对编译环境要求比较宽松。

考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less，

但也会去尝试使用sass，毕竟为以后的工作做准备。

五.扩展思考
处理机制不一样会带来什么不同？

因为Less与Sass处理机制不一样，

前者是通过客户端处理的，

后者是通过服务端处理，

相比较之下前者解析js会比后者慢一点。

原文链接：https://blog.csdn.net/weixin_45746190/article/details/107093420