Less 教程
前言
CSS的短板
作为前端学习者的我们都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能给初学者第一印象就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强。
预处理语言：Sass、Less 、Stylus 。
- Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外 在国内外都很受欢迎，并且它的项目团队很是强大 ，是一款十分优秀的预处理语言。
- Stylus 诞生于 2010 年，来自Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
- Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。 它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
什么是LESS？
Less是一种动态样式语言；为提高css应用的灵活性和效率，LESS 将 CSS 赋予了动态语言的特性，如 变
量， 继承， 运算， 函数。LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助
Node.js在服务端运行
LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。
CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。
为什么要使用LESS？
LESS支持创建更清洁，跨浏览器友好的CSS更快更容易。
LESS是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
LESS保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
可以通过使用LESS 变量来实现更快的维护。
优点
LESS轻松地生成可在浏览器中工作的CSS。
LESS使您能够使用嵌套编写更干净，组织良好的代码。
通过使用变量可以更快地实现维护。
LESS使您能够通过在规则集中引用它们来轻松地重用整个类。
LESS提供使用操作，使得编码更快并节省时间。
缺点
学习如果你是新的CSS预处理需要时间。
由于模块之间的紧密耦合，应当采取更多的努力来重用和/或测试依赖模块。
与旧的预处理器(例如Sass)相比，LESS具有较少的框架，Sass由框架 Compass ， Gravity和 Susy 组成。
安装easy less
Less 变量
变量作为 Less 的一个强大的功能，它可以让我们像在其它高级语言中一样声明变量，这样我们将重复出现的颜色，尺寸，选择器，字体名称和 URL 等存储起来。
LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
LESS中声明变量的格式为“@变量名：变量值”。
下表详细说明了使用LESS 变量。
使用场景及类型
- 值变量
- 选择器变量
- 属性名变量
- URL 变量
- 声明变量
- 变量运算
// 定义属性常规
@color1: red;
.div1 {
background-color: @color1;
}
.div2 {
background-color: @color1;
}
// 选择器名插值
@head: h;
.@{head} {
font-size: 16px;
}
// 属性名插值
@my-property: color;
.myclass {
background-@{my-property}: #81f7d8;
}
// URL插值
@host: 'http://www.waibo.wang/';
h2 {
color: @color1;
background: url('@{host}img/bg.png');
}
// import插值
@host: 'http://www.waibo.wang/';
@import '@{host}/reset.less';
Less 继承
Extend 是 Less 语法中的一个伪类，它可以继承所匹配的全部样式。
Extend 是为了解决样式表中重复的样式，这一点与其它语言中的继承功能相似。
Extend 主要用于复用重复的样式类，可附加在选择器上或放置到样式集中。
使用场景及类型
- 选择器上使用
- 单样式类
- 多个样式类
- ‘all’ 关键字
- 声明变量
- 变量运算
// 1.常规
nav {
&:extend(.line);
background: blue;
}
.line {
color: red;
}
// 2.附加在选择器上使用 <selector>:extend(<extendSelector>) { }
.b {
color: red;
}
.a:extend(.b) {
background: blue;
}
// 3.在样式集中使用
// <selector> {
// &:extend(<extendSelector>);
// }
.c {
&:extend(.d);
}
.d {
color: red;
}
// 4.继承多个样式类
.style1 {
&:extend(.style2,
.style3);
}
.style2 {
color: red;
}
.style3 {
background-color: red;
}
// 5.继承中的 ‘all’ 关键字
.a {
&:extend(.b all);
}
.b {
color: red;
.c {
background: #8a2be2;
}
}
总结
- 利用重复代码
- 减小CSS代码体积
混合
“mix-in” 的中文翻译为 “混合” 。简而言之，在 Less 中 Mixins 的作用就是，在已有的样式中添加其他已经定义好的属性集合，从而达到属性复用的效果。
使用场景及类型
- 选择器中的样式
- 选择器伪类
- 多!important 关键字的 Mixins
- 不输出 Mixins 源码
- Mixins 命名空间
- 变量运算
// mixin
.a {
color: red;
}
.mixin {
.a();
}
// 选择器的 Mixins
.hover-mixin {
&:hover {
border: 1px solid red;
}
}
button {
.hover-mixin();
}
// 包含 !important 关键字的 Mixins
.color {
color: red;
background: blue;
}
.background {
.color() !important;
}
// 不输出 Mixins 源码 （）区分
.color-mixin() {
//加上()
color: red;
}
.bg {
.color-mixin();
}
// 命名空间
// .namespace > .bg;
// .namespace > .bg();
// .namespace .bg;
// .namespace .bg();
// .namespace.bg;
// .namespace.bg();
.namesapce {
.bg() {
color: red;
}
}
.content {
.namesapce > .bg(); //调用
}
代码解释：使用 Mixins 前提是需要先定义一个样式类（.a），然后在引用的样式类（.mixin-class）中写入之前定义的样式类名称，并在名称后加上 “()” 来表示一个 Minxins 。我们可以把 Mixins 当作一个样式的集合，同样后面需要加上 “;” ，避免造成语法错误。
总结
定义的 Mixins 名称后面如果不加 “()” ，则会编译到生成的 css 中，反之则不会。
引用的 Mixins 名称后的 “()” 可以省略，但是为了避免代码混淆，建议大家在引用时加上 ‘()’
.a {
color: red;
}
.b {
// .a() 或者 .a 都可以
.a();
}
## 区别
本章节主要介绍了 Mixins 在样式复用方面的内容，在该功能上与上一个章节讲到的 :extend() 比较类似 ，如果复用的代码不用出现在编译后的代码中，推荐使用 Mixins 进行代码的复用，反之使用 :extend() 比较好。
混合的本质是拷贝,只是减少了less文件中的冗余代码,并没有减少css文件中的冗余
继承的本质是并集选择器,减少了css中的代码
参数混合（Parametric Mixins）
含有传入参数的 Mixins 。
// 设置默认参数
.circle(@radius: 5px) {
border-radius: @radius;
}
button {
.circle();
}
// 多参数
.primary(@color; @padding; @margin: 2px) {
color: @color;
padding: @padding;
margin-top: @margin;
}
button {
.primary(#ffffff; 5px);
}
// 参数顺序
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.primary {
.mixin(@margin: 20px; @color: #33acfe);
}
.success {
// 第一个参数未填写参数名称，所以代表的是 @color
// 第二个参数名称为 @padding ，所以说 @margin 参数未传入会取默认值
.mixin(#efca44; @padding: 40px);
}
// @argument 变量
.box-shadow(@x: 0; @y: 0; @z: 1px; @color: #000) {
box-shadow: @arguments;
}
button {
.box-shadow(2px; 5px);
}
// 匹配
.img(@color) {
bgckground: @color;
}
.img(@color; @padding: 2px) {
color: @color;
padding: @padding;
}
div {
.img(#000);
}
总结
本章节主要学习了 Mixins 参数使用的几种方式，这几种方式与 ES6 中函数的参数思想较为类似，有默认参数、@argument、剩余参数等，熟练应用可以使你的 Mixins 灵活性更强，但是一定要注意两个同名 Mixins 之间的覆盖问题，为 Mixins 加上命名空间可以防止类似的问题发生。
Less 混合函数 Mixins as Functions
Mixins 可以作为一个函数使用返回参数或者一个新的 Mixins
Mixins 不仅可以对样式表进行复用，它也可以看作是一个函数。
类似于 JS 等编程语言中函数，它也具有函数的诸多特征，比如传入参数、返回参数等。
比如我们需要声明一个函数返回 @width、@height 两个变量，我们可以这样定义一个 Mixins 。
// 无参
.return() {
@width: 80%;
@height: 20px;
}
.callback {
.return();
width: @width;
height: @height;
}
// 返回参数
.img(@line, @row) {
@width: ((@row+ @line) / 2);
}
img {
.img(20px, 50px); // 引入 mixin
width: @width; // 使用返回值（@width）
}
// 返回 Mixins
.return-mixins(@color; @size) {
.mixins() {
//返回 mixins
background: @color;
font-size: @size;
}
}
.id {
.return-mixins(red; 28px);
.mixins(); //引用返回的 mixins
}
总结
混合函数返回值时可以处理传入的参数，对参数进行一系列复杂的参数处理。
混合函数返回 Mixins 时注意需要先调用混合函数，才能调用返回的 Mixins
样式导入
通过导入指令引入其他样式表的内容
导出并不需要特殊的语法，但是导入需要我们使用 @import 语法并加上文件名称。此外导入机制仅编译我们用到的代码，并不会编译多余的代码。
类似于原生 CSS 语法的导入指令，在 Less 中我们也是通过 @import 指令引入其他样式表。
比如引入normal.less文件：
@import './normal.less';
.apple {
background: yellow;
}
.apple {
background: palegreen !important;
}
@import './normal.less';
@import './normal';
@import './normal.less';
https://mobile.ant.design/zh/components/button/
小结
文件导入顺序
优先级设置
重名函数
组件库样式重写
