初识less语言（入门篇）_less 入门-CSDN博客

本文链接：https://blog.csdn.net/qq_42825643/article/details/124317879

专栏—前端学习笔记

前言

这篇笔记算是给新手分享的入门篇笔记吗？
嗯…怎么不算呢~
你觉得less语法有什么优势呢？
我觉得吧…嗯…less老师特别的努力…努力的让css书写…嗯…更加的…方便吧…这样的一种感觉…

一、Less是什么？

官方说：

Less CSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

我说：less就是方便书写css用的；

二、Less的使用

1、安装

官方说：

1、在 Node.js 环境中使用 Less ：
npm install -g less
lessc styles.less styles.css

2、在浏览器环境中使用 Less ：
<link rel=“stylesheet/less” type=“text/css” href=“styles.less” />
<script src=“//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js” >

我说，还是转换为css引用更方便：

1、vscode 安装easyless插件
2、新建后缀名为.less文件，保存后就会在同级目录下生.css文件

2、导出css

生成的css文件默认在同级目录下，我们可以进行修改：

1.批量导出

vscode可以配置导出路径，配置完后，后续less文件都按照此规则保存；
方法：
左下角设置 --> 搜索easy less --> 点击在setting.json中编辑 --> 在less.compile的括号中添加 “out”: “路径”；
举例：

下面这段代码会在当前less文件的上一级创建一个css文件夹，并将css文件保存在此，命名与less的命名一致；

"less.compile": {
        
        "out": "../css/"
    }

2.单独导出

个别情况下需要某个文件单独导出指定路径，那就需要在less文件的开头添加如下代码：// out: ‘路径’；
语法：

// out: '路径'；

举例：

下面代码意思是在当前文件夹下创建一个abc文件夹，css文件保存在此；

//out: ./abc/

3、引入与禁止导出

Less支持导入其他less文件，用法如下：

从当前文件夹下引入less01.less；如果引入的文件是less文件，则可以省略后缀；

// 二者效果一样
@import: './less01.less';
@import: './less01';

被引入的文件不再需要生成css，所以需要添加禁止导出，用法如下：

//out: false;

三、Less语法

1、运算

Less赋予了css计算能力，算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

1、加减乘除

除法需要用括号包起来，其他的可以直接写：

  div {
  width: 100px + 20;
  height: 100px * 1.2;
  font-size: 20px - 5;
  border: (5px / 5) solid blue;
}

编译出来的css如下：

div {
  width: 120px;
  height: 120px;
  font-size: 15px;
  border: 1px solid blue;
}

