初识Less

「这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」。

今天咱们来讲讲Less，Less不止有嵌套哦~

注释

1.以//开头的注释，不会被编译到css文件中

2.以/**/包裹的注释会被编译到css文件中

变量

使用@来申明一个变量

1.作为普通属性值来使用，直接使用 eg：

@link-color: #333;
.box {
  color: #fff;
  background: @link-color;
}

2.作为选择器或属性的形式

//选择器
@my-selector: banner; 
.@{my-selector} {
  font-weight: bold; 
  line-height: 40px; 
  margin: 0 auto; 
}

//属性
@property: color; 
.widget { 
  @{property}: #0ee; 
  background-@{property}: #999; 
 }

编译成：

//选择器
.banner {
  font-weight: bold;
  line-height: 40px; 
  margin: 0 auto; 
}
//属性
.widget {
  color: #0ee; 
  background-color: #999; 
}

3.作为url：@{url}

@images: "../img";
body { 
  color: #444; 
  background: url("@{images}/white-sand.png");
}

4.变量的延迟加载

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;//在less里变量延迟加载，等所在大括号的解析完，再看var是多少
    @var: 3;
  }
  one: @var;
}

//转为css后：
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准,乘法和除法不作转换。

// 所有操作数被转换成相同的单位 
@conversion-1: 5cm + 10mm; // 结果是 6cm 
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm 
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 5%; 
@filler: @base * 2; // 结果是 10% 
@other: @base + @filler; // 结果是 15%

@base: 2cm * 3mm; // 结果是 6cm

转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。eg：

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

编译为：

@media (min-width: 768px) {
  .element { 
    font-size: 1.2rem; 
  }
}

从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px); 
.element { 
  @media @min768 {
    font-size: 1.2rem;
  }
}

作用域

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

导入

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

ok，文章到这里就结束啦~(づ｡◕‿‿◕｡)づ