1.HTML和CSS不属于编程语言而是属于标记语言，所以很难像JS一样定义变量、编写方法、实现模块化开发等
2.而目前的CSS编写模式中，都是定义一些公共的样式类名，哪一块的HTML需要这个样式，就去增加对应的样式类名，所以我们经常看到一个标签上存在很多样式类名，在这种模式中我们要时常关注CSS的优先级，避免样式的重叠覆盖…
3.为了解决CSS的这一困境，CSS预处理预编译的思想脱颖而出，比较具有代表性的有LESS、SASS、Stylus
4.它们在传统的CSS基础上增加了大量的新的语法，编写方式，常用的函数等，可以让我们的CSS像JS一样成为一门编程语言。本文主要介绍LESS的语法和使用。

1.LESS的语法

1 注释&变量&嵌套&延迟加载

注释
形如/* Hello, I’m a CSS-style comment */的多行注释
双斜线的单行注释// Hi, I’m a silent comment,
单行注释是不会出现在编译后的 CSS 文件中，
因此 如果是针对样式说明的注释，建议使用多行注释

LESS的变量定义使用@，普通变量

// 1.普通的变量
@bgColor:white;
@Height:50rpx;
.contain{
    background-color: @bgColor;
 
}
.row{
    height:@Height;
    margin-left:@Height;
}   
编译后的css：
.contain {
  background-color: white;
}
.row {
  height: 50rpx;
  margin-left: 50rpx;
}

选择器和属性作为变量（很少使用）

@Mycontain:width;
.@{Mycontain}{//选择器
    height:300rpx;
    @{Mycontain}:200rpx;//属性名
编译后的css：
.width {
  height: 300rpx;
  width: 200rpx;
}

嵌套规则

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

//->编译为CSS的结果
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

延迟加载

变量是延迟加载的，在使用前不一定要预先声明。

.zong_lazy{
    color: @color;
    @color:black;
}

在使用@color变量的时候@color并未声明，因为less的延迟加载。

2 混合

混合就是一种将一系列属性从一个规则引入（“混合”）到另一个规则集的方式。这个意思是在less中定义的选择器类可以直接放入其他选择器类里面，这种重复使用很强。

2.1普通混合

//1.普通混合
.bor{
    background-color: aqua;
    width: 32rpx;
}
.poop{
    color:white;
    .bor;
}
.boom{
    height:200rpx;
    .bor;

编译后的css：

.bor {
  background-color: aqua;
  width: 32rpx;
}
.poop {
  color: white;
  background-color: aqua;
  width: 32rpx;
}
.boom {
  height: 200rpx;
  background-color: aqua;
  width: 32rpx;
}

2.2不带输出的混合

如果你想要创建一个混合的类，但是我不想让它输出到css的样式并显示。
只要类的名字后面加上括号，就可以实现的，这样不会到css样式中显示！

在css样式中实现不显示.mymix-echa()类。

.mymix{
    color:black;
}
.mymix-echa(){//css样式中不显示
    background-color: white;
 
}
.dad{
    width: 30rpx;
    height:30rpx;
}
编译后的css:
.mymix {
  color: black;
}
.dad {
  width: 30rpx;
  height: 30rpx;
}

2.3带参数的混合

.son(@width){
    width:@width;
}
.dad{
    .son(300px);//需要传一个参数进去
}
编译CSS
.dad {
  width: 300px;
}

形参是默认值

.son(@width:200px){
    width:@width;
}
.dad{
    .son();
}
编译后：
.dad {
  width: 200px;
}

2.4带多个参数的混合

1.一个组合可以带多个参数，参数之间可以使用分号或者逗号来分割。
2.但是建议尽量使用分号来分隔，因为这逗号可以编译为参数分割或者css为列表分割。
3.推荐.mini(形参1；形参2)这代表是分号，而不是.mini(形参1，形参2)这代表是逗号

2.5命名参数

.sharecss(@w：red,@h：10px,@c：green){
background:@w;
font-size:@h;
color:@c;
}
#wrap{
.sharecss(@h:20px);
}

2.6模式匹配

1.作用类似于if-else代码块，可以根据传入的参数匹配调用混合
2.@_可匹配任意字符
3.匹配参数的位置可在第一位，也可在任意位置

.triangle(@c,@_,@w){
    position: absolute;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    border-width: @w;
}
.triangle(@c,T,@w) {
    border-style: dashed dashed solid dashed;
    border-color: transparent transparent @c transparent;
}
.triangle(@c,R,@w) {
    border-style: dashed dashed dashed solid;
    border-color: transparent transparent transparent @c;
}
.triangle(@c,B,@w) {
    border-style: solid dashed dashed dashed;
    border-color: @c transparent transparent transparent;
}
.triangle(@c,L,@w) {
    border-style: dashed solid dashed dashed;
    border-color: transparent @c transparent transparent;
}

@import "triangle.less";
.box{
    .triangle(pink,L,200px);
}

.triangle(pink,L,200px)先匹配.triangle(@c,@_,@w)，然后再匹配.triangle(@c,L,@w)，最后把匹配到了两个混合中的属性编译输出css文件中

2.7arguments变量

arguments变量表示可变参数，意思是形参从先到后的顺序。注意：这个是参数值位置必须是一一对应

.son3(@dd1:20px;@dd2:solid;@dd3:white){
    border:@arguments;
}
.div4{
    .son3();
}
编译后
.div4 {
  .border: 20px solid white;
}

3 运算

只需一个带单位

.contain{
    font-size:300px+200*2;
}
编译后：
.contain {
  font-size: 700px;
}

4.继承

less继承方便代码模块化
继承不支持带参数
如社区公共头部与尾部

.jicheng{
    width: auto;
    height: 50%;
    text-align: center;
    background: aqua;
}
.header:extend(.jicheng){
  /*header自身代码*/
  padding: 0 auto;
}

编译后的css：

jicheng, .header {
  width: auto;
  height: 50%;
  text-align: center;
  background: aqua;
}
.header {
  /*header自身代码*/
  padding: 0 auto;
}

混合与继承的区别

从表面看来，extend与混合最大的差别，就是extend是同个选择器共用，而混合的本质就是复制粘贴封装的代码块。
继承有利于减少代码的重复性！！！
混合使用起来更加灵活！！！

5 避免编译

对于单位不相同的情况，可以采用 calc 。

// less
width: calc(100% - 10px);
height: calc(100vh - 20px);
 
// css
width: calc(90%);
height: calc(80vh);

经过 less 编译后只是简单的进行值的计算，并保留了前者的单位，这明显是不正确的。当采用 calc 语法时，我们应该避免 less 的编译，保留原来格式，让浏览器进行计算。

将属性当字符串用引号括起来，并在前面加上波浪符 ~

// less
width: ~'calc(100% - 10px)';
height: ~'calc(100vh - 20px)';
 
// css
width: calc(100% - 10px);
height: calc(100vh - 20px);

此时，width 和 height 并没有被 less 编译，而是保持原来格式。

最后

以上就是落寞紫菜为你收集整理的【前端】-【less】-学习笔记1.LESS的语法的全部内容，希望文章能够帮你解决【前端】-【less】-学习笔记1.LESS的语法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。