还可以对颜色进行计算，注意加上#号；

 div {
     background-color: #123 + #111;
     color: (#888 / 2);
 }

编译后：

div {
  background-color: #223344;
  color: #444444;
}

2、calc函数

calc函数与css中用法基本一致；

div {
     width: calc(100% - 20px);
 }

css

div {
  width: calc(100% - 20px);
}

2、嵌套

嵌套是Less非常重要的一个语法，能大大提高css代码的准确性。

2.1父子级嵌套

书写方式：将具有继承关系的css样式使用嵌套的形式写在一起；
举例：

.box1 {
     width: 100px;
     height: 100px;
     background-color: blue;
     //box2写在box1里
     .box2 {
         width: 70px;
         height: 70px;
         background-color: red;
     }
 }

编译后的css：

.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.box1 .box2 {
  width: 70px;
  height: 70px;
  background-color: red;
}

2.2同级嵌套

既然父子级关系使用嵌套，那么伪类和伪元素应该怎么写，这就需要用到我们的同级嵌套了。

用法：使用“&”表示同级嵌套

举例：

伪元素写法：

.box2 {
     width: 100px;
     height: 100px;
     &:hover {
         width: 70px;
         height: 70px;
     }
 }

编译后：

.box2 {
  width: 100px;
  height: 100px;
}
.box2:hover {
  width: 70px;
  height: 70px;
}

交集选择器

 .box2 {
     width: 100px;
     height: 100px;
     &.box3 {
         width: 70px;
         height: 70px;
     }
 }

编译后：

.box2.box3 {
  width: 70px;
  height: 70px;
}

3、变量

Less中可以使用变量，可以给重复使用的属性赋给变量，方便调用和修改;

用法：变量声明：@变量名：值；
变量调用：@变量名；
变量的命名规则与通用代码规则一致：①、大小写敏感；②、字母数字下划线，不能以数字开头；
举例：


 @wid: 80px;
.box8 {
        width: @wid;
    }

编译后：

.box8 {
  width: 80px;
}

变量的作用域：

1、全局变量整个文档都可以用；
2、局部变量只能在此集合及子级中中用，且优先级更高；

举例：

下面的例子中：
100px的宽度整个文档都可以使用，故box7的宽度为100px；
box8再次定义了wid,优先级更高，故box9的宽度为80px；

//定义全局变量
@wid: 100px;
.box7 {
     width: @wid;
    .box8 {
    //再次定义@wid
        @wid: 80px;
        .box9 {
            width: @wid;
        }
    }
    
}

编译后：

.box7 {
  width: 100px;
}
.box7 .box8 .box9 {
  width: 80px;
}

4、混合

如果说变量为为单个属性提供了调用方便，那么混合就是为属性整体提供了调用方便；

4.1、整体调用混合参数

语法：
1、声明：xx {}
2、调用：xx;

举例：


.wh70 {
    width: 70px;
    height: 70px;
}
//调用.wh70
.w {
    .wh70;
}

编译后：

.wh70 {
  width: 70px;
  height: 70px;
}
.w {
  width: 70px;
  height: 70px;
}

4.2、部分调用混合参数

对混合参数级的一部分进行调用。
语法：
1、声明：xx {}
2、调用：xx.xx;

举例：

.commen{
    .button {
        border: 1px solid black;
        background-image: linear-gradient(pink,aqua);
        width: 200px;
        height: 200px;
    }
    .font {
        font-size: 25px;
        color: blue;
    }
}
//调用button模块的button部分
.b {
    .commen.button;
}

编译后：

.b {
  border: 1px solid black;
  background-image: linear-gradient(pink, aqua);
  width: 200px;
  height: 200px;
}

4.3、调用混合参数的某个属性

语法：
声明：与上边一致；
调用：.xx[属性]；
举例：

.commen{
    .button {
        border: 1px solid black;
        background-image: linear-gradient(pink,aqua);
        width: 200px;
        height: 200px;
    }
}
.b {
    width: .commen.button[width];
}

编译后：

.b {
  width: 200px;
}

值得一提的是，在传参后，就不能调用单个属性了，不晓得为啥。

4.4、混合参数的传参

Less语言强大的优势要体现了，传参功能赋予了Less无限的可能性，具体如下：

语法：
声明：xx（变量x，变量y）{ }
使用：xx(a,b)
举例：


 .box(@wid, @hgh){
     width: @wid;
     height: @hgh;
     background-color: #fff;
     border: 1px solid blanchedalmond;
 }

 .box2 {
     .box(100px,200px)
 }

编译后：

.box2 {
  width: 100px;
  height: 200px;
  background-color: #fff;
  border: 1px solid blanchedalmond;
}

5、函数

Less有很多内置函数，让各种复杂的计算简便化，这个我们后续分享；

6、实战练习

使用Less尽可能简单的写出如下样式：
在这里插入图片描述
代码如下：

.commen(@bg) {
    width: 300px;
    height: 200px;
    background-color: @bg;
    border: 1px solid black;
    border-radius: 5px;
}
.box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .box1 {
        .commen(pink);
    }
    .box2 {
        .commen(aqua);
    }
    .box3 {
        .commen(green);
    }
    .box4 {
        .commen(rgb(72, 145, 204));
    }
    .box5 {
        .commen(rgb(142, 197, 142));
    }
}