less的使用2 less操作：对于数字、颜色和变量，可以进行加减乘除操作。 3 less转义：例如color：~"gr

less的使用

less 简介

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。

CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

less 的能力

嵌套规则

/* 这是多行注释，
会编译到CSS文件中 */

// 这是单行注释，编译时会去掉注释
.container{
  display:flex;
  .header{
    background-color:red;
    width:100%;
    .nav{
      width:100px;
      height:100px;
    }
  }
}

运算操作

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作。

// 定义变量，后续可以直接使用
@fontSize: 10px;
// 选择器变量
@mySelector:#wrap;

//属性变量
@boderStyle:border-style;
@Solid:solid;
//url变量
@images: "../../img";
//声明变量
@background: {
  background-color: red
}

.myclass {
 font-size: @fontSize * 2;
 color:green;
 background-image: url("@{images}/1.jpg");
 // 动态插值
 @{mySelector}{
  @background();
  color: #ccc;
  width: 50%;
  //属性变量名，必须使用{}包起来
  @{boderStyle}:@Solid;
}
}

转义

它动态构建选择器，并使用属性或变量值作为任意字符串。

p {
  color: ~"green";
}

编译之后变为：

p {
  color: green;
}

函数

LESS 映射具有值操作的 JavaScript 代码，并使用预定义的函数来操纵样式表中的 HTML 元素。它提供了操作颜色的几个功能，如圆函数，floor 函数，ceil 函数，百分比函数等。很多，具体可以查资料。

@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
 width: percentage(@width);
}

函数名	描述	用例
color	代表颜色的字符串	color()
convert	数字从一个单位转换为另一个单位	convert()
Escape	它通过对特殊字符使用URL编码来对字符串或信息进行编码。您无法编码一些字符，例如，， / ，？， @ ，＆amp; ， + ，〜，！， $ ，'和您可以编码的一些字符，例如 \ ，#， > ^ ，(，)， {，} ，: >，＆gt; ，，] ， [和 = 。
escape(escape("Hello!! welcome to Tutorialspoint!"))
e	它是一个字符串函数，它使用string作为参数，并返回不带引号的信息。它是一个CSS转义，它使用〜“一些内容"转义的值和数字作为参数。	filter: e("Hello!! welcome to Tutorialspoint!");
输出结果为：filter: Hello!! welcome to Tutorialspoint!;
replace	它用于替换字符串中的文本。它使用一些参数：
string :它搜索字符串并替换。pattern :它搜索正则表达式模式.replacement :它替换与模式匹配的字符串。flags :这些是可选的正则表达式标志。	replace("Welcome, val?", "val?", "to Tutorialspoint!");输出："Welcome, to Tutorialspoint!"
ceil	它将数字向上舍入为下一个最大整数。	ceil(0.7) 输出1
floor	它将数字向下取整为下一个最小整数。	floor(3.3)输出 3
percentage	它将浮点数转换为百分比字符串。	percentage(0.2)输出：20%
round	它舍入浮点数。	round(3.77)输出：4
min	它指定一个或多个参数的最小值	min(70,30,45,20)输出：20
max	它指定一个或多个参数的最大值。	max(70,30,45,20)输出：70
isnumber	判断是否是数字	isnumber(1234); // true
isstring	是否字符串	isstring("variable"); // true
iscolor	是否颜色	iscolor(#fff);// true
min	它指定一个或多个参数的最小值	min(70,30,45,20)输出：20
min	它指定一个或多个参数的最小值	min(70,30,45,20)输出：20
min	它指定一个或多个参数的最小值	min(70,30,45,20)输出：20
min	它指定一个或多个参数的最小值	min(70,30,45,20)输出：20

命名空间和访问器

它用于将mixins分组在通用名称下。使用命名空间可以避免名称冲突，并从外部封装mixin组。

.class1 {
  .class2 {
    .val(@param) {
      font-size: @param;
      color:green;
    }
  }
}

.myclass {
  .class1 > .class2 > .val(20px);
}

文件导入

它用于导入LESS或CSS文件的内容。可以使用导入的文件里的内容。例如：变量

@import "//www.w3cschool.cn/less/myfile.less";
.myclass2 {
  color: #FF0000;
}

继承 extend

Extend是一个LESS伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。

.style {
  background: green;
}
h2 {
  &:extend(.style);
  font-style: italic;
}

混入 mixins 也可以携带参数和守卫guard

混合类似于编程语言中的函数。 Mixins是一组CSS属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。它可以存储多个值，并且可以在必要时在代码中重复使用。

// 定义带参数的mixins
.border(@width; @style; @color) {
    border: @width @style @color;
    color:yellow;
}

.myheader {
    .border(2px; dashed; green);
}
// 定义带守卫guard的mixins
.mixin (@a) when (lightness(@a) >= 50%) {
   font-size: 14px;
}
.class1 {
   .mixin(#FF0000)
}

CSS Guards

Guard用于匹配表达式上的简单值或参数个数。它应用于CSS选择器。它是用于声明mixin并立即调用它的语法。要成功地引出 if 类型语句; 将此功能与功能＆结合使用，您可以将多个guards分组。

@usedScope: global;
.mixin() {
  // 变量被mixin覆盖
  @usedScope: mixin;
  .cont when (@usedScope=global) {
    background-color: red;
    color: black;
  }
  .style when (@usedScope=mixin) {
    background-color: blue;
    color: white;
  }
}
.mixin();

循环

Loops语句允许我们多次执行一个语句或一组语句。当递归mixin与 Guard表达式和模式匹配组合时，可以创建各种迭代/循环结构。

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}

父选择器

可以使用＆(和号)运算符来引用父选择器。嵌套规则的父选择器由＆运算符表示，并在将修改类或伪类应用于现有选择器时使用。

a {
  color: #5882FA;
  // &代表当前a元素，
  &:hover {
    background-color: #A9F5F2;
  }
}