less css扩展语言

最新推荐文章于 2023-12-22 14:20:18 发布

qianjun111111

最新推荐文章于 2023-12-22 14:20:18 发布

阅读量373

点赞数

文章标签： vue.js 前端网络协议

本文链接：https://blog.csdn.net/qianjun111111/article/details/123768813

版权

less就是css的扩展语言

1变量

定义变量：

@width: 10px;

@color:#f00;

使用：

div a{

font-size:@width;

color:@color;

}

编译为：

div a{

font-size:10px;

color:#f00;

}

2 混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#main a {

color: #111;

.bordered();

}

.head a {

color: red;

.bordered();

}

.bordered 类所包含的属性就将同时出现在 #main a 和 .head a 中了。

3 嵌套

嵌套（nesting）代替层叠或与层叠结合使用。

写法如下：

.loginBlock {
       h3 {
           font-size: 18px;
           margin-bottom: 16px;
           font-weight: bold;
           line-height: 30px;

           span {
               color: dodgerblue;
               font-size: 26px;
               line-height: 30px;
           }
       }
   }

4 运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
————————————————
版权声明：本文为CSDN博主「稳重聪头」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/nnjjn/article/details/123764203

5 转义

//转义转义后都是字符串

@str:~".loginBlock .test span";

@b:~"1px solid #000";

@{str}{

color: red;;

border: @b;

}

6 函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}

命名空间和映射

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。

// 命名空间，映射
   #bg(){
       background-color: yellow;
       font-size: 24px;
   }
   #colors(){
       primary:blue;
       secondary:green;
       size: 24px;
   }
   .testp{
       //.test.s2();//取选择器里的所有属性与属性值
       font-size: #colors[size];
       background-color:.test.s3[background-color];
   }