less语法学习

1、维护css弊端

维护css弊端

CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less 介绍
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
安装使用
推荐使用vscode插件

2021-03-22_194710.png

新建一个.less文件后保存后系统会自动生成对应的.css文件

2021-03-22_194855.png

2021-03-22_194710.png

2、less语法

2.1变量（Variables）

@变量名:值;

必须有@为前缀
不能包含特殊字符
不能以数字开头
大小写敏感
例如：

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
编译为：
#header {
  width: 10px;
  height: 20px;
}

2.2混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
例如：

CSS
.bordered{
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
引用：
LESS
#menu a{
color:red;
.bordered();
}

2.4嵌套（Nesting）

CSS
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
引用：
LESS
#header{
color: black;
.navigation {
  font-size: 12px;
}
 .logo {
  width: 300px;
}
}

下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

CSS
.banner {
  margin: 0 auto;
}
LESS
@my-selector: banner;
.@{my-selector} {
  margin: 0 auto;
}

图片路径：
CSS
body {
  background: url("../img/white-sand.png");
}
LESS
@images: "../img";
body {
  background: url("@{images}/white-sand.png");
}
跨级引用
CSS
.section .element {
  color: green;
}
LESS
@primary:  green;
@secondary: blue;
.section {
  @color: primary;
  .element {
    color: @@color;
  }
}

2.5Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

// 所有操作数被转换成相同的单位
@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%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。

@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：

@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

最后编辑于：2021.03.22 20:17:47