什么是LESS？

Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。
它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。此外，Less 可以运行在 Node 或浏览器端。
一句话：用类似JS的语法去写CSS。
官网：
① LESS官网：http://lesscss.org/
② LESS中文网：http://www.lesscss.cn/

LESS的特点？

作为CSS的一种扩展，LESS CSS不仅向下兼容CSS（可以在LESS中书写CSS，不能在CSS中书写LESS）的语法，而且连新增的特性也是使用CSS语法。这样的设置使得学习LESS非常轻松，而且你可以在任何时候回退到CSS。

如何使用？

客户端直接调用
① 代码
```
<link rel="stylesheet/less" href="less/less.less">

<script type="text/javascript" src="js/less.min.js"></script>

```
② 注意
1. 必须在服务器环境中才能生效，动态编译注入虚拟DOM或者内存中，类似ajax。
2. 开发中常用的服务器组合：WAPM
预编译（提前编译）
① 在代码编辑器中，按照LESS的语法规则写好LESS文件；
② 使用编译工具把.less文件编译成.css文件；
③ 把编译后的css文件引入到页面即可。
④ 编译工具：考拉

使用方法：
1. 引入项目
2. 新建less文件夹，在其中新建××.less
3. 新建css文件夹
4. 在考拉中，刷新，编译××.less
5. css文件夹中自动生成对应css文件

核心语法

变量：使用@定义变量
① 单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
② 代码
```
// JS中定义变量
var name = '张三';// LESS中定义变量
@color:red;
h1{color: @color;
}
```
嵌套
① 在一个选择器中嵌套另一个选择器来实现继承，这样很大程度上减少了代码量，并且代码看起来更加清晰。
② 代码：
```
 div{h1{color:red;}div{h2{font-size:20px;}}}
```
③ 注意：嵌套一般情况下，不要超过3层
运算
① 运算提供了加、减、乘、除操作，其他复杂的运算交给函数；通常我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
② 代码：
```
@w:500px;
div{h1{width: @w - 100;}
}h1{width: @w;border: 1px solid #000;
}
```
③ 注意：运算符与值之间必须以空格分开。
混合（Mixins）：使用.定义混合
① 混合可以将一个定义好的class A轻松的引入到class B中，从而简单的实现class B 继承class A的所有属性。我们还可以带参数的调用，就像使用函数一样。
② 代码：
```
.yuanjiao(@radius:5px , @rotate){border-radius:@radius;transform:rotate(@rotate);
}
h1{width:300px;height:100px;border:1px solid #000;backgroud:pink;.yuanjiao(30px, 60deg);
}
h2{width:200px;height:100px;border:1px solid #000;.yuanjiao(40px, 80deg);
}
```
③ 注意：
1. 混合的使用就和js的自定义函数类似，首先混合必须前面是以 . +混合名称开始
2. 结构：.名称(变量){}
3. 可以有默认值，也可以没有默认值，没有的话，在调用的时候必须传参，有默认值的时候就可以不用传递参数；
4. 多个参数之间和js一样，用逗号（,）隔开

函数
① LESS中的函数 - 映射了JavaScript函数代码，如果你愿意的话，可以操纵属性值。
② 比如：鼠标移上亮度增加20%。

@color:#F60;
div{a{font-size:30px;text-decoration:none;color:@color;&:hover{color:lighten(@color,20%)}}
}

③ 查文档：

saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10

匹配模式
① 类似js中的if else判断，只有匹配成功才能起作用
② 代码：

.radius(t_l,@w:5px){border-top-left-radius:@w;
}
.radius(t_r,@w:5px){border-top-right-radius:@w;
}
.radius(t_l,@w:5px){border-bottom-left-radius:@w;
}
.radius(t_r,@w:5px){border-bottom-right-radius:@w;
}
div{width:300px;height:200px;background:pink;border:1px solid #000;.radius(t_r,10px);
}

③ 注意：
匹配模式中, 定义的模式名称都是一样的，只是参数不一样，调用的时候只需选择对应的参数就可以了。

补充

如何在一个LESS文件中导入另一个LESS文件？

@import "less.less"; // 注意：less文件扩展名可选

Else
① // 不会被编译器编译的注释
② /**/ 是可以被编译器编译的注释
③ ~’ ’ 表示的是禁止被编译
④ & 表示选择所有的父级元素

LESS：基础用法学习笔记相关推荐

Python基础语法学习笔记
Python基础语法学习笔记想淘宝省钱看我简介,博客www.liangxin.name (一) 一.Print()函数 1.数字可以直接输出,无需加引号只能理解数字,却读不懂文字.因为数字和数学运 ...
python基础知识学习笔记（1）
python 基础知识学习笔记(1) 总结一下Python基础知识,以防忘记. 文章目录 python 基础知识学习笔记(1) 一.起步 1.python安装与编译环境二.变量和简单数据类型三.列 ...
厚基础Linux——学习笔记（一）
厚基础Linux--学习笔记(一) 命令清单本期命令 history 问题一:命令执行记录需要详细的执行时间问题二:某些命令带有隐私信息,不希望被记录下来 history -c history - ...
linux磁盘符变化autofs,Linux基础教程学习笔记之Autofs自动挂载
Linux基础教程学习笔记之Autofs自动挂载 Autofs自动挂载: yum -y install autofs vim /etc/auto.master 在文件中添加下面行 /home/gue ...
python基础入门学习笔记 (2)
python基础入门学习笔记 2021年2月8日 1 编译器和解释器的区别编译器/解释器:高级语言与机器之间的翻译官 2 值传递: print "a = ",a print &q ...
鸟叔linux私房菜基础篇简体,鸟叔的Linux私房菜基础篇-学习笔记(一)
鸟叔的Linux私房菜基础篇-学习笔记(一) 开机进入命令行模式: ctrl+alt+[F1-F6]的任意键进入命令行编辑界面 ctrl+alt+F7进入图形界面模式开始下达指令 [dmtsai@s ...
网络存储 linux 访问,Linux基础教程学习笔记28——使用Samba访问网络存储
Linux基础教程学习笔记28--使用Samba访问网络存储 SMB用于Windows和类Linux系统直接的文件共享安装samba client包: [root@linuxidc~]# yum i ...
Python 基础知识学习笔记——NumPy
Python基础知识学习笔记--NumPy 与 matlab 优秀的矩阵运算类似,python 提供了 numpy 库,这对熟悉 matlab 的用户来说非常友好.向量.矩阵和多维数组是数值计算中必不 ...
Python 基础知识学习笔记——OpenCV（1）
Python 基础知识学习笔记--OpenCV(1) OpenCV是一个开源的跨平台计算机视觉和机器学习软件库,它轻量而且高效,被广泛的使用. 整理一下OpenCV学习笔记,以防忘记. 文章目录 Py ...
Python基础知识学习笔记——Matplotlib绘图
Python基础知识学习笔记--Matplotlib绘图整理python笔记,以防忘记文章目录 Python基础知识学习笔记--Matplotlib绘图一.绘图和可视化 1.导入模块 2.一个简 ...

LESS：基础用法学习笔记

什么是LESS？

LESS的特点？

如何使用？

核心语法

补充

LESS：基础用法学习笔记相关推荐

最新文章

热门文章