本文详细介绍了Less预处理语言的用法和功能，包括变量、混合、嵌套、运算、转义、函数、命名空间、映射、作用域、注释和导入。通过实例展示了如何在Node和浏览器环境中使用Less，以及Less如何增强CSS的可维护性和扩展性。
Less （Leaner Style Sheets 的缩写）是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。
一、Less用法：
1.安装Less
cnpm/npm install -g less //这里可以简写为cnpm/npm i -g less
2.检测Less安装是否成功
Lessc -v/--version
3.Less的使用：
(1)在node环境中使用Less
lessc styles.less styles.css //通过lessc将less代码转为可识别的css代码
(2)在浏览器环境中使用Less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
当引入.less文件后，要注意rel属性值的后面需要加上“/less”，并且需要引入less.min.js文件，用来解析引入的less文件。
还有一种方法很高效地将less文件解析出对应的css文件：
安装插件Easy LESS，写完less文件保存后直接会解析出一个对应的css文件
二、Less具有的功能：
1.变量（Variables）
Less中，可以使用变量的形式来定义，在规则中直接应用，便于代码的修改。
定义方式为：@k:v;
使用方式为：@k;
例如：
（1）Less中变量的定义方式：
@color1: teal;
@fontSize: 24px;
（2）Less中的变量的使用方式：
body{
color: @color1;
font-size: @fontSize;
}
可编译为（即以css样式显示）：
body {
color: teal;
font-size: 24px;
}
2.混合（Mixins）
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。混合的使用类似于方法的调用
例如：
.bordered {//类名为bordered的样式
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {//id为menu的后代为a标签的所有元素
color: #111;
.bordered();
}
.bordered();表示的是调用类名为bordered的样式放在id为menu的后代为a标签的所有元素的规集中。
3.嵌套（Nesting）
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。可以在嵌套中使用伪类选择器和伪元素选择器，& 表示当前选择器的父级。
我们原先写css样式的时候，一个元素的子代元素或是其后代元素都是从该元素开始被选择的，为了简便我们可以在父元素里面嵌套css演示，使得其后代元素或是其子代元素被选中，例如：
body{
color: @color1;
font-size: @fontSize;
//div{}表示的是该body元素下的所有div元素（包括子代div和孙子辈的div）都被选中
& > div{//表示的是body子代div元素被选中,&表示的是包含它的父元素
width: @width1;
height: @height1;
}
}
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
例如：
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/https/blog.csdn.net/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
@media为媒体查询，可针对不同的屏幕尺寸设置不同的样式，即设置响应式的页面。上面的代码块会由内而外地冒泡显示样式，编译格式一般为险些@media条件，里面再写当前条件下的标签样式，可编译为：
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/https/blog.csdn.net/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
4.运算（Operations）
算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。
如果可能的话，算术运算符在加、减或比较之前会进行单位换算。任何操作数都被换算为相同的单位。
计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。
无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
例如：
（1）运算中单位不同（以左侧单位为准）
@conversion-1: 5cm + 10mm; // 结果是 6cm
（2）运算中一个有单位，一个没有单位，就会根据有单位的单位进行计算
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
（3）乘法和除法不作转换
因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。（指定的是操作符左侧的单位）
例如：
@base: 2cm * 3mm; // 结果是 6cm
（4）对颜色进行算术运算
@color: #224488 / 2; //结果是 #112244，前提条件是被除数能够整除2
background-color: #112244 + #111; // 结果是 #223355，#111等价于#111111
（5）calc()
calc() 函数用于动态计算长度值。calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。要注意的是：
运算符的前后都需要有一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
该函数支持“+”、“-”、“*”、“/”运算
该函数使用标准的数学运算优先级规则
5.转义（Escaping）
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。例如：
@min768: ~"(min-width: 768px)"; //Less 3.5+ 版本后，不需要进行引号转义了
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
6.函数（Function）
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等，这里了解Less的一些内置函数
（1）逻辑函数
if判断条件
@color1: red;
@color2: green;
body {
background-color: if((2 < 1), @color2, @color1);//表示的是如果2<1的值为真，返回变量@color2,否则返回@color1，类似于三目运算
}
这里考虑到一个问题就是当我的color变量设为颜色关键字但是用引号引起来，那么这就是一个字符串，用原先使用的方法使用时，是不会出现效果的
@color1: 'red';
body {
color: @color1;
}
那么我们要使其出现关键字所展示的效果时，需要在使用的时候将使用定义的这个变量前面加上color表示颜色，即color: color(@color1);
iscolor表示的是被判断的那个变量是不是颜色，返回的结果是个boolean值
background-color: if((iscolor(@color2)), @color2, color(@color1));
boolean：返回布尔值
background-color: if((boolean(2 < 1)), @color2, color(@color1));
（2）列表函数
列表函数中的range函数，里面有三个参数，第一个参数为开始位置，第二个参数为结束位置，最后一个参数为每步步长。
@list: range(1, 12, 1);
each()函数,该函数有两个参数，第一个为列表名称，第二个是匹配规则例如：
@list: range(1, 12, 1);
each(@list, {
.row-@{value} {
width: round(8.3% * @value);
}
})
list表单总共是12份，开始为1，结束为12，每步长为1，那么这里设置一个四舍五入来遍历每份宽度所占的百分比。round函数属于math函数，表示的是四舍五入
可编译为：
.row-1 {width: 8%;}
.row-2 {width: 17%;}
.row-3 {width: 25%;}
.row-4 {width: 33%;}
.row-5 {width: 42%;}
.row-6 {width: 50%;}
.row-7 {width: 58%;}
.row-8 {width: 66%;}
.row-9 {width: 75%;}
.row-10 {width: 83%;}
.row-11 {width: 91%;}
.row-12 {width: 100%;}
7.命名空间和访问符
命名空间和访问符作用：对混合（mixins）进行分组，方便重用或分发。
当要调用一个样式中的一块样式，那么就需要对被调用者进行空间命名，命名空间格式为：
访问符命名空间名字(){样式设计}
使用时的语法格式为(类似于方法的调用)：
访问符命名空间名字.代码块的选择器名称();
#space() {
.header {
color: white;
font-size: 24px;
}
.content {
font-size: 18px;
color: black;
}
.footer {
text-align: center;
}
}
div {
border: 1px solid #333;
#space.header();//还可以书写为 #space > .header
}
编译为：
div {
border: 1px solid #333;
color: white;
font-size: 24px;
}
8.映射（Maps）
映射指的是将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用例如：
#colors() {
primaty: lightblue;
success: green;
danger: red;
}
.button {
color: #colors[primaty];//这块使用的是映射，color属性的值为命名空间为#space()里的primaty的值，即lightblue
font-size: 24px;
}
编译为：
.button {
color: lightblue;
font-size: 24px;
}
9.作用域（Scope）
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。例如：
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
首先color的属性值为@var变量，先找本地是否有该变量，有的话取本地值，没有的话从父级取值
本地取值：
父级取值：
Less 中的作用域与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。即等价于：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
10.注释（Comments）
行注释：“//”
块注释：“/* 注释内容 */”
11.导入（Importing）
可以导入一个文件，该文件的所有变量可全部使用，若导入的是一个.less文件且扩展名为.less，则可以将扩展名省略掉
例如：
@import "4-less-命名空间";//4-less-命名空间的扩展名为.less
@import "1-less入门.css";//其余文件需要加拓展名
扫一扫
1092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
