css预处理器之less

最新推荐文章于 2024-07-20 18:16:53 发布

时光无声￡

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量326

点赞数

分类专栏： less 文章标签： less css

本文链接：https://blog.csdn.net/weixin_44586981/article/details/119239175

版权

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。

less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/

less中的注释

以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

less中的变量

使用@来声明一个变量：@pink：pink;
1.作为普通属性值来使用：直接使用@pink
2.作为选择器和属性名：@{声明的变量名}的形式
3.作为URL：@{url}
4.变量的延迟加载 (less中的变量是块级作用域, 同名的变量会覆盖之前的同名变量)

less中的嵌套规则

1.基本嵌套规则 (父子关系)
2.&的使用 (当前的选择器与祖先级的选择器同辈)

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

less运算

在less中可以进行加减乘除的运算

less避免编译

使用~“放避免编译的东西”

less继承

性能比混合高
灵活度比混合低

使用继承就是在编译之后将多个选择器中的公共样式提取出来

使用混合在编译之后公共样式没有提取出来

示例:

HTML结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/01.css"/>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				
			</div>
		</div>
	</body>
</html>

1.普通混合

less文件:

.juzhong{
   
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 400px;
	height: 400px;
}
#wrap{
   
	.juzhong;
	background-color: gray;
	.inner{
   
		.juzhong;
		background-color: red;
	}
}

css文件

.juzhong {
   
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 400px;
}
#wrap {
   
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 400px;
  background-color: gray;
}
#wrap .inner

最低0.47元/天解锁文章

时光无声￡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css预处理器之less

less less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。less的中文官网：http://lesscss.cn/bootstrap中less教程：http://www.bootcss.com/p/lesscss/less中的注释以//开头的注释，不会被编译到css文件中以/**/包裹的注释会被编译到css文件中
复制链接

扫一扫