Less预处理语言

最新推荐文章于 2024-03-25 14:10:09 发布

Y一蓑烟雨任平生

最新推荐文章于 2024-03-25 14:10:09 发布

阅读量325

点赞数

本文链接：https://blog.youkuaiyun.com/Yuan_hongbao8888/article/details/107985802

版权

Less

是css的预处理语言，LESS将CSS赋予了动态语言的特性，如：变量，继承，运算，函数。
css预处理语言编写的代码，浏览器不认识，需要编译成浏览器能认识的真正的css

准备工作

创建less文件：
创建一个以.less为后缀的文件，把css写在这个文件中，就可以使用动态特性了
使用编译工具
lessc 命令行编译工具
gulp
webpack
命令行工具
cmd中执行脚本命令用计算机底层的一些命令，或执行第三方提供的功能
安装：
使用cmd把第三方模块安装到计算机中
nodejs中有一个npm模块，这个npm模块提供了下载功能
npm命令安装： npm install xxx
参数：
–save 简写-S(开发阶段，生产阶段) 是两个阶段都需要使用的模块,模块信息放在package.json中的dependencies属性中
–save-dev 简写-D只在开发阶段使用的模块，模块信息放在package.json中的devDependencied属性中
–global 简写-g全局安装
安装less
全局安装 : npm install -g less
项目依赖： npm i -S less
npm 初始化
npm init -y(快速创建package.json，能记录下载那些模块，还可以进行配置，快速启动命令)

编译Less

编译后输出到命令行中 lessc 文件名.less
编译后输出到文件中 lessc 文件名.less 文件名
在浏览器环境中使用 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语法

定义变量： @变量名
变量的算法：
可以使用四则运算，还可以计算颜色；【注】运算时以第一个出现的单位为匹配对象，也就是最终单位
变量作用域：
在less中，以大括号为作用域，定义在大括号外的变量就是全局变量，定义在内部的就是局部变量
选择器变量
混合 : 是一种将一组属性从一个规则集包含到另一个规则集的方法。

	.bb {
		color : red;
	}
	.post a {
		font-size : 24px;
		.bb();
	}

嵌套 : Less的书写模仿HTML的组织结构，使代码更简洁

	#header{
	     font-size : 24px;
	     .nav{
	           color : red;
	      }
	      .swiper{
	            border:1px solid #000;
	      }
	}

使用此方法将伪选择器与混合一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合(& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

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

规则嵌套和冒泡

运算：算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。乘法和除法不作转换。还可以对颜色进行算术运算。Less 提供的色彩函数更有使用价值。