关于Less你知道多少？赶紧来看看叭~

最新推荐文章于 2024-05-21 23:21:19 发布

H_M99

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量999

点赞数 2

文章标签：前端 less vue 前端框架 html5

本文链接：https://blog.csdn.net/H_M99/article/details/123783678

版权

Less是一门CSS扩展语言，也称为CSS预处理器。
其实常见的css预处理语言除了Less，还包括sass和stylus。
使用Less之前需要先安装Less，Less的安装步骤如下：（1）先安装node.js；（2）基于安装的node.js，使用命令“npm install -g less”进行Less的安装。

在Less中，注释的写法与css中的写法保持一致 // ， /* */。

命名规则：@变量名:变量值;

@color:red;
h1{color:@color;}

子元素的样式直接写到父元素里面，如果内层选择器的前面有&符号，则被解析为父元素自身或父元素的伪类；如果内层选择器的前面没有&符号，则被解析为父选择器的后代。

ul{
   color:red;
   li{  line-height:48px;
      a{text_decoration:none
         &:{color:#f70;}
       }
   }
}

Less提供了加（+）、减（-）、乘（*）、除（/）和括号辅助运算。

@w:10;
.s1{padding:@w*2;}
.s2{padding:@w+10px;}

允许你使用任意字符串作为属性或变量值，转义后都是字符串，如果作为选择器或者数学 @{变量}

@str :~".block .span"
@{str}{
   color:red;
}

@b : ~"1px solid red";

.test{
border:@b;
}

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

lighten(color,20%)
//变亮

从 Less 3.5 版本开始，你还可以将混合和规则集作为一组值的映射（map）使用。

.border(){
border:1px solid red;
padding:20px;
}

.test{
   .border();
}

.test{
   border:.border[border];
   padding:.border[padding]
}

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从父级作用域继承。

@color:red;
.test{
    @color:blue;
     .block{color:@color}
}

可以导入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用，Less大致可分为两种导入方式：

@import “xxx.less”;
@import "xxx.css"

关注