Less精简直接上手,纯干货教程

目录

介绍

安装插件

入门使用测试

​编辑 less变量


介绍

less作为一门CSS扩展语言,也就是说CSS预处理器。(Leaner Style Sheets)简称less,它只不过是为css新增这些的功能,比如说:变量、函数、作用域等等。它的优点是:更具有维护性、扩展性等,可以降低了维护的成本,根据按这样的话,那么less可以让我们写更少的代码做更多的事情。

    和css相比下,css的语法非常简单,而且对开发者来说要求比较低,比较合适小白者,但是遇到有些问题,比如没有这种变量、函数等等,的确还不如less的扩展性,需要写大量的代码,但是看眼中的确没有逻辑的代码,CSS冗余度是比较高的。不方便维护,不利于复用,而且没有计算的能力。

   如果对css有基础的话,less很容易上手的。因为css和less区别不大的,反正可以通过编译生成浏览器能识别的css文件。

安装插件

安装vs code插件来进行开发

Less精简直接上手,纯干货教程_第1张图片

入门使用测试

新建后缀为.less的文件,再新建一个html文件,直接编写less文件

Less精简直接上手,纯干货教程_第2张图片 Less精简直接上手,纯干货教程_第3张图片

查看效果

Less精简直接上手,纯干货教程_第4张图片 less变量

less中使用@变量名 来定义变量 后面在使用时使用{变量名}来进行使用

Less精简直接上手,纯干货教程_第5张图片

属性变量

Less精简直接上手,纯干货教程_第6张图片 声明变量

Less精简直接上手,纯干货教程_第7张图片

less嵌套

less支持样式间的层级嵌套关系,这一点和sass一样,可以很明显地查看出样式之间的层级嵌套关系

Less精简直接上手,纯干货教程_第8张图片 

你可能感兴趣的:(web,前端,less,前端,css)